• Save
JQuery Presentation
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

JQuery Presentation

  • 1,899 views
Uploaded on

JQuery Basics

JQuery Basics

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,899
On Slideshare
1,896
From Embeds
3
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 3

http://www.linkedin.com 3

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Presented By: Sony Jain
  • 2. What is jQuery
    Javascript Library
    Fast and Concise
    Simplifies the interaction between HTML and JavaScript
  • 3. Why jQuery ?
    Cross Browser
    (IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome)
    Light Weight
    Supports AJAX
    Animation
    Rich UI
  • 4. Embed in your page
    <html>
    <head>
    <script src=“path/to/jquery-x.x.x.js">
    </script>
    <script>
    $(document).ready(function(){
    // Start here
    });
    </script>
    </head>
    <body> … </body>
    </html>
  • 5. jQuery philosophy
    Find Some Elements
    $(“div”).addClass(“xyz”);
    }
    Do something with them
    jQuery Object
  • 6. A Basic Example
    $(“p”).addClass(“red”);
    Selects all paragraphs. Adds a class to them.
    This avoids-
    <body>
    <div>
    <p class=“red”>I m a paragraph -1</p>
    <p class=“red”>I m a paragraph -2</p>
    </div>
    <p class=“red”>I m another paragraph</p>
    </body>
  • 7. Selector Basics
    Selecting By Id
    $(“#header”)
    Selecting By Class
    $(“.updated”)
    Selecting by tag name
    $(“table”)
    Combine them
    $(“table.user-list”)
    $(“#footer ul.menuli”)
  • 8. Basic Selector Example
    $(“ul.menuli”)
    <body>
    <div id=“header”>
    <span id=“logo”>Logo here…</span>
    <ul class=“menu”>
    <li>user name</li>
    …..
    <li>logout</li>
    </ul>
    </div>
    ……
    </body>
  • 9. Jquery Events
    click(), bind(), unbind(), change(), keyup(), keydown,
    …..and many more
    Start when DOM is ready
    $(document).ready(function(){
    $(selector).eventName(function(){…});
    });
  • 10. Event Example
    $(document).ready(function(){
    $(“#message”).click(function(){
    $(this).hide();
    })
    });
    <span id=“message” onclick=“…”> blah blah </span>
  • 11. Iterating thro’ Elements
    .each()
    To iterate, exclusively, over a jQuery object
    $.each()
    To iterate over any collection, whether it is a map (JavaScript object) or an array.
  • 12. .each() Example
    <script type="text/javascript">
    $(document).ready(function () {
    $("span").click(function () {
    $("li").each(function () {
    $(this).toggleClass("example");
    });
    });
    });
    </script>
  • 13. $.each() Example
    vararr = ["one", "two", "three", "four", "five"];
    varobj = { one: 1, two: 2, three: 3, four: 4, five: 5 };
    $(document).ready(function () {
    jQuery.each(arr, function () {
    $("#" + this).text("Mine is " + this + ".");
    return (this != "three"); // will stop running after "three"
    });
    jQuery.each(obj, function (i, val) {
    $("#" + i).append(document.createTextNode(" - " +
    val));
    });
    });
  • 14. $.extend()
    Merge the contents of two or more objects together into the first object.
    Syntax
    $.extend( [ deep ], target, object1, [ objectN ] )
    deep - If true, the merge becomes recursive.
    target - The object to extend. It will receive the new properties.
    object1 - An object containing additional properties to
    merge in.
    objectN - Additional objects containing properties to
    merge in.
  • 15. $.extend() - Example
    Merge two objects, modifying the first
    var settings = { validate: false, limit: 5, name: "foo" };
    var options = { validate: true, name: "bar" };
    jQuery.extend(settings, options);
    Result:
    settings == { validate: true, limit: 5, name: "bar" }
  • 16. $.extend() - Example
    Merge two objects recursively, modifying the first.
    var settings = { validate: false,
    font: {family: Arial, size: 12px},
    name: “abc" };
    var options = { validate: true,
    font: {family: Verdana},
    name: “xyz" };
    jQuery.extend( true, settings, options);
    Result:
    settings == { validate: true,
    font: {family: Verdana, size: 12px},
    name: “xyz" }
  • 17. $.extend() - Example
    Merge defaults and options, without modifying the defaults. This is
    a common plugin development pattern.
    var empty = {}
    var defaults = { validate: false, limit: 5, name: "foo" };
    var options = { validate: true, name: "bar" };
    var settings = $.extend(empty, defaults, options);
    Result:
    settings == { validate: true, limit: 5, name: "bar" }
    empty == { validate: true, limit: 5, name: "bar" }
  • 18. $.fn.extend()
    Extends the jQuery element set to provide new methods
    (used to make a typical jQuery plugin).
    Syntax
    //You need an anonymous function to wrap around your function to avoid conflict
    (function($){
     
        //Attach this new method to jQuery
        $.fn.extend({
             
            //This is where you write your plugin's name
            pluginname: function() {
     
                //Iterate over the current set of matched elements
                return this.each(function() {
                 
                    //code to be inserted here
                 
                });
            }
        });
  • 19. $.fn.extend() - Example
    Reverse Text of Odd rows
    <script type="text/javascript">
    $(document).ready(function () {
    $('ulli:odd').reverseText({ minlength: 6, maxlength: 10 });
    });
    </script>
    <body>
    <form id="form1" runat="server">
    <div>
    <ul id="menu">
    <li>Home</li>
    <li>Posts</li>
    <li>About</li>
    <li>Contact Us</li>
    </ul>
    </div>
    </form>
    </body>
    Desired Result
  • 20. $.fn.extend() - Example
    (function($) {
    // jQuery plugin definition
    $.fn.reverseText = function(params) { //$.fn.extend({ reverseText: function(params) {…
    // merge default and user parameters
    params = $.extend( {minlength: 0, maxlength: 99999}, params);
    // traverse all nodes
    this.each(function() {
    // express a single node as a jQuery object
    var $t = $(this);
    // find text
    varorigText = $t.text(), newText = '';
    // text length within defined limits?
    if (origText.length >= params.minlength && origText.length <= params.maxlength) {
    // reverse text
    for (vari = origText.length-1; i >= 0; i--) newText += origText.substr(i, 1);
    $t.text(newText);
    }
    });
    // allow jQuery chaining
    return this;
    };
    });
  • 21. Jquery and AJAX
    jQuery.ajax() or $.ajax()
    Performs an asynchronous HTTP (Ajax)
    request.
  • 22. jQuery.ajax()
    The $.ajax() function underlies all Ajax requests
    sent by jQuery
    At its simplest, the $.ajax() function can be called
    with no arguments:
    Note: Default settings can be set globally by using the
    $.ajaxSetup() function
    Several higher-level alternatives like $.get() and .load()
    are available and are easier to use. If less common
    options are required, though, $.ajax() can be used more flexibly.
    $.ajax();
  • 23. jQuery.ajax()
    Syntax
    $.ajax({
    type: type,
    url: url,
    data: data,
    success: success,
    dataType: dataType
    });
    Type that describes whether the request if GET or POST
    URL of the HTTPHandler
    Data specifying the querystring
    Success defining a function which manipulates the response from the handler
    DataTypeDifferent data handling can be achieved by using the dataType
    option. The dataType can be plain xml, html, json, jsonp, script, or
    text.
  • 24. jQuery.ajax() : Example
    Save some data to the server and notify the user once it's complete.
    $.ajax({   type: "POST",   url: "some.aspx",   data: "name=John&location=Boston",   success: function(msg){     alert( "Data Saved: " + msg );    }});
  • 25. Thank You