Introduction to JQuery

  • 2,465 views
Uploaded on

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

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

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
2,465
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

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