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)