22 March 2015

JQuery Quick Reference

JQuery Quick Reference

1.    JQuery
            jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming.
jQuery uses CSS syntax to select elements.

  2. Uses
The jQuery library contains the following features:

            HTML/DOM manipulation
            CSS manipulation
            HTML event methods
            Effects and animations
            AJAX
            Utilities
Notes:
If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network).
$(document).ready(function(){
   // jQuery methods go here...
});
or
$(function(){
   // jQuery methods go here...
});
This is to prevent any jQuery code from running before the document is finished loading (is ready).

3. JQuery Selector
$("*")     Selects all elements    
$(this)     Selects the current HTML element    
$("p.intro")     Selects all elements with class="intro"    
$("p:first")     Selects the first element     Try it
$("ul li:first")     Selects the first
  • element of the first
          
  • $("ul li:first-child")     Selects the first
  • element of every
          
  • $("[href]")     Selects all elements with an href attribute     Try it
    $("a[target='_blank']")     Selects all elements with a target attribute value equal to "_blank"    
    $(":button")     Selects all
    $("tr:even")     Selects all even elements    
    $("tr:odd")     Selects all odd elements

    4.

    click()
    $("p").click(function(){  // When a click event fires on a element
                $(this).hide();   //   hide the current element
    });
    dblclick()
    $("p").dblclick(function(){
                $(this).hide();
    });
    mouseenter()
     $("#p1").mouseenter(function(){
                alert("You entered p1!");
    });

    hover()
    $("#p1").hover(function(){
                alert("You entered p1!");
    },

    focus()
    $("input").focus(function(){
                $(this).css("background-color", "#cccccc");
    });
    blur()
    $("input").blur(function(){
                $(this).css("background-color", "#ffffff");
    });
    jQuery toggle()
    Shown elements are hidden and hidden elements are shown:
    $("button").click(function(){
                $("p").toggle();
    });

    5. jQuery Callback Functions         
    JavaScript statements are executed line by line. However, with effects, the next line of code can be run even though the effect is not finished. This can create errors.
    A callback function is executed after the current effect is finished.

    $("button").click(function(){
                $("p").hide("slow", function(){
                alert("The paragraph is now hidden");
                });
    });
    function do_a( callback ){
      setTimeout( function(){
                // simulate a time consuming function
                console.log( '`do_a`: this takes longer than `do_b`' );

                // if callback exist execute it
                callback && callback();
      }, 3000 );
    }

    function do_b(){
      console.log( '`do_b`: now we can make sure `do_b` comes out after `do_a`' );
    }

    do_a( function(){
      do_b();
    });

    Example :
    `do_a`: this takes longer than `do_b`
    `do_b`: now we can make sure `do_b` comes out after `do_a`

    6. jQuery - Chaining

    Chaining allows us to run multiple jQuery methods (on the same element) within a single statement.
    $("#p1").css("color", "red")
      .slideUp(2000)
      .slideDown(2000);

    7. Get Attributes - attr()
                $("button").click(function(){
                alert($("#w3s").attr("href"));
                });
    8.jQuery - Set Content and Attributes
                text() - Sets or returns the text content of selected elements
                html() - Sets or returns the content of selected elements (including HTML markup)
                val() - Sets or returns the value of form fields

    $("#btn1").click(function(){
                $("#test1").text("Hello world!");
    });
    $("#btn2").click(function(){
                $("#test2").html("Hello world!");
    });
    $("#btn3").click(function(){
                $("#test3").val("Dolly Duck");
    });

    9.Set Attributes - attr()
    The jQuery attr() method is also used to set/change attribute values.

     $("button").click(function(){
                $("#w3s").attr("href", "http://www.w3schools.com/jquery");
    });

    10.jQuery - Add Elements
        With jQuery, it is easy to add new elements/content.
       
                append() - Inserts content at the end of the selected elements
                prepend() - Inserts content at the beginning of the selected elements
                after() - Inserts content after the selected elements
                before() - Inserts content before the selected elements

    11.jQuery - Remove Elements

        With jQuery, it is easy to remove existing HTML elements.

                remove() - Removes the selected element (and its child elements)
                empty() - Removes the child elements from the selected element


    jQuery remove() Method
    The jQuery remove() method removes the selected element(s) and its child elements.
    $("#div1").remove();

    jQuery empty() Method
    The jQuery empty() method removes the child elements of the selected element(s).
    $("#div1").empty();

    Filter the Elements to be Removed
    $("p").remove(".italic");

    jQuery - Get and Set CSS Classes

    With jQuery, it is easy to manipulate the CSS of elements.


                addClass() - Adds one or more classes to the selected elements
                removeClass() - Removes one or more classes from the selected elements
                toggleClass() - Toggles between adding/removing classes from the selected elements
                css() - Sets or returns the style attribute

    jQuery addClass() Method
    $("button").click(function(){
                $("h1, h2, p").addClass("blue");
                $("div").addClass("important");
    });

    jQuery removeClass() Method

    $("button").click(function(){
                $("h1, h2, p").removeClass("blue");
    });

    jQuery toggleClass() Method

    $("button").click(function(){
                $("h1, h2, p").toggleClass("blue");
    });

    jQuery css() Method

    Return a CSS Property
    The following example will return the background-color value of the FIRST matched element:
    $("p").css("background-color");

    Set a CSS Property
    $("p").css("background-color", "yellow");

    Set Multiple CSS Properties
    The following example will set a background-color and a font-size for ALL matched elements:
    $("p").css({"background-color": "yellow", "font-size": "200%"});

    jQuery - Dimensions

    jQuery has several important methods for working with dimensions:

                width()
                height()
                innerWidth()
                innerHeight()
                outerWidth()
                outerHeight()


    jQuery Traversing - Ancestors
    An ancestor is a parent, grandparent, great-grandparent, and so on.
    With jQuery you can traverse up the DOM tree to find ancestors of an element.

    jQuery parent() Method
    The parent() method returns the direct parent element of the selected element.
    This method only traverse a single level up the DOM tree.

    jQuery parents() Method
    The parents() method returns all ancestor elements of the selected element, all the way up to the document's root element ().
    $(document).ready(function(){
                $("span").parents();
    });
    The following example returns all ancestors of all elements that are
      elements:
    $(document).ready(function(){
                $("span").parents("ul");
    });

    jQuery parentsUntil() Method
    The parentsUntil() method returns all ancestor elements between two given arguments.
    $(document).ready(function(){
                $("span").parentsUntil("div");
    });

    jQuery Traversing - Descendants

    A descendant is a child, grandchild, great-grandchild, and so on.
    With jQuery you can traverse down the DOM tree to find descendants of an element.

    jQuery children() Method

    The children() method returns all direct children of the selected element.
    $(document).ready(function(){
                $("div").children();
    });

    jQuery find() Method
    The find() method returns descendant elements of the selected element, all the way down to the last descendant.
    $(document).ready(function(){
                $("div").find("span");
    });


    The following example returns all descendants of
    :
    $(document).ready(function(){
                $("div").find("*");
    });


    jQuery siblings() Method
    The following example returns all sibling elements of

    :

    $(document).ready(function(){
                $("h2").siblings();
    });
    jQuery next() Method

    The next() method returns the next sibling element of the selected element
    $(document).ready(function(){
                $("h2").next();
    });

    jQuery nextAll() Method
    The nextAll() method returns all next sibling elements of the selected element.
    $(document).ready(function(){
                $("h2").nextAll();
    });
    jQuery nextUntil() Method
    The nextUntil() method returns all next sibling elements between two given arguments.

    $(document).ready(function(){
                $("h2").nextUntil("h6");
    });
    jQuery first() Method
    The first() method returns the first element of the selected elements.
    $(document).ready(function(){
                $("div p").first();
    });

    jQuery last() Method
    The last() method returns the last element of the selected elements.
    $(document).ready(function(){
                $("div p").last();
    });
    jQuery eq() method
    The eq() method returns an element with a specific index number of the selected elements.
    $(document).ready(function(){
                $("p").eq(1);
    });

    jQuery filter() Method
    The following example returns all elements with class name "intro":
    $(document).ready(function(){
                $("p").filter(".intro");
    });

    jQuery not() Method
    The following example returns all elements that do not have class name "intro":
    $(document).ready(function(){
                $("p").not(".intro");
    });

    jQuery - The noConflict() Method
    If two different frameworks are using the same shortcut, one of them might stop working.
    The jQuery team have already thought about this, and implemented the noConflict() method.
    The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it.

    $.noConflict();
    jQuery(document).ready(function(){
                jQuery("button").click(function(){
                jQuery("p").text("jQuery is still working!");
                });
    });

    JQuery
    //MVC JQuery Ajax
    $('#learnitem-form').ajaxSubmit({
      data : {
                data1: data1,
                data2: data2,

                },
      success : function(result){
      //success
                },
      error : function(){
      //error
      }
    });

    Posting Javascript Object


    type     This is type of HTTP Request and accepts a valid HTTP verb. POST is the option illustrated in this article.
    url     This is the location of the resource that the request will be made to.
    data     This is the actual data to be sent as part of the request.
    contentType     This is the content type of the request you are making. The default is 'application/x-www-form-urlencoded'.
    dataType     This is the type of data you expect to receive back. Accepted values are text, xml, json, script, html jsonp. If you do not provide a value, jQuery will examine the MIME type of the response and base its decision on that.






    No comments:

    Post a Comment

    Comments Welcome