Introduction to JQuery


Published on

Introduction to using the JQuery javascript library. Write less, do more!

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Introduction to JQuery

    1. 1. jQuery Write less, Do more
    2. 2. Introduction <ul><li>What we will discuss </li></ul><ul><ul><li>jQuery is a fast and concise JavaScript Library </li></ul></ul><ul><ul><li>Separates the &quot;behavior&quot; characteristics from the HTML structure. </li></ul></ul><ul><ul><li>Separation of behavior from structure -> principle of Unobtrusive JavaScript </li></ul></ul>
    3. 3. jQuery – Description <ul><li>jQuery Core Library </li></ul><ul><li>jQuery UI </li></ul>
    4. 4. The $ function <ul><li>One of the critical concepts in any jQuery code is the so called ' $ ' function. ' $ ' is actually an 'alias' for the 'jQuery' namespace. </li></ul><ul><li>Example 1 : jQuery provides a function for trimming strings. This function can be used as: </li></ul><ul><li>str = &quot; foo &quot;; </li></ul><ul><li>jQuery . trim (str); // returns &quot;foo&quot; </li></ul><ul><li>str = “ foo &quot;; </li></ul><ul><li>$ . trim (str); </li></ul><ul><li>These are equivalent. Usage of ' $ ' instead of 'jQuery' is an ad-hoc convention, and is considered easier. </li></ul>
    5. 5. <ul><li>Example 2 : To select all the paragraphs that have the class 'foo' and add another class called 'bar' to all of them: </li></ul><ul><li>$ (&quot; p . foo &quot;).addClass(&quot;bar&quot;); </li></ul><ul><li>Example 3 : To execute a function 'myfunc' immediately after the page is loaded (called the ready handler in jQuery lingo): </li></ul><ul><li>$ ( document ). ready (function() { </li></ul><ul><li> myfunc(); </li></ul><ul><li>}); </li></ul>
    6. 6. Use <ul><li>jQuery usually exists as a single JavaScript file, containing all the common DOM, Event, Effects, and Ajax functions. It can be included within any web page by using the following mark-up: </li></ul><ul><li><script type = &quot;text/javascript&quot; src = &quot;/path/to/jQuery.js&quot; ></script> </li></ul><ul><li>The latest stable versions of jQuery can also be loaded using the Google AJAX Libraries API. </li></ul><ul><li><script type= &quot;text/javascript“ src= &quot;; > </script> </li></ul><ul><li><script> google. load ( &quot;jquery&quot;, &quot;1.3.2&quot; ); </script> </li></ul>
    7. 7. jQuery Selectors - :first and :last selectors <ul><li>Add a Class on the First and Last Element </li></ul><ul><li>$ (&quot; ul .column li . block : first &quot;). addClass (&quot; first &quot;); </li></ul><ul><li>//Add a class name of &quot;first&quot; to the first selector </li></ul><ul><li>$ (&quot; ul .column li . block : last &quot;). addClass (&quot; last &quot;); </li></ul><ul><li>//Add a class name of &quot;last&quot; to the last selector </li></ul><ul><li>CSS </li></ul><ul><li>. first { background : #ffdbdb ;} </li></ul><ul><li>. last { </li></ul><ul><li>margin-right : 0; </li></ul><ul><li>background : #c4dcff ; </li></ul><ul><li>} </li></ul>
    8. 8. Example :-
    9. 9. :odd and :even Selectors <ul><li>Specify Even and Odd Selectors </li></ul><ul><li>$ (&quot; ul li : even &quot;). addClass (&quot; even &quot;); </li></ul><ul><li>$ (&quot; ul li : odd &quot;). addClass (&quot; odd &quot;); </li></ul><ul><li>CSS </li></ul><ul><li>. even { </li></ul><ul><li> background : #fff ; </li></ul><ul><li> border : 1px solid #ccc ; </li></ul><ul><li>} </li></ul><ul><li> . odd { background : #ccc ; } </li></ul>
    10. 10. How to get the element ? <ul><li>The key point you have to learn is how to get the exact element that you want to apply the effects. </li></ul><ul><li>$ (&quot; # header &quot;) = get the element with id=&quot;header“ </li></ul><ul><li>$ (&quot; h3 &quot;) = get all <h3> element </li></ul><ul><li>$ (&quot; div # content . photo &quot;) = get all element with class=&quot;photo&quot; nested in the <div id=&quot;content&quot;> </li></ul><ul><li>$ (&quot; ul li &quot;) = get all <li> element nested in all <ul> </li></ul><ul><li>$ (&quot; ul li : first &quot;) = get only the first <li> element of the <ul> </li></ul>
    11. 11. Styles of Interaction <ul><li>via the $ function, which is a factory method for the jQuery object. These functions, often called commands , are chainable ; they each return the jQuery object </li></ul><ul><li>via $. -prefixed functions. These are utility functions which do not work on the jQuery object. </li></ul>
    12. 12. <ul><li>$ (&quot; div . test &quot;). add (&quot; p . quote &quot;). addClass (&quot; blue &quot;). slideDown (&quot; slow &quot;); </li></ul><ul><li>Finds the union of all div tags with class attribute test and all p tags with class attribute quote, adds the class attribute blue to each matched element, and then slides them down with an animation. The $ and add functions affect the matched set, while the addClass and slideDown affect the referenced nodes. </li></ul><ul><li>$ .each([1,2,3], function() { document.write(this + 1); }); </li></ul><ul><li>... writes 234 to the document. </li></ul>
    13. 13. Ajax <ul><li>It is possible to perform Ajax routines using the $.ajax and associated methods to load and manipulate remote data. </li></ul><ul><li>$.ajax ( { type: &quot;POST&quot;, </li></ul><ul><li>url: &quot;some.php&quot;, </li></ul><ul><li>data: &quot;name=John&location=Boston&quot;, </li></ul><ul><li> success: function(msg) { </li></ul><ul><li> alert( &quot;Data Saved: &quot; + msg ); </li></ul><ul><li> } }); </li></ul>
    14. 14. Demo : Simple-Side-Panel – Jquery Code <ul><li>$( document ). ready ( function() { </li></ul><ul><li>$( &quot;.btn-slide&quot; ).click( function() { </li></ul><ul><li>$( &quot;#panel&quot; ).slideToggle( &quot;slow&quot; ); </li></ul><ul><li>$(this).toggleClass( &quot;active&quot; ); return false; </li></ul><ul><li>}); </li></ul><ul><li>}); </li></ul>
    15. 15. Demo : Simple-Side-Panel – Html Code <ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><div id=&quot;panel&quot;> </li></ul><ul><li><!-- you can put content here --> </li></ul><ul><li></div> </li></ul><ul><li><p class=&quot;slide&quot;> <a href= &quot;#&quot; class= &quot;btn-slide&quot; > Slide Panel </a> </p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
    16. 16. References <ul><li>jQuery </li></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul>