• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction to JQuery
 

Introduction to JQuery

on

  • 3,687 views

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

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

Statistics

Views

Total Views
3,687
Views on SlideShare
3,678
Embed Views
9

Actions

Likes
1
Downloads
73
Comments
0

1 Embed 9

http://www.slideshare.net 9

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to JQuery Introduction to JQuery Presentation Transcript

  • jQuery Write less, Do more
  • 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
  • jQuery – Description
    • jQuery Core Library
    • jQuery UI
  • 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.
    • 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();
    • });
  • 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>
  • 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 ;
    • }
  • Example :-
  • :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 ; }
  • 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>
  • 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.
    • $ (&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.
  • 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 );
    • } });
  • 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;
    • });
    • });
  • 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>
  • 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