# Use ionic with jQuery?

**URL:** <https://forum.ionicframework.com/t/use-ionic-with-jquery/1120>\
**Category:** ionic-v1\
**Created:** [February 15, 2014, 8:37am UTC](https://forum.ionicframework.com/t/use-ionic-with-jquery/1120 "2014-02-15T08:37:52Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![denzel\_zyh](https://avatars.discourse-cdn.com/v4/letter/d/49beb7/32.png) [@denzel\_zyh](https://forum.ionicframework.com/u/denzel_zyh)\
**Post date:** [February 15, 2014, 8:37am UTC](https://forum.ionicframework.com/t/use-ionic-with-jquery/1120/1 "2014-02-15T08:37:52Z")

</div>

Hi, I am just starting to develop a web app using ionic. I find it is a great tool to build native-style interface. However, I am not familiar with AngularJS. And for some other reasons, our team don’t want to use AngularJS for our front-end framework. So my question is:

Is it still proper to use ionic without AngularJS? Does it work well with jQuery?

---

<div class="post-metadata">

**Author:** ![jonathan\_hindi](https://avatars.discourse-cdn.com/v4/letter/j/a87d85/32.png) [@jonathan\_hindi](https://forum.ionicframework.com/u/jonathan_hindi)\
**Post date:** [February 15, 2014, 9:19am UTC](https://forum.ionicframework.com/t/use-ionic-with-jquery/1120/2 "2014-02-15T09:19:49Z")

</div>

Hi Denzel,

Yes, I think you can, but you will lose all the AngularJS goodies that comes with Ionic by default and you will have to use the low-level js api which is not fully documented at the moment as far as I know. but if you can dive your way into `ionic.js` you will get to know all the low-level apis available for you.

---

<div class="post-metadata">

**Author:** ![TheStenkildee](https://avatars.discourse-cdn.com/v4/letter/t/278dde/32.png) [@TheStenkildee](https://forum.ionicframework.com/u/TheStenkildee)\
**Post date:** [February 17, 2014, 2:21pm UTC](https://forum.ionicframework.com/t/use-ionic-with-jquery/1120/3 "2014-02-17T14:21:50Z")

</div>

Hmm, what if I want to use both jQuery and Angular at the same time?  
Is that a stupid thing, or is it possible?

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [February 17, 2014, 3:20pm UTC](https://forum.ionicframework.com/t/use-ionic-with-jquery/1120/4 "2014-02-17T15:20:53Z")

</div>

There is a small implementation of jQuery built in to Angular. If you need the full force of jQuery, there shouldn’t be an issue. I use jquery and angular together all the time.

---

<div class="post-metadata">

**Author:** ![TheStenkildee](https://avatars.discourse-cdn.com/v4/letter/t/278dde/32.png) [@TheStenkildee](https://forum.ionicframework.com/u/TheStenkildee)\
**Post date:** [February 17, 2014, 3:36pm UTC](https://forum.ionicframework.com/t/use-ionic-with-jquery/1120/5 "2014-02-17T15:36:40Z")

</div>

How should I implement it into, my project?

---

<div class="post-metadata">

**Author:** ![jonathan\_hindi](https://avatars.discourse-cdn.com/v4/letter/j/a87d85/32.png) [@jonathan\_hindi](https://forum.ionicframework.com/u/jonathan_hindi)\
**Post date:** [February 17, 2014, 4:33pm UTC](https://forum.ionicframework.com/t/use-ionic-with-jquery/1120/6 "2014-02-17T16:33:53Z")

</div>

You just place the jQuery file before AngularJs and you will have full access to jQuery as `jQuery()` or as using selectors `angular.element()`

---

<div class="post-metadata">

**Author:** ![TheStenkildee](https://avatars.discourse-cdn.com/v4/letter/t/278dde/32.png) [@TheStenkildee](https://forum.ionicframework.com/u/TheStenkildee)\
**Post date:** [February 20, 2014, 4:59pm UTC](https://forum.ionicframework.com/t/use-ionic-with-jquery/1120/7 "2014-02-20T16:59:54Z")

</div>

Sorry for a late respond, i’ve been busy.

Hmm, I tried to implement jQuery. Seems to be added fine, whenever I try to run commands. It simply won’t work 😕

I have a simple .addClass, which ain’t working ☹

---

<div class="post-metadata">

**Author:** ![jonathan\_hindi](https://avatars.discourse-cdn.com/v4/letter/j/a87d85/32.png) [@jonathan\_hindi](https://forum.ionicframework.com/u/jonathan_hindi)\
**Post date:** [February 20, 2014, 5:20pm UTC](https://forum.ionicframework.com/t/use-ionic-with-jquery/1120/8 "2014-02-20T17:20:39Z")

</div>

Instead of using the shorthand “$” use “jQuery”, btw angularJS has a [jQLite](http://docs.angularjs.org/api/ng/function/angular.element) version integrated, once you added the full version of jQuery.js inside your html, you will be able to use it through `angular.element('.selector')` for your example it should be `angular.element('.selector').addClass('className')`.

---

<div class="post-metadata">

**Author:** ![praveen](https://avatars.discourse-cdn.com/v4/letter/p/3ec8ea/32.png) [@praveen](https://forum.ionicframework.com/u/praveen)\
**Post date:** [July 4, 2014, 9:44am UTC](https://forum.ionicframework.com/t/use-ionic-with-jquery/1120/9 "2014-07-04T09:44:40Z")

</div>

@mhartington I have a doubt regarding using jQuery along with angular. I have side menu which takes care of the UI routing using Angular and the remaining things like event binding/animating/dom manipulation I would like to go for jQuery.

```
<script src="lib/jquery-1.11.1.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/app.js"></script>
<script src="js/controller"></script>

```

1. After loading these scripts, shall I write my own jQuery code?
2. Do I need to solve `device` ready event or it done within Ionic?

Please share your suggestion.

Thanks

---

<div class="post-metadata">

**Author:** ![jorrie](https://avatars.discourse-cdn.com/v4/letter/j/b2d939/32.png) [@jorrie](https://forum.ionicframework.com/u/jorrie)\
**Post date:** [November 8, 2014, 1:31am UTC](https://forum.ionicframework.com/t/use-ionic-with-jquery/1120/10 "2014-11-08T01:31:13Z")

</div>

Also interested in this.

Would the performance decrease when including jquery also?  
I assume it does since it has to load and uses memory.

Basically I have this jQuery and jQuery ui animation that I would like to use inside the ionic app.

---

<div class="post-metadata">

**Author:** ![Eusebe](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/eusebe/32/8144_2.png) [@Eusebe](https://forum.ionicframework.com/u/Eusebe)\
**Post date:** [December 20, 2014, 7:25pm UTC](https://forum.ionicframework.com/t/use-ionic-with-jquery/1120/11 "2014-12-20T19:25:31Z")

</div>

I’d like to implement a two-fingers zoom in my ionic app, which would increase or decrease the font size of every text, based on the ‘rem’ size unit ; something like [this example][1]  
(How) can I do something like that in pure angular ?

```
$("html").css("font-size", "150%")

```

Thanks.  
[1]: [http://plnkr.co/edit/QA3oBlGXLJJpRpo2y0Bc?p=preview](http://plnkr.co/edit/QA3oBlGXLJJpRpo2y0Bc?p=preview)

---

<div class="post-metadata">

**Author:** ![kvteja](https://avatars.discourse-cdn.com/v4/letter/k/a87d85/32.png) [@kvteja](https://forum.ionicframework.com/u/kvteja)\
**Post date:** [December 14, 2015, 3:31am UTC](https://forum.ionicframework.com/t/use-ionic-with-jquery/1120/12 "2015-12-14T03:31:44Z")

</div>

> [@jonathan\_hindi](#):
>
> jQuery

I used JQuery insted of $ symbol for access full jquery features but not working any one help me?

---

<div class="post-metadata">

**Author:** ![jayeshjain\_minio](https://avatars.discourse-cdn.com/v4/letter/j/76d3ee/32.png) [@jayeshjain\_minio](https://forum.ionicframework.com/u/jayeshjain_minio)\
**Post date:** [December 25, 2015, 1:37pm UTC](https://forum.ionicframework.com/t/use-ionic-with-jquery/1120/13 "2015-12-25T13:37:24Z")

</div>

Great. The modularization of angular + simplicity of jquery is a great combo.  
Apparently I can suffice with jqlite , but will my app slowdown because I use angular + jquery?? and also when should I really include jquery then…

---

<div class="post-metadata">

**Author:** ![prashanth\_nayak](https://avatars.discourse-cdn.com/v4/letter/p/b38774/32.png) [@prashanth\_nayak](https://forum.ionicframework.com/u/prashanth_nayak)\
**Post date:** [March 31, 2017, 4:36am UTC](https://forum.ionicframework.com/t/use-ionic-with-jquery/1120/14 "2017-03-31T04:36:17Z")

</div>

Hi, i am new to ionic. I was trying “cursor focus on next input after the maxlength specified” i tried adding jQuery to my code still using element.next() not able to focus on next input

When i console the element.next() instead of [input] i am getting JQLite {}

Is it possible to use element.next() in ionic or any other option is there to focus cursor on next input?