Everything you wanted to know about jQuery

1. What is jQuery?

jQuery is a javascript toolkit created by John Resig with the motto of “Write less, do more”. jQuery became popular due to its developer friendly API which was easy to use and fun to work with largely based on object chaining. jQuery is an extensible system where extensions are called jQuery Plugins.

jQuery is a library written in JavaScript that provides cross browser DOM traversal, manipulation, data, ajax, event handling and effects for creating modern web applications.

2. Where can I learn jQuery?

http://codecademy.com
http://docs.jquery.com/Tutorials
http://jqueryair.com/
https://github.com/jquery/jquery
http://www.learningjquery.com/2010/07/great-ways-to-learn-jquery
http://net.tutsplus.com/articles/news/learn-jquery-in-30-days/

3. What is the significance of jQuery?

By Allen Cheung
In no small way jQuery accelerated the proliferation of the non-static web, or “web 2.0.” The milestone I use as a marker for the start of the Web 2.0 (AJAX-driven web app) has always been Gmail. It did things no other website even attempted at the time, when most sites were content being static pages of HTML + a tiny bit of CSS. Javascript was not considered a serious language and support was minimal. Nobody outside of a few engineers at Google and devoted JS evangelists understood how each browser ran code.

jQuery made it really easy for anyone to programmatically access and manipulate a page. Easy for engineers who otherwise wouldn’t touch a website; easy for designers who wouldn’t touch code. It massively added to the number of websites and developers who aspired to build something more than text + images, whether that meant animations, complex forms, or responsive apps rivaling that of contemporary desktop software.

Of course, there is downside to this progress. It’s very easy to write bad jQuery code. Additionally the library prefers ease of use at the expense of imposing stricter/better engineering practices. Still, I think it’s a net positive – there are plenty of other JS libraries if the fast-and-loose style of jQuery leaves a bad taste in your mouth.

4. What are all the advantages of jQuery?

By Simon Willison
jQuery’s API is astonishingly well designed. It’s extremely consistent once you learn its rules (e.g. methods often take one argument to read a value and two arguments to set one, e.g. .css(), .attr(), .width(), .height()) and its functionality is so complete that the last few major releases of the library have hardly added any new methods at all. jQuery’s performance improves noticeably with every release, with the API staying exactly the same.

Also Read : 30 jQuery Text Effect Plugins For Web Designers

jQuery plays extremely well with other code. It doesn’t extend any built-in JavaScript objects, and it only adds one symbol to the global namespace (the jQuery symbol) – it aliases $ as well, but you can undo that with jQuery.noConflict(). Even discounting browser differences, jQuery is an enormous improvement on the DOM. It makes DOM manipulation extremely easy, which means it’s much easier to implement things using progressive enhancement – taking existing DOM elements on the page and enhancing their behaviour.

5. What jQuery basics should all backend web developers know?

By Mariz Melo
Learn JavaScript first. Once you fully understand JS, jQuery will not be a problem. Also as a back-end web developer you probably want to check on the $.ajax() method and JSON/XML (if you don’t already know about them). Quick intro to jQuery anyway:

Select elements in jQuery is extremely easy. You will use the CSS syntax for that:

HTML:

<div id =”mydiv”><span>hello</span> world!</div>

CSS:

#mydiv { property: value; }

JavaScript:

document.getElementById("mydiv");

jQuery:

$("#mydiv");

Did you notice the difference between JavaScript and jQuery here? JavaScript gets an element using the id name only “mydiv” on the other hand jQuery uses the same syntax as CSS “#mydiv”. Keep that in mind.

To apply some CSS to this div:

JavaScript

document.getElementById("mydiv").style.background = "red";

jQuery

$("#mydiv").css({"background": "red"});

This is called the Fluent Interfaces or Method chaining

Now lets get the <span> element inside of this div:

$(“#mydiv span”).css({“color”: “white”});

Note that I am using the method $.css() here. jQuery documentation is great and with a quick google search you will find a method for almost anything you need.

Use your jQuery scripts inside a document.ready declaration:

$(document).ready(function() {

    // your code here

});

Short version:

$(function(){

    // your code here

});

Put your scripts on the bottom of your page when possible.

6. Are there any disadvantages of using Javascript framework like jQuery?

Also Read : 10 Useful JQuery Lightbox Plugins of 2015

By Robert Accettura
The biggest disadvantage is that you likely don’t use all of jQuery, just a few parts. Carrying the whole thing on a site is therefore a slight bandwidth waste and a slowdown. It is possible to build your own with just the pieces you want, but few actually do that.

By Shaun O’Connell
It’s not intended for mobile. The web is going mobile, but some mobile browsers (with their limited memory / CPU) can take up to 8 seconds just to parse jQuery. See:

http://sunpig.com/martin/archives/2011/06/22/jquery-mobile-doubts.html

By Erick Vanegas
One of the disadvantage of the new Framework era , is that programmers don’t learn the language but the framework,… and then they lack of deep knowledge for more complicated problems that can be resolved with naked javascript

7. Which is better, jQuery Mobile or Sencha Touch?
http://css.dzone.com/articles/sencha-touch-v-jquery-mobile

8. What are some bad jQuery practices to avoid?

By Rick Waldron
Speaking on behalf of the jQuery Bugs Team…

The first and the worst of all bad practices we encounter in bug reports is that users don’t read the documentation. jQuery’s API docs are very easy to follow and loaded with examples of code that just works.

The second worst offender is writing code that doesn’t use any form of caching, eg.

The second worst offender is writing code that doesn’t use any form of caching, eg.

// BAD

// Show "foo"
$("#foo").show();

// Later in the code...

// add class "thing" to "foo"

$("#foo").addClass("thing");

 // Also, somewhere else...

// Hide "foo"

$("#foo").hide();

// Good!

// Cache "foo"

var $foo = $("#foo");

// Show "foo"

$foo.show();

// Later in the code...

// add class "thing" to "foo"

$foo.addClass("thing");

// Also, somewhere else...

// Hide "foo"

$foo.hide();

The third is ignoring jQuery’s built-in implicit iterator behaviour

// BAD

// For each node matched by ".stuff", apply the class "other"

$(".stuff").each(function( i, elem ) {

  $(elem).addClass("other");

});

Also Read : 10 Useful jQuery eBooks for web developers and designers

// Way smarter.

// Match ".stuff" and apply the class "other"

$(".stuff").addClass("other");

By Mark Vilrokx
Not caching $(this) (or any other object you searched for and then use)

Every time you use $(‘.someClass’), jQuery tries to find that node. This means that if you use $(this) in a loop for example, it will go off and find the same object over and over again. You should cache the object:

var $this = $(this);

and then just use $this rather than $(this).