JQuery in Action

Bear Bibeault, Yehuda Katz

Mentioned 8

Provides information on the jQuery library and its use in Web site development.

More on Amazon.com

Mentioned in questions and answers.

This may sound impossible but read on.

I need to learn jQuery a little bit to keep current and be able to convince an employer I can cope with it within less than 2 days.

Now, I should mention that I actually know javascript. This is a bit ambiguous kind of a statement but--whereas I am no Doug Crockford--I certainly I don't mean I can just about toggle an element's visibility using inline code. I would go so far as to say that I am VERY familiar with MooTools, have read its source code on and off for the last 3 years as well that of countless MooTools plugins.

Now, through helping out on SO the MooTools tag, I have inadvertently picked up a lot of jQuery code as well. And there's the API doc page, that's fair enough--as long as I want to work with DOM, AJAX, events etc, I can find my way. This is not what the post is about.

I am after very specific resources and guides / examples of well-organised and well written code for jQuery. For instance, things I am interested in (but not limited to):

  • peculiarities to do with the API, eg. .bind != ECMA bind
  • limitations, like element attributes (.attr?) + workarounds for properties and other pitfalls
  • selector performance (if Sizzle differs from Slick) and...
  • ...caching selectors - does it work, how etc as jQuery returns itself.
  • best practices on readability and writing easy to follow and understand spaghetti code
  • best practices on writing plugins - how to structure, are there any common/accepted/preferred nomenclatures and so forth, i.e. the jQuery equivalent of this mootools guide
  • is there any better way to handle inheritance in the classic OOP sense? I know of moo4q but let's assume I want to do this w/o the help of mootools for a moment. And yes, I know I can still use pure javascript for basic stuff.
  • are there any specific differences in API (aside from ++ changelog) I need to be aware of between different jQuery versions?
  • GC. do you do any, do you remove events, nodes etc?
  • bits to avoid. eg, I have seen ppl complain on twitter that element storage is slow.
  • advice on structuring a proper 'enterprise-level-or-near-enough' jQuery-based application_ (I know, I know - Dojo, ExtJS, or even MooTools but it's possible with jQuery, right? so many people swear by it and claim to have done it...)
  • whatever you think I need to read to get started

With that in mind, I would like just links to either tutorials or articles or even posts here on SO that can cover on the areas mentioned and advanced jQuery development.

Some select plugins that are written by respected / renowned authors will also be appreciated, particularly ones that differ in how they are organised and easy to extend. With so so many to choose from, the majority are probably little past the hello spaghetti world phase so I wouldn't want to use them as the examples upon which to base my own work. I am not after plugins that are upvoted by designers as they do a pretty effect, I want examples of pretty code.

That's about it. Any help appreciated - will start reading on Sunday and need to be able to write an extendible plugin like this modal / lightbox class for mootools that I wrote in 2-3 hours a few days ago. I'd like to convert it to jQuery as an exercise w/o making it less modular / extendible: http://jsfiddle.net/dimitar/6creP/

Thanks in advance, will try to answer everyone that replies as well

You're lucky. The same happened to me, and read the book "Jquery in Action, 2nd Edition" in 3 days. It's an excellent book. I think you can finish in 1 day all the jquery core section (more than half of the book), that is the most important pare.

Guess what. I got the job :) (I learnt more while i was already on the job, but it was enough to show I knew jquery hehe)

I'm .NET developer. Most of my career I worked on web based intranet applications (ASP.NET WebForms) but always as a server side developer. Client side development was done by my colleagues more skilled in JavaScript and different JS frameworks. At the moment I have some JavaScript skills and very elementary understanding of both ASP.NET AJAX (I mean client side library) and jQuery. It mostly means that I can read JS code and I can write very simple functions. I would like to be better in this area and I'm planning to learn some of these technologies. Should I learn both ASP.NET AJAX and jQuery or skip ASP.NET AJAX and go directly to jQuery? By learning I mean really deep understanding of concepts and whole framework.

At the moment I'm reading Introducing Microsoft ASP.NET AJAX but I'm not very happy with it. It doesn't have coverage I would expect. I have already bought ASP.NET AJAX in Action and jQuery in Action. Do you recommend me any other sources?

Edit: So nobody defends ASP.NET AJAX? It looks like this API exists only to fill some MS certification exams.

jQuery is more than enough. Couple this with ASP.NET MVC and you will never ever need to look at Microsoft ASP.NET AJAX (or whatever its name is currently). Even if you work with standard ASP.NET WebForms, jQuery will be sufficient.

Also note that Microsoft have fully embraced jQuery (it is included with ASP.NET MVC) and they are actively supporting its development. I won't be surprised if MS AJAX becomes obsolete soon (for me personally it's been deprecated for years :-)).

So I would recommend you use the time you would have wasted in learning MS AJAX in improving your jQuery skills.

