• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JQuery Presentation

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