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

JQuery Presentation



JQuery Basics

JQuery Basics



Total Views
Views on SlideShare
Embed Views



1 Embed 3

http://www.linkedin.com 3



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

JQuery Presentation JQuery Presentation Presentation Transcript

  • Presented By: Sony Jain
  • What is jQuery
    Javascript Library
    Fast and Concise
    Simplifies the interaction between HTML and JavaScript
  • Why jQuery ?
    Cross Browser
    (IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome)
    Light Weight
    Supports AJAX
    Rich UI
  • Embed in your page
    <script src=“path/to/jquery-x.x.x.js">
    // Start here
    <body> … </body>
  • jQuery philosophy
    Find Some Elements
    Do something with them
    jQuery Object
  • A Basic Example
    Selects all paragraphs. Adds a class to them.
    This avoids-
    <p class=“red”>I m a paragraph -1</p>
    <p class=“red”>I m a paragraph -2</p>
    <p class=“red”>I m another paragraph</p>
  • Selector Basics
    Selecting By Id
    Selecting By Class
    Selecting by tag name
    Combine them
    $(“#footer ul.menuli”)
  • Basic Selector Example
    <div id=“header”>
    <span id=“logo”>Logo here…</span>
    <ul class=“menu”>
    <li>user name</li>
  • Jquery Events
    click(), bind(), unbind(), change(), keyup(), keydown,
    …..and many more
    Start when DOM is ready
  • Event Example
    <span id=“message” onclick=“…”> blah blah </span>
  • Iterating thro’ Elements
    To iterate, exclusively, over a jQuery object
    To iterate over any collection, whether it is a map (JavaScript object) or an array.
  • .each() Example
    <script type="text/javascript">
    $(document).ready(function () {
    $("span").click(function () {
    $("li").each(function () {
  • $.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(" - " +
  • $.extend()
    Merge the contents of two or more objects together into the first object.
    $.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.
  • $.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);
    settings == { validate: true, limit: 5, name: "bar" }
  • $.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);
    settings == { validate: true,
    font: {family: Verdana, size: 12px},
    name: “xyz" }
  • $.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);
    settings == { validate: true, limit: 5, name: "bar" }
    empty == { validate: true, limit: 5, name: "bar" }
  • $.fn.extend()
    Extends the jQuery element set to provide new methods
    (used to make a typical jQuery plugin).
    //You need an anonymous function to wrap around your function to avoid conflict
        //Attach this new method to jQuery
            //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
  • $.fn.extend() - Example
    Reverse Text of Odd rows
    <script type="text/javascript">
    $(document).ready(function () {
    $('ulli:odd').reverseText({ minlength: 6, maxlength: 10 });
    <form id="form1" runat="server">
    <ul id="menu">
    <li>Contact Us</li>
    Desired Result
  • $.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);
    // allow jQuery chaining
    return this;
  • Jquery and AJAX
    jQuery.ajax() or $.ajax()
    Performs an asynchronous HTTP (Ajax)
  • 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.
  • jQuery.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
  • 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 );    }});
  • Thank You