# Proper use of JQuery with ember cli **URL:** \ **Category:** Ember CLI\ **Created:** [November 13, 2014, 5:03pm UTC](https://discuss.emberjs.com/t/proper-use-of-jquery-with-ember-cli/6696 "2014-11-13T17:03:21Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![kceiw](https://avatars.discourse-cdn.com/v4/letter/k/a9adbd/32.png) [@kceiw](https://discuss.emberjs.com/u/kceiw)\ **Post date:** [November 13, 2014, 5:03pm UTC](https://discuss.emberjs.com/t/proper-use-of-jquery-with-ember-cli/6696/1 "2014-11-13T17:03:21Z")
Hi, I’m using ember cli to create my own app. And I need to use JQuery. When I use $(‘.className"), JSLint complaint that $ is not defined. There’re no problem when I run it though. But when I use this.$(’.className"). JSLint doesn’t complaint, but it doesn’t work at run time. My question is how do I use JQuery properly so that JSLint doesn’t complaint and it works at run time too. Note that I only import ember in that class. ---
**Author:** ![Panman8201](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/panman8201/32/17727_2.png) [@Panman8201](https://discuss.emberjs.com/u/Panman8201)\ **Post date:** [November 13, 2014, 5:06pm UTC](https://discuss.emberjs.com/t/proper-use-of-jquery-with-ember-cli/6696/2 "2014-11-13T17:06:23Z")
You can either add `"$": true` to your `.jshintrc` file (within the `"predef"` section) or use [`Ember.$`](http://emberjs.com/api/#method__) instead. ---
**Author:** ![kylecoberly](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kylecoberly/32/15828_2.png) [@kylecoberly](https://discuss.emberjs.com/u/kylecoberly)\ **Post date:** [November 13, 2014, 6:10pm UTC](https://discuss.emberjs.com/t/proper-use-of-jquery-with-ember-cli/6696/3 "2014-11-13T18:10:25Z")
Ember.$ uses Ember’s instance of the jQuery object, and you should pretty much always use that for performance reasons. The exception would be for views, where this.$ gives you the jQuery instance scoped to the current view. Another thing worth keeping in mind is almost everything jQuery does is “DOM aware”, which means if you’re reaching for it in a controller or route you might not be separating your concerns enough. ---
**Author:** ![kceiw](https://avatars.discourse-cdn.com/v4/letter/k/a9adbd/32.png) [@kceiw](https://discuss.emberjs.com/u/kceiw)\ **Post date:** [November 14, 2014, 7:25am UTC](https://discuss.emberjs.com/t/proper-use-of-jquery-with-ember-cli/6696/4 "2014-11-14T07:25:01Z")
Thanks @Panman8201 and @kylecoberly. I’m using Ember.$ now. I’m using it inside a view. I think I can create a view for the element I want to manipulate with JQuery and change the view instead of DOM directly, but it is overkill for a super simple html code (like 10 lines). @kylecoberly Can you explain why it performs better if I use Ember.$? What are the differences between the Ember instance and the current view scoped jQuery instance? ---
**Author:** ![kylecoberly](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kylecoberly/32/15828_2.png) [@kylecoberly](https://discuss.emberjs.com/u/kylecoberly)\ **Post date:** [November 14, 2014, 8:36pm UTC](https://discuss.emberjs.com/t/proper-use-of-jquery-with-ember-cli/6696/5 "2014-11-14T20:36:36Z")
I may have misspoke on the performance gain between Ember.$ and $- I thought the former used the same instance throughout and the latter used a new instance every time you made a call, but I was thinking of the issue with not caching selectors. Unless someone knows better than me, I think they’re identical but Ember.$ won’t need to be imported as a separate module or excused on .jshintrc as @Panman8201 suggested. As far as Ember.$ vs. this.$, the biggest advantage is that you can query the view’s element with this.$(). You can also do crazy (performant) selectors that you wouldn’t normally do, like this.$(“div”) because you’re dealing with such a narrow subset of the DOM. You can still use Ember.$ if, for some reason, you need to act on an element outside of the view, but 9/10 this.$() is what you’re looking for. ---
**Author:** ![kceiw](https://avatars.discourse-cdn.com/v4/letter/k/a9adbd/32.png) [@kceiw](https://discuss.emberjs.com/u/kceiw)\ **Post date:** [November 16, 2014, 4:57am UTC](https://discuss.emberjs.com/t/proper-use-of-jquery-with-ember-cli/6696/6 "2014-11-16T04:57:00Z")
Thanks @kylecoberly for your explanation. I know why this.$() doesn’t work in my case. I’m querying an element outside of the view. ---
**Author:** ![sheriffderek](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/sheriffderek/32/10619_2.png) [@sheriffderek](https://discuss.emberjs.com/u/sheriffderek)\ **Post date:** [October 23, 2015, 7:24pm UTC](https://discuss.emberjs.com/t/proper-use-of-jquery-with-ember-cli/6696/7 "2015-10-23T19:24:44Z")
You can `var $ = Ember.$;` to keep things simple. ---
**Author:** ![Wayne\_Douglas](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/wayne_douglas/32/9568_2.png) [@Wayne\_Douglas](https://discuss.emberjs.com/u/Wayne_Douglas)\ **Post date:** [November 2, 2015, 2:00pm UTC](https://discuss.emberjs.com/t/proper-use-of-jquery-with-ember-cli/6696/8 "2015-11-02T14:00:22Z")
I’m pretty sure there’s a reason why they’ve aliased the top level $ I’d discourage this - although it definitely would work…