Your SlideShare is downloading. ×
Jquery 2
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 2

954
views

Published on

jQuery

jQuery

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
954
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
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. Jquery 2 Manish Singh and Hussain Fakhruddin
  • 2. Agenda  jQuery API- Core  Selector and Context  Data Accessors  jQuery API -Attribute - HTML Attributes - Text Attributes
  • 3. Quick Recap  jQuery is a javascript liabrary.  Has better browser copatiability.  Provides Rich Enduser Experience.  Lots of inbuilt functions and plugins.  All the code is written within $ sign.
  • 4. jQuery API.. Core  The backbone of jquery.  Contains main jquery related functions.  Also contains list of object and data accessor functions.  We will have a look at them from next slide onwards.
  • 5. jQuery Functions  jQuery( expression , context)  jQuery( html, ownerDocument)  jQuery(elements)  jQuery( callback)  See Next Slide for datails.
  • 6. jQuery( expression , context)  This function accepts a string containing a CSS selector which is then used to match a set of elements.  Arguments are an expression ( an expression to search with, compulsory) and context ( any DOM or jquery context, optional).  The core functionality of jQuery centers around this function.
  • 7. Continued…  Everything in jQuery is based upon this, or uses this in some way.  The most basic use of this function is to pass in an expression (usually consisting of CSS), which then finds all matching elements.  By default, if no context is specified, $() looks for DOM elements within the context of the current HTML document.
  • 8. Example  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="http://code.jquery.com/jquery-latest.js "></script> <script> $(document).ready(function(){ $("div > p").css("border", "1px solid gray"); }); </script> </head> <body> <p>one</p> <div><p>two</p></div> <p>three</p> </body> </html>
  • 9. jQuery( html, [ownerDocument] ) Create DOM elements on-the-fly from the provided String of raw HTML. Simple elements without attributes, e.g., "<div />", are created via document.createElement. All other cases are parsed by assigning the string to the .innerHTML property of a div element. The HTML string cannot contain elements that are invalid within a div, such as html, head, body, or title elements.
  • 10. Continued… Arguments are an html (A string of HTML to create on the fly - compulsory) and ownerDocument (A document in which the new elements will be created - optional). All HTML must be well-formed, otherwise it may not work correctly across all browsers. Example :- $ ("<div><p>Hello</p></div>").appendTo ("body") .
  • 11. jQuery( elements ) Wrap jQuery functionality around a single or multiple DOM Element(s). This function accepts XML Documents and Window objects as valid arguments even though they are not DOM Elements. Argument is element (DOM element(s) to be encapsulated by a jQuery object- compulsory). Example :- $ (document.body).css( "background", "black" );
  • 12. jQuery( callback ) A shorthand for $(document).ready(). Argument is callback (The function to execute when the DOM is ready - Compulsory). Allows you to bind a function to be executed when the DOM document has finished loading. $(function(){ // Document is ready });
  • 13. Object Accesors  Each()  Size()  Length  Selector()  Context()  Eq()  Get()  Index()
  • 14. each( callback ) Execute a function within the context of every matched element. Argument is callback(The callback to execute for each matched element- compulsory). This means that every time the passed-in function is executed (which is once for every element matched) the 'this' keyword points to the specific DOM element.
  • 15. Example <html> <head> <script src="http://code.jquery.com/jquery-latest.js "></script> <script type=“text/javascript”> $(document).ready(function(){ $(document.body).click(function () { $("div").each(function (i) { if (this.style.color != "blue") { this.style.color = "blue"; } else { this.style.color = ""; } }); }); }); </script>
  • 16. <style> div { color:red; text-align:center; cursor:pointer; font-weight:bolder; width:300px; } </style> </head> <body> <div>Click here</div> <div>to iterate through</div> <div>these divs.</div> </body> </html>
  • 17. Size() and length The number of elements in the jQuery object. Size() is slightly slower. So length should be used. Example :- <html> <head> <script src="http://code.jquery.com/jquery-latest.js "></script> <script> $(document).ready(function(){ $(document.body).click(function () { $ (document.body).append($("<div>")); var n = $ ("div").length; $("span").text("There are " + n + " divs." + "Click to add more."); }).trigger('click'); // trigger the click to start }); </script>
  • 18. Continued <style> body { cursor:pointer; } div { width:50px; height:30px; margin:5px; float:left; background:green; } span { color:red; } </style> </head> <body> <span></span> <div></div> </body> </html>
  • 19. Selector and Context  New addition in jQuery 1.3.  A selector representing selector originally passed to jQuery().  Context represents the DOM node context originally passed to jQuery() (if none was passed then context will be equal to the document).  Useful for plugin developers.  We will see in the detail later.
  • 20. Continued… eq( position ) :- Reduce the set of matched elements to a single element. Example :- $("p").eq(1).css("color", "red") . get( ) :- Access all matched DOM elements. Example :- function disp(divs) { var a = []; for (var i = 0; i < divs.length; i++) { a.push(divs[i].innerHTML); } $("span").text(a.join(" ")); } disp( $("div").get().reverse() );
  • 21. Continued…  get( index ) :- Access a single matched DOM element at a specified index in the matched set.  Example :- $("*", document.body).click(function (e) { e.stopPropagation(); var domEl = $(this).get(0); $("span:first").text("Clicked on - " + domEl.tagName); });
  • 22. Continued… index( subject ) :- Searches every matched element for the object and returns the index of the element. If a jQuery object is passed, only the first element is checked. Returns -1 if the object wasn't found. Example :- $("div").click(function () { // this is the dom element clicked var index = $("div").index(this); $("span").text("That was div index #" + index); });
  • 23. Data Accessors  data( name ) :- Returns value at named data store for the element, as set by data(name, value).  data( name, value ) :- Stores the value in the named spot.  removeData( name ) :- Removes named data store from an element.
  • 24. Example <html> <head> <script src=" http://code.jquery.com/jquery-latest.js "></script> <script> $ (document).ready(function(){ $("div").data("test", { first: 16, last: "pizza!" }); $ ("span:first").text($("div").data("test").first); $ ("span:last").text($("div").data("test").last); }); </script> <style> div { color:blue; } span { color:red; } </style> </head> <body> <div> The values stored were <span></span> and <span></span> </div>
  • 25. jQuery API.. Attribute  Attributes are the properties associated with any HTML element.  So attribute APIs deal with accessing any attribute, getting and setting attribute values and other related operations on attributes.
  • 26. attr( name )  Access a property on the first matched element.  This method makes it easy to retrieve a property value from the first matched element.  Attributes include title, alt, src, href, width, style, etc.
  • 27. Example <html> <head> <script src="http://code.jquery.com/jquery-latest.js "></script> <script> $(document).ready(function(){ var title = $("em").attr("title"); $("div").text(title); }); </script> <style> em { color:blue; font-weight;bold; } div { color:red; } </style> </head> <body> <p> Once there was a <em title="huge, gigantic">large</em> dinosaur... </p> The title of the emphasis is:<div></div> </body> </html>
  • 28. attr( properties )  Set a key/value object as properties to all matched elements.  This serves as the best way to set a large number of properties on all matched elements.  Argument is properties i.e. a Key/value pairs to set as object properties.
  • 29. Example <html> <head> <script src="http://code.jquery.com/jquery- latest.js"></script> <script> $(document).ready(function(){ $("img").attr({ src: "/images/hat.gif", title: "jQuery", alt: "jQuery Logo" }); $ ("div").text($("img").attr("alt")); }); </script> <style> img { padding:10px; } div { color:red; font-size:24px; } </style> </head> <body> <img /> <img /> <img /> <div><B>Attribute of Ajax</B></div> </body> </html>
  • 30. Other attr functions  attr( key, value ) :- Set a single property to a value, on all matched elements.  attr( key, fn ) :- Set a single property to a computed value, on all matched elements.  In second type instead of supplying a string value , a function is provided that computes the value.
  • 31. Example 1 <html> <head> <script src="http://code.jquery.com/jquery- latest.js"></script> <script> $ (document).ready(function(){ $ ("button:gt(1)").attr("disabled","disabled"); }); </script> <style> button { margin:10px; } </style> </head> <body> <button>0th Button</button> <button>1st Button</button> <button>2nd Button</button> </body> </html>
  • 32. Example 2 <html> <head> <script src="http://code.jquery.com/jquery- latest.js"></script> <script> $ (document).ready(function(){ $("div").attr("id", function (arr) { return "div-id" + arr; }) .each(function () { $("span", this).html("(ID = '<b>" + this.id + "</b>')"); }); }); </script> <style> div { color:blue; } span { color:red; } b { font-weight:bolder; } </style> </head> <body> <div>Zero-th <span></span></div> <div>First <span></span></div> <div>Second <span></span></div> </body> </html>
  • 33. removeAttr( name )  Remove an attribute from each of the matched elements.  Takes name of the attribute as parameter.
  • 34. Example <html> <head> <script src="http://code.jquery.com/jquery- latest.js"></script> <script> $ (document).ready(function(){ $ ("button").click(function () { $ (this).next().removeAttr("disabled") .focus() .val("editable now"); }); }); </script> </head> <body> <button>Enable</button> <input type="text" disabled="disabled" value="can't edit this" /> </body> </html>
  • 35. HTML Attributes  html( ) :- Get the html contents (innerHTML) of the first matched element.  html( val ) :- Set the html contents of every matched element.  Above properties will not work for XML documents ( though it will work for XHTML).
  • 36. Example <html> <head> <script src="http://code.jquery.com/jquery- latest.js"></script> <script> $ (document).ready(function(){ $("p").click(function () { var htmlStr = $(this).html(); $ (this).text(htmlStr); }); }); </script> <style> p { margin:8px; font-size:20px; color:blue; cursor:pointer; } b { text-decoration:underline; } button { cursor:pointer; } </style> </head >
  • 37. <body> <p> <b>Click</b> to change the <span id="tag">html</span> </p> <p> to a <span id="text">text</span> node. </p> <p> This <button name="nada">button</button> does nothing. </p> </body> </html>
  • 38. Example 2 <html> <head> <script src="http://code.jquery.com/jquery- latest.js"></script> <script> $ (document).ready(function(){ $("div").html("<span class='red'>Hello <b>Again</b></span>"); }); </script> <style> .red { color:red; } </style> </head> <body> <span>Hello</span> <div></div> <div></div> <div></div> </body> </html>
  • 39. Text Attributes  text() :- Get the combined text contents of all matched elements.  text( val ) :- Set the text contents of all matched elements.  Above two work on both HTML and XML documents.  Cannot be used on input elements. For input field text use the val attribute.
  • 40. Continued…  val( ) :- Get the input value of the first matched element.  val( val ) :- Set the value attribute of every matched element.  Val(val) also checks, or selects, all the radio buttons, checkboxes, and select options that match the set of values.
  • 41. Example <html> <head> <script src="http://code.jquery.com/jquery- latest.js"></script> <script> $ (document).ready(function(){ $ ("#single").val("Single2"); $ ("#multiple").val(["Multiple2", "Multiple3"]); $("input").val(["check1","check2", "radio1" ]); }); </script> <style> body { color:blue; } </style> </head> <body> <select id="single"> <option>Single</option> <option>Single2</option> </select>
  • 42. <select id="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select> <br/> <input type="checkbox" name="checkboxname" value="check1"/> check1 <input type="checkbox" name="checkboxname" value="check2"/> check2 <input type="radio" name="r" value="radio1"/> radio1 <input type="radio" name="r" value="radio2"/> radio2 </body> </html>
  • 43. Thank You!!! Email : manish_singh185@yahoo.com hussulinux@gmail.com