Your SlideShare is downloading. ×
0
JQuery Presentation
JQuery Presentation
JQuery Presentation
JQuery Presentation
JQuery Presentation
JQuery Presentation
JQuery Presentation
JQuery Presentation
JQuery Presentation
JQuery Presentation
JQuery Presentation
JQuery Presentation
JQuery Presentation
JQuery Presentation
JQuery Presentation
JQuery Presentation
JQuery Presentation
JQuery Presentation
JQuery Presentation
JQuery Presentation
JQuery Presentation
JQuery Presentation
JQuery Presentation
JQuery Presentation
JQuery Presentation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JQuery Presentation

1,610

Published on

JQuery Basics

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,610
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

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<br />
  2. What is jQuery<br />Javascript Library<br />Fast and Concise<br />Simplifies the interaction between HTML and JavaScript<br />
  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. 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. jQuery philosophy<br />Find Some Elements<br />$(“div”).addClass(“xyz”);<br />}<br />Do something with them<br />jQuery Object<br />
  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. 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. 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. 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. 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. 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. .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. $.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. $.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. $.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. $.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. $.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. $.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. $.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. $.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. Jquery and AJAX<br />jQuery.ajax() or $.ajax()<br /> Performs an asynchronous HTTP (Ajax)<br /> request.<br />
  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. 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. 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. Thank You<br />

×