Jquery library


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Jquery library

  1. 1. Disclaimer: This presentation is prepared by trainees of baabtra as a part of mentoring program. This is not official document of baabtra –Mentoring Partner Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd.
  2. 2. Typing Speed Week Target Achieved 1 40 25 2 35 28 3 35 29
  3. 3. Jobs Applied # Company Designation Applied Date 1 HashInclude Technologies Web Designer 09-Aug-2013 2 HashInclude Technologies PHP developer 09-Aug-2013 3 Current Status
  4. 4. jQuery write less, do more SUHAIL K.P suhailkp007@gmail. com www.facebook.com /suhilkp007 twitter.com/suhilk p007
  5. 5. What is jQuery? • library of JavaScript Functions. • Takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that can call with a single line of code. • simplifies complicated things from JavaScript, like AJAX calls and DOM manipulation. • The jQuery library contains the following features: HTML/DOM manipulation CSS manipulation HTML event methods Effects and animations AJAX Utilities
  6. 6. Why jQuery? • There are lots of other JavaScript frameworks like MooTools, YUI , Dojo etc but jQuery seems to be the most popular, and also the most extendable. • Many of the biggest companies on the Web use jQuery, such as: Google Microsoft IBM Netflix
  7. 7. How to install jQuery ? • You can download jQuery library from jQuery.com • • If you don't want to store the jQuery library on your own computer, you can use the hosted jQuery library from Google ,Microsoft or jQuery website. Google <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> • Microsoft <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"> </script> • jQuery <script type="text/javascript" src=" http://code.jquery.com/jquery-latest.js"> </script>
  8. 8. How to use jQuery library? include jquery library in your HTML file as follows <html> <head> <title>The jQuery Example</title> <script type="text/javascript“ src="jquery1.3.2.min.js“ > </script> <script type="text/javascript"> // you can add our javascript code here </script> </head> <body> ........ </body> </html>
  9. 9. How to call a jQuery library functions? you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded. To do this, we register a ready event for the document as follows: $(document).ready(function() { // do stuff when DOM is ready });
  10. 10. jQuery Syntax • The jQuery syntax for selecting HTML elements and perform some action on the element(s). • Basic syntax is: $(selector).action() – A dollar sign to define jQuery(synonym of jQuery()) – A (selector) to "query (or find)" HTML elements – A jQuery action() to be performed on the element(s) • Examples: – – – – $(this).hide() - hides current element $("p").hide() - hides all paragraphs $("p.test").hide() - hides all paragraphs with class="test" $("#test").hide() - hides the element with id="test"
  11. 11. Selectors • jQuery selectors allow you to select and manipulate HTML element(s). • You can instantiate the jQuery object simply by writing jQuery() or even shorter using the jQuery shortcut name: $(). Therefore, selecting a set of elements is as simple as this: $(<query >) • With the jQuery object returned, you can then start using and altering the element(s) you have matched.
  12. 12. SELECT DOM ELEMENTS • Selecting DOM elements through document based on the css selectors. • The #id selector $(document).ready(function() { $(“#d1").text("Test"); }); • This code will be applied on only one element whose ID attribute is d1.
  13. 13. SELECT DOM ELEMENTS(CONT’D)  The .class selector $(document).ready(function() { $(“.para").text("Test"); });  This code will be applied on all elements with the .para class
  14. 14. SELECT DOM ELEMENTS(CONT’D)  The element selector $(document).ready(function() { $(“div").text("Test"); });  This code will be applied on all <div> tags
  15. 15. SOME MORE EXAMPLES Syntax Description $(this) Current HTML element $("p") All <p> elements $("p.intro") All <p> elements with class="intro" $("p#intro") All <p> elements with id="intro" $("p.intro:first") The first <p> element with class="intro" $(".intro") All elements with class="intro" $("#intro") The first element with id="intro" $("ul li:first") The first <li> element of the first <ul> $("ul li:first-child") The first <li> element of every <ul> $("[href$='.jpg']") All elements with an href attribute that ends with ".jpg" $("div#intro .head") All elements with class="head" inside a <div> element with id="intro"
  16. 16. JQUERY     EVENTS The jQuery event handling methods are core functions in jQuery. Event handlers are method that are called when "something happens" in HTML $("button").click(function() {..some code... } ) EX:  $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });
  17. 17. JQUERY  EVENTS(CONT’D) Here are some examples of event methods in jQuery: Event Method Description $(document).ready(function) Binds a function to the ready event of a document (when the document is finished loading) $(selector).click(function) Triggers, or binds a function to the click event of selected elements $(selector).dblclick(function) Triggers, or binds a function to the double click event of selected elements $(selector).focus(function) Triggers, or binds a function to the focus event of selected elements $(selector).mouseover(function) Triggers, or binds a function to the mouseover event of selected elements
  18. 18. jQuery - DOM Traversing • which provides a variety of DOM traversal methods to help us to select elements in a document. • DOM Traversal Methods do not modify the jQuery object and they are used to filter out elements from a document based on given conditions.
  19. 19. For Example : <html> <head> <title>the title</title> </head><body><div> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> </ul> </div> </body> </html> Above every list has its own index, and can be located directly by using eq(index), Eg: $("li").eq(1)
  20. 20. jQuery - AJAX •jQuery provides several methods for AJAX functionality. jQuery load() Method  The load() method loads data from a server and puts the returned data into the selected element.
  21. 21. Syntax: $(selector).load(URL,data,callback); •The required URL parameter specifies the URL you wish to load. •The optional data parameter specifies a set of querystring key/value pairs to send along with the request. •The optional callback parameter is the name of a function to be executed after the load() method is completed.
  22. 22. Form Validation Example example
  23. 23. Thank you..
  24. 24. If this presentation helped you, please visit our page facebook.com/baabtra and like it. Thanks in advance. www.baabtra.com | www.massbaab.com |www.baabte.com
  25. 25. Contact Us Emarald Mall (Big Bazar Building) Mavoor Road, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 Start up Village Eranakulam, Kerala, India. Email: info@baabtra.com NC Complex, Near Bus Stand Mukkam, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550