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
     <!-- Putting jQuery into no-conflict mode. -->
     <script src="prototype.js"></script>
     <script src="jquery.js"></script>
     <script>
    
     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" );
     }
    
     </script>
    
  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” ); link Selecting Elements by Attribute 1 $( “input[name=’first_name’]” ); link Selecting Elements by Compound CSS Selector 1 $( “#contents ul.people li” ); link Selecting Elements with a Comma-separated List of Selectors 1 $( “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 convinience methods and properties provided by jQuery. This is a bit like design pattern facet.

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