• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Jquery 2

  • 899 views
Uploaded on

jQuery

jQuery

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
899
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
16
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 &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot; http://www.w3.org/TR/html4/loose.dtd &quot;> <html>
    • <head>
    • <script src=&quot; http://code.jquery.com/jquery-latest.js &quot;></script> <script>
    • $(document).ready(function(){
    • $(&quot;div > p&quot;).css(&quot;border&quot;, &quot;1px solid gray&quot;); });
    • </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., &quot;<div />&quot;, 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 :- $(&quot;<div><p>Hello</p></div>&quot;).appendTo(&quot;body&quot;) .
  • 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( &quot;background&quot;, &quot;black&quot; );
  • 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=&quot; http://code.jquery.com/jquery-latest.js &quot;></script> <script type=“text/javascript”>
    • $(document).ready(function(){
    • $(document.body).click(function () {
    • $(&quot;div&quot;). each (function (i) {
    • if (this.style.color != &quot;blue&quot;) {
    • this.style.color = &quot;blue&quot;;
    • } else {
    • this.style.color = &quot;&quot;;
    • } }); }); }); </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=&quot; http://code.jquery.com/jquery-latest.js &quot;></script> <script>
    • $(document).ready(function(){
    • $(document.body).click(function () { $(document.body).append($(&quot;<div>&quot;)); var n = $(&quot;div&quot;). length ; $(&quot;span&quot;).text(&quot;There are &quot; + n + &quot; divs.&quot; + &quot;Click to add more.&quot;); }).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 :- $(&quot;p&quot;).eq(1).css(&quot;color&quot;, &quot;red&quot;) .
    • 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); } $(&quot;span&quot;).text(a.join(&quot; &quot;)); }
    • disp( $(&quot;div&quot;). get ().reverse() );
  • 21. Continued…
    • get( index ) :- Access a single matched DOM element at a specified index in the matched set.
    • Example :- $(&quot;*&quot;, document.body).click(function (e) { e.stopPropagation();
    • var domEl = $(this). get (0);
    • $(&quot;span:first&quot;).text(&quot;Clicked on - &quot; + 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 :- $(&quot;div&quot;).click(function () {
    • // this is the dom element clicked
    • var index = $(&quot;div&quot;). index (this);
    • $(&quot;span&quot;).text(&quot;That was div index #&quot; + 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=&quot; http://code.jquery.com/jquery-latest.js &quot;></script> <script> $(document).ready(function(){
    • $(&quot;div&quot;). data (&quot;test&quot;, { first: 16, last: &quot;pizza!&quot; }); $(&quot;span:first&quot;).text($(&quot;div&quot;). data (&quot;test&quot;).first); $(&quot;span:last&quot;).text($(&quot;div&quot;). data (&quot;test&quot;).last); }); </script> <style> div { color:blue; }
    • span { color:red; } </style>
    • </head>
    • <body> <div> The values stored were <span></span> and <span></span> </div>
    • </body> </html>
  • 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=&quot; http://code.jquery.com/jquery-latest.js &quot;></script> <script> $(document).ready(function(){
    • var title = $(&quot;em&quot;). attr (&quot;title&quot;);
    • $(&quot;div&quot;). text (title); }); </script>
    • <style> em { color:blue; font-weight;bold; }
    • div { color:red; } </style>
    • </head> <body> <p> Once there was a
    • <em title=&quot;huge, gigantic&quot;>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=&quot; http://code.jquery.com/jquery-latest.js &quot;></script>
    • <script> $(document).ready(function(){
    • $(&quot;img&quot;). attr ({ src: &quot;/images/hat.gif&quot;,
    • title: &quot;jQuery&quot;, alt: &quot;jQuery Logo&quot; }); $(&quot;div&quot;).text($(&quot;img&quot;). attr (&quot;alt&quot;)); }); </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=&quot; http://code.jquery.com/jquery-latest.js &quot;></script> <script> $(document).ready(function(){ $(&quot;button:gt(1)&quot;). attr (&quot;disabled&quot;,&quot;disabled&quot;); }); </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=&quot; http://code.jquery.com/jquery-latest.js &quot;></script> <script> $(document).ready(function(){
    • $(&quot;div&quot;). attr (&quot;id&quot;, function (arr) { return &quot;div-id&quot; + arr; }) .each(function () {
    • $(&quot;span&quot;, this).html(&quot;(ID = '<b>&quot; + this.id + &quot;</b>')&quot;); }); }); </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=&quot; http://code.jquery.com/jquery-latest.js &quot;></script> <script> $(document).ready(function(){ $(&quot;button&quot;).click(function () { $(this).next(). removeAttr (&quot;disabled&quot;) .focus() .val(&quot;editable now&quot;); }); }); </script>
    • </head> <body>
    • <button>Enable</button> <input type=&quot;text&quot; disabled=&quot;disabled&quot; value=&quot;can't edit this&quot; />
    • </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=&quot; http://code.jquery.com/jquery-latest.js &quot;></script> <script> $(document).ready(function(){
    • $(&quot;p&quot;).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=&quot;tag&quot;>html</span> </p>
    • <p> to a <span id=&quot;text&quot;>text</span> node. </p>
    • <p> This <button name=&quot;nada&quot;>button</button> does nothing. </p>
    • </body>
    • </html>
  • 38. Example 2
    • <html> <head>
    • <script src=&quot; http://code.jquery.com/jquery-latest.js &quot;></script> <script> $(document).ready(function(){
    • $(&quot;div&quot;). html (&quot;<span class='red'>Hello <b>Again</b></span>&quot;); }); </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=&quot; http://code.jquery.com/jquery-latest.js &quot;></script> <script> $(document).ready(function(){ $(&quot;#single&quot;). val (&quot;Single2&quot;); $(&quot;#multiple&quot;). val ([&quot;Multiple2&quot;, &quot;Multiple3&quot;]);
    • $(&quot;input&quot;). val ([&quot;check1&quot;,&quot;check2&quot;, &quot;radio1&quot; ]); }); </script> <style> body { color:blue; } </style>
    • </head> <body> <select id=&quot;single&quot;>
    • <option>Single</option>
    • <option>Single2</option> </select>
  • 42.
    • <select id=&quot;multiple&quot; multiple=&quot;multiple&quot;>
    • <option selected=&quot;selected&quot;>Multiple</option> <option>Multiple2</option>
    • <option selected=&quot;selected&quot;>Multiple3</option> </select> <br/> <input type=&quot;checkbox&quot; name=&quot;checkboxname&quot; value=&quot;check1&quot;/> check1
    • <input type=&quot;checkbox&quot; name=&quot;checkboxname&quot; value=&quot;check2&quot;/> check2
    • <input type=&quot;radio&quot; name=&quot;r&quot; value=&quot;radio1&quot;/> radio1
    • <input type=&quot;radio&quot; name=&quot;r&quot; value=&quot;radio2&quot;/> radio2
    • </body> </html>
  • 43. Thank You!!! Email : [email_address] [email_address]