I’m new to jQuery, so I want to know how I can get started with it, or where to start from.

I have good knowledge of HTML, CSS, DHTML and JavaScript.

I would suggest the jquery tutorials here:

http://docs.jquery.com/Tutorials

or if you have some spare cash get this book....it's great for basics:

http://www.amazon.com/Learning-jQuery-Interaction-Development-JavaScript/dp/1847192505

I used JQuery In Action. It was great book. Also, there are tons of blogs and forums with useful JQuery information. Once you get the basics then you can more or less just jump into a project and Google issues as they come up, as there are tons of solutions out there to borrow and learn from.

this code in book jQuery in action page 99

Why he wrote this line

var current = this;

    <!DOCTYPE html>
<html id="greatgreatgrandpa">
    <head>
        <title>DOM Level 0 Bubbling Example</title>
        <link rel="stylesheet" type="text/css" href="../styles/core.css"/>
        <script type="text/javascript" src="../scripts/jquery-1.4.js"></script>
        <script type="text/javascript" src="../scripts/jqia2.support.js"></script>
        <script type="text/javascript">
            $( function() {
                $('*').each( function() {
                    var current = this;
                    this.onclick = function(event) {
                        if (!event)
                            event = window.event;
                        var target = (event.target) ?
                        event.target : event.srcElement;
                        say('For ' + current.tagName + '#'+ current.id +
                        ' target is ' +
                        target.tagName + '#' + target.id);
                    };
                });
            });
        </script>
    </head>
    <body id="greatgrandpa">
        <div id="grandpa">
            <div id="pops">
                <img id="example" src="example.jpg" alt="ooooh! ahhhh!"/>
            </div>
        </div>
    </body>
</html>

He did that so that the this value could be preserved and used inside a nested lexical scope. Each function call to any function involves (internally) setting this to refer to some object, based on the details of the invocation. Thus, inside a nested function (a function declared inside another function, as in this case), should there be a need to refer to the "outer" value of this, well, there's a problem: this, in that nested context, will have been set to refer to something else (not necessarily, but possibly). By "capturing" this in the outer context, that inner code will be able to refer to it freely.

That's a pretty good book by the way; I used to work with one of the authors (Bear) :-)

This code in the book jQuery in action, on page 156.

I don't understand this part:

{opacity:'toggle'}

Can toggle be an opacity value?

$.fn.fadeToggle = function(speed){
return this.animate({opacity:'toggle'},speed);
};

From the documentation:

In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element.

Using toggle will animate the opacity of the element at the speed you specify -- hiding it if it's visible, showing it if it's hidden.

this code in book jQuery in action page 131

i don't understand

.trigger('adjustName');

what is adjustName

and Simple explanation for trigger()

thanks :)

$('#addFilterButton').click( function() {
    var filterItem = $('<div>')
    .addClass('filterItem')
    .appendTo('#filterPane')
    .data('suffix','.' + (filterCount++));
    $('div.template.filterChooser')
    .children().clone().appendTo(filterItem)
    .trigger('adjustName');
});

It is a string, the name of a custom event you defined.

E.g. it would trigger the event handler bound by:

el.bind('adjustName', function(){...});

For more information I suggest to have a look at the documentation:

Any event handlers attached with .bind() or one of its shortcut methods are triggered when the corresponding event occurs. They can be fired manually, however, with the .trigger() method. A call to .trigger() executes the handlers in the same order they would be if the event were triggered naturally by the user.


Without knowing the context of the code, I would say that calling .trigger() here has no effect, as it is called on the cloneed elements and the event handlers are only cloned if true is passed to clone.

I want to learn jQuery. I tried various books, but they only tell you about the basic functions and how to use them.

I want something like where a full fledged project of grid or table sorting, etc. is build in jQuery and then the writer tells how he build the complete application using jQuery rather than small simple selectors.

For example, I tried reading the code of the plugin FancyBox, and I learned many new concepts of how things are used in a practical way.

But there were many things which I could not understand why they used it.

There are a ton of online resources, sure, but i found jQuery in Action (2nd Edition) to be a ridiculously good resource.

  • All of the API is included
  • Most of the API has code samples to go with it
  • The book is logically grouped by topic
  • With the table of contents/index you can find just about anything quickly
  • Having a printed book there next to your computer when you're programming can really help

The book is such that you can do a front-cover-to-back-cover reading sort of thing -OR- you can use it more as a reference. It works well for both.

(To be clear I don't have any association with the author or publisher)

I am looking for some good demo, examples or tutorial to make E-learning course in HTML5 using character animation.

Appreciate all the help. Thanks

I suggest

  1. Ron Hawkes's Foundation HTML5 Canvas: For Games and Entertainment
  2. JQuery in Action at jQuery in Action, Second Edition

I also suggest Impact and Easel. They are good for games and I find them useful for simple animations in e-learning courses.