Presented By: Sony Jain<br />
What  is  jQuery<br />Javascript Library<br />Fast and Concise<br />Simplifies the interaction between HTML and JavaScript...
Why  jQuery ?<br />Cross Browser <br />(IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome)<br />Light Weight<br />Supports A...
Embed in your page<br /><html> <br />	<head> <br />		<script src=“path/to/jquery-x.x.x.js"><br />      </script><br />    ...
jQuery  philosophy<br />Find Some Elements<br />$(“div”).addClass(“xyz”);<br />}<br />Do something with them<br />jQuery O...
A Basic Example<br />$(“p”).addClass(“red”);<br />Selects all paragraphs. Adds a class to them.<br />This avoids-<br /><bo...
Selector Basics<br />Selecting By Id<br />$(“#header”)<br />Selecting By Class<br />$(“.updated”)<br />Selecting by tag na...
Basic Selector Example<br />$(“ul.menuli”)<br /><body> <br />	<div id=“header”><br /> <span id=“logo”>Logo here…</span><br...
Jquery  Events<br />click(), bind(), unbind(), change(), keyup(), keydown,  <br />    …..and many more<br />Start when DOM...
Event Example<br />$(document).ready(function(){ <br />	$(“#message”).click(function(){<br />			$(this).hide();<br />	})<b...
Iterating  thro’  Elements<br />.each()<br />To iterate, exclusively, over a jQuery object<br />$.each()<br />To iterate o...
.each()  Example<br /><script type="text/javascript"><br />    $(document).ready(function () {<br />        $("span").clic...
$.each()  Example<br />vararr = ["one", "two", "three", "four", "five"];<br />varobj = { one: 1, two: 2, three: 3, four: 4...
$.extend()<br />Merge the contents of two or more objects together into the first object.<br />Syntax<br />$.extend( [ dee...
$.extend() - Example<br />Merge two objects, modifying the first<br />var settings = { validate: false, limit: 5, name: "f...
$.extend() - Example<br />Merge two objects recursively, modifying the first. <br />var settings = { validate: false, <br ...
$.extend() - Example<br />Merge defaults and options, without modifying the defaults. This is<br />       a common plugin ...
$.fn.extend()<br />Extends the jQuery element set to provide new methods <br />     (used to make a typical jQuery plugin)...
$.fn.extend() - Example<br />Reverse  Text  of  Odd  rows<br /><script type="text/javascript"><br />$(document).ready(func...
$.fn.extend() - Example<br />(function($) {  <br />// jQuery plugin definition  <br />$.fn.reverseText = function(params) ...
Jquery  and  AJAX<br />jQuery.ajax() or $.ajax()<br /> Performs an asynchronous HTTP (Ajax)<br />    request.<br />
jQuery.ajax()<br />The $.ajax() function underlies all Ajax requests<br />    sent by jQuery<br />At its simplest, the $.a...
jQuery.ajax()<br />Syntax   <br />    $.ajax({ <br />              type: type,<br />              url: url, <br />        ...
jQuery.ajax() : Example<br />Save some data to the server and notify the user once it's complete. <br />    $.ajax({   typ...
Thank You<br />
Upcoming SlideShare
Loading in...5
×

JQuery Presentation

1,619

Published on

JQuery Basics

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,619
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JQuery Presentation

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

×