jquery library
TRANSCRIPT
Disclaimer: This presentation is prepared by trainees of baabtra as a part of mentoring program. This is not official document of baabtra –Mentoring PartnerBaabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd.
Week Target Achieved
1 40 25
2 35 28
3 35 29
Typing Speed
Jobs Applied# Company Designation Applied Date Current Status
1 HashInclude Technologies
Web Designer 09-Aug-2013
2 HashInclude Technologies
PHP developer 09-Aug-2013
3
jQuerywrite less, do more
SUHAIL [email protected]/
suhilkp007twitter.com/suhilkp007in.linkedin.com/in/
suhailpallimalil+919633333583
• 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
What is 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:
GoogleMicrosoftIBMNetflix
Why jQuery?
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?
<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>
include jquery library in your HTML file as follows
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.
• 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
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
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"
SOME MORE EXAMPLES
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.
<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>
For Example :
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.
example
Form Validation 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
NC Complex, Near Bus StandMukkam, Kozhikode,Kerala, India.Ph: + 91 – 495 40 25 550
Start up VillageEranakulam,Kerala, India.
Email: [email protected]