# Why am I reluctant to learn/use jquery?

**URL:** <https://boards.straightdope.com/t/why-am-i-reluctant-to-learn-use-jquery/559834>\
**Category:** In My Humble Opinion\
**Created:** [November 7, 2010, 11:39pm UTC](https://boards.straightdope.com/t/why-am-i-reluctant-to-learn-use-jquery/559834 "2010-11-07T23:39:27Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lobsang](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/lobsang/32/4067_2.png) [@Lobsang](https://boards.straightdope.com/u/Lobsang)\
**Post date:** [November 7, 2010, 11:39pm UTC](https://boards.straightdope.com/t/why-am-i-reluctant-to-learn-use-jquery/559834/1 "2010-11-07T23:39:27Z")

</div>

One for the web programming dopers.  
For reasons I can’t quite fathom I shun jquery in favour of pure javascript. I _think_ it’s because I don’t want to have to download a library to include in whatever I happen to be doing. I like to be able to write a pure javascript/php/mysql page.

I understand that by not using jquery and using javascript for things like ajax I am re-inventing the wheel. And at the learning stage it makes sense (learn how something works before you use something that does it for you).

Is it worthwhile to begin learning and using jquery if I want to progress as a website developer?

---

<div class="post-metadata">

**Author:** ![friedo](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@friedo](https://boards.straightdope.com/u/friedo)\
**Post date:** [November 8, 2010, 12:16am UTC](https://boards.straightdope.com/t/why-am-i-reluctant-to-learn-use-jquery/559834/2 "2010-11-08T00:16:11Z")

</div>

You’re not just reinventing the wheel, and AJAX is a relatively small part of what jQuery has to offer. JQuery provides a _huge_ number of conveniences that reduce pure JS bulk by about 90%.

Of particular import is the ability to select and manipulate DOM nodes using [CSS selectors](http://api.jquery.com/category/selectors/). Say you want to change a style on every \<td\> element with the class “foobar.”

```auto

$( 'td.foobar' ).css( 'font-face', 'bold' );

```

That’s _it_. Do you see how ridiculously powerful that is? No tediously looping over crappy DOM API methods to find the elements and tweak them. Just select a bunch of crap and do stuff to it.

Event handling is another thing that makes jQuery superior. Suppose you want to have an event handler that triggers whenever someone [click](http://api.jquery.com/click/)s one of the above-mentioned table cells:

```auto

$( 'td.foobar' ).click( function() { alert( "You clicked a cell with this data: " + $(this).html() ) } );

```

You can easily associate arbitrary state data with any element(s) using the [data API](http://api.jquery.com/data/).

```auto

$( '#narf' ).data( 'takeovertheworld', 1 );

```

Say you want to loop over a number of row elements and hide them if the row number is above 12 and there’s a hide bit stored on them:

```auto

$( 'tr.foobar-row' ).each( function( i ) {
    var that = $(this); 
    if ( i > 12 && that.data( 'hidethis' ) === 1 ) { 
        that.hide();
    }
} );

```

And of course, the jQuery AJAX libraries abstract out all the tedium of making sure XMLHttpRequest stuff is handled correctly in every browser. It’s in use on tens of thousands of sites and is far better testes and bugfixed than anything you could come up with.

The coolest feature, though, is the [live](http://api.jquery.com/live/) API, which allows you to bind an event handler to any group of elements matching a selector, and will then _automatically_ bind that same handler to any newly-created elements that also match the selector.

---

<div class="post-metadata">

**Author:** ![friedo](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@friedo](https://boards.straightdope.com/u/friedo)\
**Post date:** [November 8, 2010, 12:18am UTC](https://boards.straightdope.com/t/why-am-i-reluctant-to-learn-use-jquery/559834/3 "2010-11-08T00:18:41Z")

</div>

Another example: creating new DOM elements. The DOM createElement API blows goats. Wouldn’t you rather be able to say something like

```auto

$( '#biglist' ).append( $( '<li>' ).html( 'a list item!' ) );

```

---

<div class="post-metadata">

**Author:** ![Athena](https://avatars.discourse-cdn.com/v4/letter/a/35a633/32.png) [@Athena](https://boards.straightdope.com/u/Athena)\
**Post date:** [November 8, 2010, 1:01am UTC](https://boards.straightdope.com/t/why-am-i-reluctant-to-learn-use-jquery/559834/4 "2010-11-08T01:01:33Z")

</div>

I thing jQuery has a high upfront learning issue, because the syntax is just butt stupid. Yeah, I get it that $( and such is easy to type, but it’s hell to try to read until you get a fairly high level of expertise. The stupid stuff looks like hieroglyphics.

That said, I agree with **friedo** - once you _do_ take the time to learn it, it’s great. WAY nicer than vanilla Javascript. I just wish it had been written by someone who had code readability in mind.

---

<div class="post-metadata">

**Author:** ![friedo](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@friedo](https://boards.straightdope.com/u/friedo)\
**Post date:** [November 8, 2010, 2:19am UTC](https://boards.straightdope.com/t/why-am-i-reluctant-to-learn-use-jquery/559834/5 "2010-11-08T02:19:12Z")

</div>

I think it’s fairly readable. Really, the only weird thing is an object named $. And it has methods that return itself, which is unusual in Javascript but hardly a new idea.

Part of the difficulty of learning jQuery is you need to already be familiar with a lot of advanced Javascript features, like how Prototype-based OO work and how JS implements function objects, anonymous functions and closures. Once you get that, picking up jQuery is pretty easy.

ETA: Also, obviously it helps if you already know the basics of how CSS selectors work. $( ‘#narf ul li a.foo’ ) makes a lot more sense if you know that refers to a \<a\> tag with class foo inside a \<li\> inside a \<ul\> inside some element with id ‘narf’.

---

<div class="post-metadata">

**Author:** ![Lobsang](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/lobsang/32/4067_2.png) [@Lobsang](https://boards.straightdope.com/u/Lobsang)\
**Post date:** [November 8, 2010, 4:57pm UTC](https://boards.straightdope.com/t/why-am-i-reluctant-to-learn-use-jquery/559834/6 "2010-11-08T16:57:11Z")

</div>

I’ll begin learning it and see how I get on. Thanks for the replies guys 🙂

---

<div class="post-metadata">

**Author:** ![Athena](https://avatars.discourse-cdn.com/v4/letter/a/35a633/32.png) [@Athena](https://boards.straightdope.com/u/Athena)\
**Post date:** [November 8, 2010, 9:21pm UTC](https://boards.straightdope.com/t/why-am-i-reluctant-to-learn-use-jquery/559834/7 "2010-11-08T21:21:12Z")

</div>

> [@friedo](#):
>
> $( ‘#narf ul li a.foo’ ) makes a lot more sense if you know that refers to a \<a\> tag with class foo inside a \<li\> inside a \<ul\> inside some element with id ‘narf’.

I think this sentence pretty much demonstrates my complaint about jQuery. 😃

---

<div class="post-metadata">

**Author:** ![friedo](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@friedo](https://boards.straightdope.com/u/friedo)\
**Post date:** [November 8, 2010, 10:44pm UTC](https://boards.straightdope.com/t/why-am-i-reluctant-to-learn-use-jquery/559834/8 "2010-11-08T22:44:57Z")

</div>

Well that’s really a complaint about CSS, then. CSS selectors do take a bit of getting used to.

---

<div class="post-metadata">

**Author:** ![Athena](https://avatars.discourse-cdn.com/v4/letter/a/35a633/32.png) [@Athena](https://boards.straightdope.com/u/Athena)\
**Post date:** [November 9, 2010, 3:36am UTC](https://boards.straightdope.com/t/why-am-i-reluctant-to-learn-use-jquery/559834/9 "2010-11-09T03:36:23Z")

</div>

> [@friedo](#):
>
> Well that’s really a complaint about CSS, then. CSS selectors do take a bit of getting used to.

I think it’s both together. Don’t get me wrong - I do fine with them - but every time I look at a jQuery function I’m like “WTF? Can it get any more cryptic?!?”