Docstoc

jQuery

Document Sample
jQuery Powered By Docstoc
					                                           jQuery




 jQuery is a JavaScript Library.
 jQuery greatly simplifies JavaScript programming.
 jQuery uses a combination of XPath and CSS selector syntax.
 jQuery is a lightweight cross-browser JavaScript library designed to simplify the client-side
  scripting of HTML
 jQuery is free, open source software
 jQuery's syntax is designed to make it easier to navigate a document, select DOM elements,
  create animations, handle events, and develop Ajax applications.
 jQuery also provides capabilities for developers to create plugins on top of the JavaScript
  library.
 For Ex:
    This is a basic , designed to help you get started using jQuery. If you don't have a test page
    setup yet, start by creating a new HTML page with the following contents:
                          <!doctype html>
                          <html>
                          <head>
                          <script type="text/javascript" src="jquery.js"></script>
                          <script type="text/javascript">
                   </script>
                         </head>
                         <body>
                         <a href="http://jquery.com/">jQuery</a>
                         </body>
                          </html>

    Edit the src attribute in the script tag to point to your copy of jquery.js. For example, if
    jquery.js is in the same directory as your HTML file, you can use:
        <script type="text/javascript" src="jquery.js"></script>



                          jQuery Syntax Examples
 $(this).hide():
  Demonstrates the jQuery hide() function, hiding the current HTML element.
 For Ex:


                       <html>
                     <head>

                     <script src="file:///home/ckuser38/Desktop/jquery-1.4.2.min.js">

                     </script>

                     <script>

                     $(document).ready(function(){

                     $("p").click(function(){

                     $(this).hide("very slow");

                           });

                     });

                     </script>

                     </head>

                     <body>

                     <p>hai d'nt clik on me</p>

                     <h1>siva</h1>

                     <h1>ram</h1>

                     <h1>krishnan</h1>

                     </body>

                    </html>

 $("#test").hide():
  Demonstrates the jQuery hide() function, hiding the element with id="test".
                      <html>
                      <head>
                      <script type=”jquery” scr="file:///home/ckuser38/Desktop/jquery-
                      1.4.2.min.js">
                      </script>
                      <script>
                      $(document).ready(function( ){
                      $(“#test”).click(function( ){
                      $(this).hide( )
                      });
                      });
                      </script>
                      </head>
                      <body>
                      <p id =”text”>hai this si siva</p>
                      </body>
                      </html>
 $("p").hide():
  Demonstrates the jQuery hide() function, hiding all <p> elements.

                     <html>
                      <head>
                      <script type=”jquery” scr="file:///home/ckuser38/Desktop/jquery-
                      1.4.2.min.js">
                      </script>
                      <script>
                      $(document).ready(function( ){
                      $(“p”).click(function( ){
                      $(this).hide( )
                      });
                      });
                      </script>
                      </head>
                      <body>
                      <p >hai this si siva</p>
                      <p> click on i will hide</p>
                      </body>
                     </html>

 $(".test").hide()
  Demonstrates the jQuery hide() function, hiding all elements with class="test".


                       <html>
                       <head>
                       <script type="text/javascript" src="jquery.js"></script>
                       <script type="text/javascript">
                       $(document).ready(function()
                       {
                         $("button").click(function()
                         {
                         $(".test").hide();
                         });
                       </head>
                       <body>
                       <h2 class="test">This is a heading</h2>
                       <p class="test">This is a paragraph.</p>
                       <p>This is another paragraph.</p>
                       <button type="button">Click me</button>
                       </body>
                       </html>


                       The Document Ready Function
 You might have noticed that all jQuery functions, in our examples, are inside a document
  ready function:
 $(document).ready(function( ) {
    jquery here.
   });

                                     jQuery Selectors
 jQuery element selectors and attribute selectors allow you to select HTML elements (or
  groups of elements) by tag name, attribute name or by content.
 Selectors allow you to manipulate HTML elements as a group or as a single element.



                                        jQuery Element Selectors

 jQuery uses CSS selectors to select HTML elements.
 $("p") selects all <p> elements.
 $("p.intro") selects all <p> elements with class="intro".
 <html>
                      <head>
                      <script type=”jquery” scr="file:///home/ckuser38/Desktop/jquery-
                      1.4.2.min.js">
                      </script>
                      <script>
                      $(document).ready(function( ){
                      $(“p.intro”).click(function( ){
                      $(this).hide( )
                      });
                      });
                      </script>
                      </head>
                      <body>
                      <p class=”intro”>hai this si siva</p>
                      <p> click on i will hide</p>
                      </body>
                     </html>

 $("p#demo") selects the first <p> element with id="demo
 Ex:
                      <head>
                      <script type=”jquery” scr="file:///home/ckuser38/Desktop/jquery-
                      1.4.2.min.js">
                      </script>
                      <script>
                      $(document).ready(function( ){
                      $(“p#demo”).click(function( ){
                      $(this).hide( )
                      });
                      });
                       </script>
                       </head>
                       <body>
                       <p id=”demo”>hai this si siva</p>
                       <p> click on i will hide</p>
                       </body>
                      </html>



                                         jQuery Attribute Selectors
 jQuery uses XPath expressions to select elements with given attributes.
 $("[href]") select all elements with an href attribute.
 $("[href='#']") select all elements with an href value equal to "#".
 $("[href!='#']") select all elements with an href attribute NOT equal to "#".
 $("[href$='.jpg']") select all elements with an href attribute that ends with ".jpg".




                           jQuery Event Functions
 The jQuery event handling functions are core functions in jQuery.
 Event handling functions are functions that are automatically called when "something
  happens" in HTML.