WHAT IS JQUERY JQuery is

.

WHAT IS JQUERY • JQuery is a fast, small, and feature-rich Java. Script library. • Simplifies the interaction between HTML and Java. Script. • 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

WHY JQUERY • Lightweight : 19 KB in size (Minified and Gzipped) • CSS 1 - 3 Complaint • Cross Browser – (IE 6. 0+, FF 2+, Safari 3. 0+, Opera 9. 0+, Chrome)

JQUERY IS CROSS-BROWSER • A huge issue facing Java. Script is that no two browsers handle Java. Script 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. • j. Query puts an end to that worry by giving you a common set of functions across all browsers.

WHO’s USING JQUERY

MOST POPULAR LIBRARIES • • YUI Prototype Dojo Jquery Mootools Ext. JS Underscore

INITIAL REQUIREMENTS • JAVASCRIPT – A scripting language(client side mostly) • DOM – The way browser manipulates a web page in memory • HTML – A markup language for web page

ADVANTAGES • DOM MANIPULATION – DOM element selections functions – DOM traversal and modification • CROSS BROWSER – CSS manipulation • EVENT MANAGEMENT • SIMPLIFIED AJAX • EFFECTS AND ANIMATIONS

DOM TREE

…

JQUERY PHILOSOPHY

JQUERY PHILOSOPHY FIND SOME ELEMENTS } } $(“div”). add. Class(“xyz”); Do something with them j. Query Object

JQUERY HELLO WORLD EXAMPLE

EASIER TO WRITE JQUERY THAN PURE JAVASCRIPT

JQUERY SELECTORS The j. Query selectors are one of the main feature in j. Query library. These selectors uses CSS syntax to allow page developer to easily identify the elements of page to operate upon with j. Query library methods. Note: For using JQuery library most effectively, you must be familiar with j. Query selectors. • • Syntax pattern of j. Query selector : $(selector). method. Name(); • The selector is a string expression that identify the element on which the method has to be implemented. • Examples $("p"). click(); $("p"). hide();

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. selector 1, selector 2, selector. N Multiple /Compound selector Selects the combined results of all the selectors. ancestor descendant selector 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 adjacent selector Selects all next elements matching "next" that are immediately preceded by a sibling "prev".

JQUERY / DOM COMPARISON

JQUERY / DOM COMPARISON

JQUERY / DOM COMPARISON

JQUERY AND ATTRIBUTE SELECTORS Selector 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'.

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.

CREATING, SETTING AND GETTING CONTENT • To create new HTML content , you simply pass a string containing new HTML to the $() function. var new. Header = $(“My New Header”); var my. Str = “My New Header”; var new. Header = $(my. Str); • In addition to this method , you can use html() and text() method to get and set content on

ELEMENTS CONTENT EXAMPLE html():

• One

ELEMENTS CONTENT EXAMPLE (contd. ) val(): // Returns ‘foo bar’ $(‘#email’). val(); // Sets value to ‘The value’ $(‘#email’). val(‘The value’);