Download presentation
Presentation is loading. Please wait.
1
.
2
WHAT IS JQUERY JQuery is a fast, small, and feature-rich JavaScript library. Simplifies the interaction between HTML and JavaScript. It makes things like HTML document (DOM) traversal manipulation event handling animation and Ajax JQuery is a easy-to-use API that works across a multitude of browsers
3
WHY JQUERY Lightweight : 19KB in size (Minified and Gzipped)
CSS1 - 3 Complaint Cross Browser (IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome)
4
JQUERY IS CROSS-BROWSER
A huge issue facing JavaScript is that no two browsers handle JavaScript in the same way. The way you locate page elements so you can work with them in code varies from browser to browser in a way that makes programmers’ hair stand on end. jQuery puts an end to that worry by giving you a common set of functions across all browsers.
5
WHO’s USING JQUERY
6
MOST POPULAR LIBRARIES
YUI Prototype Dojo Jquery Mootools ExtJS Underscore
7
INITIAL REQUIREMENTS DOM HTML JAVASCRIPT
A scripting language(client side mostly) DOM The way browser manipulates a web page in memory HTML A markup language for web page
8
ADVANTAGES DOM MANIPULATION DOM element selections functions
DOM traversal and modification CROSS BROWSER CSS manipulation EVENT MANAGEMENT SIMPLIFIED AJAX EFFECTS AND ANIMATIONS
9
DOM TREE
10
JQUERY IN YOUR PAGE <html> <head>
<script src="path/to/jquery-x.x.js"></script> <script> $(document).ready(function(){ // Start here }); </script> </head> <body> … </body> </html>
11
JQUERY PHILOSOPHY
12
$(“div”).addClass(“xyz”);
JQUERY PHILOSOPHY } FIND SOME ELEMENTS } $(“div”).addClass(“xyz”); Do something with them jQuery Object
13
JQUERY HELLO WORLD EXAMPLE
<html> <head> <title>jQuery Hello World</title> <script type="text/javascript" src="jquery js"></script> </head> <script type="text/javascript"> $(document).ready(function(){ $(“p").html("Hello World !! (display due to jQuery)"); }); </script> <body> <p></p> </body> </html>
14
EASIER TO WRITE JQUERY THAN
PURE JAVASCRIPT
15
JQUERY SELECTORS The jQuery selectors are one of the main feature in jQuery library. These selectors uses CSS syntax to allow page developer to easily identify the elements of page to operate upon with jQuery library methods. Note: For using JQuery library most effectively, you must be familiar with jQuery selectors. Syntax pattern of jQuery selector : $(selector).methodName(); The selector is a string expression that identify the element on which the method has to be implemented. Examples $("p").click(); $("p").hide();
16
JQUERY AND SELECTORS Selector Name Description #id ID Selector
Selects a single element with the specified ID. element Type Selector Selects all elements with the specified name. .class Class Selector Selects all elements with the specified class. * All Selector Selects all elements. selector1, selector2, selectorN Multiple /Compound selector Selects the combined results of all the selectors. ancestor descendant descendant Selects all elements that are descendants of a given ancestor. A descendant of an element could be a child, grandchild, great-grandchild, and so on, of that element. parent > child Child Selector Selects all direct child elements specified by child of elements specified by parent. previous + next next adjacent selector Selects all next elements matching "next" that are immediately preceded by a sibling "prev".
17
JQUERY / DOM COMPARISON
18
JQUERY / DOM COMPARISON
19
JQUERY / DOM COMPARISON
20
JQUERY AND ATTRIBUTE SELECTORS
Description E[a] Selects all the elements E that have an attribute 'a' of any value. E[a=v] Selects all the elements E that have an attribute 'a' whose value is exactly 'v'. E[a^=v] Selects all the elements E that have an attribute 'a' whose value starts with 'v'. E[a$=v] Selects all the elements E that have an attribute 'a' whose value ends with 'v'. E[a*=v] Selects all the elements E that have an attribute 'a' whose value contains 'v'.
21
JQUERY DOM MANIPULATION
Once you’ve used selectors and filters to retrieve web page content , you usually want to do something with it. Some times you want to create new content to dynamically add into the page. JQuery has functions for creating, copying, deleting and moving content around, as well as wrapping page content in other content. JQuery provides cross-browser support for working with CSS , including positioning and sizing information.
22
CREATING, SETTING AND GETTING CONTENT
To create new HTML content , you simply pass a string containing new HTML to the $() function. var newHeader = $(“<h1>My New Header</h1>”); var myStr = “<h1>My New Header</h1>”; var newHeader = $(myStr); In addition to this method , you can use html() and text() method to get and set content on
23
ELEMENTS CONTENT EXAMPLE
html(): <div id=”header”> <em>HEADER</em> </div> // Returns ‘<em>HEADER</em> var theHtml = $(‘#header’).html(); $(‘#header’). html(‘<ul><li>One</li></ul>’); <ul><li>One</li></ul>
24
ELEMENTS CONTENT EXAMPLE (contd.)
val(): <input id=” ” type=‘text’ value=‘foo bar’ /> // Returns ‘foo bar’ $(‘# ’).val(); // Sets value to ‘The value’ $(‘# ’).val(‘The value’); <input id=” ” type=‘text’ value=‘The value’ />
Similar presentations
