jQuery

1. $.each() v.s.$(".cls").each()

2. document, window, $, jQuery()

3. $()$(document).ready(function())

4. $.fn.method,$.method

5. $( document ).ready(), window.onload()

6. $().call("param", callback), $().call("param", function(){ callback(param1, param2)}),

7. Avoiding conflicting with other libs

   var $j = jQuery.noConflict()
   // $j is now an alias to the jQuery function; creating the new alias is optional.
   
   $j(document).ready(function () {
     $j('div').hide()
   })
   
   // The $ variable now has the prototype meaning, which is a shortcut for
   // document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
   window.onload = function () {
     var mainDiv = $('main')
   }
   

8. Attributes

   • setter: .attr(key, value)

   • getter: .attr(key)

9. Selecting Elements

   • Selecting Elements by ID $( "#myId" ); // Note IDs must be unique per page.

   • Selecting Elements by Class Name $( ".myClass" );

   • Selecting Elements by Attribute $( "input[name='first_name']" );

   • Selecting Elements by Compound CSS Selector $( "#contents ul.people li" );

   • Selecting Elements with a Comma-separated List of Selectors $( "div.myClass, ul.people" );

The jQuery object and the native DOM element. jQuery element is like a wrapper on a native DOM element, so you can use a lot of convenience methods and properties provided by jQuery. This is a bit like design pattern facet.

var jQElem = $(domElem)
var element = $(this)