Jquery library
Upcoming SlideShare
Loading in...5
×
 

 

Statistics

Views

Total Views
673
Views on SlideShare
673
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

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

Jquery library Jquery library Presentation Transcript

  • 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.
  • Typing Speed Week Target Achieved 1 40 25 2 35 28 3 35 29
  • 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
  • jQuery write less, do more SUHAIL K.P suhailkp007@gmail. com www.facebook.com /suhilkp007 twitter.com/suhilk p007
  • 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
  • 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
  • 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>
  • 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>
  • 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 });
  • 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"
  • 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.
  • 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.
  • 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
  • SELECT DOM ELEMENTS(CONT’D)  The element selector $(document).ready(function() { $(“div").text("Test"); });  This code will be applied on all <div> tags
  • 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"
  • 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(); }); });
  • 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
  • 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.
  • 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)
  • 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.
  • 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.
  • Form Validation Example example
  • Thank you..
  • 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
  • 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