By Yogita Nirmal Introduction to JQuery JQuery is

-By Yogita Nirmal

Introduction to JQuery

JQuery is a new kind of Javascript library. JQuery is fast and concise Java. Script library that simplifies HTML document traversing, event handling, animating, and ajax interactions for rapid web development. JQuery is designed to change the way that you write javascript. Many of the biggest companies on the Web use j. Query, such as: ØGoogle ØMicrosoft ØIBM ØNetflix

Pre-requisite before learning JQuery

Before you start studying j. Query, you should have a basic knowledge of: q. HTML q. CSS q. Java. Script What is j. Query? j. Query is a lightweight, "write less, do more", Java. Script library. The purpose of j. Query is to make it much easier to use Java. Script on your website. j. Query takes a lot of common tasks that require many lines of Java. Script code to accomplish, and wraps them into methods that you can call with a single line of code.

j. Query also simplifies a lot of the complicated things from Java. Script, like AJAX calls and DOM manipulation. The j. Query library contains the following features: 1. HTML/DOM manipulation 2. CSS manipulation 3. HTML event methods 4. Effects and animations 5. AJAX 6. Utilities Will j. Query work in all browsers? The j. Query team knows all about cross-browser issues, and they have written this knowledge into the j. Query library. j. Query will run exactly the same in all major browsers, including Internet Explorer 6!

How to Add Jquery Library?

Adding j. Query to Your Web Pages There are several ways to start using j. Query on your web site. You can: 1. Download the j. Query library from j. Query. com Downloading j. Query There are two versions of j. Query available for downloading: 1. Production version - this is for your live website because it has been minified and compressed 2. Development version - this is for testing and development (uncompressed and readable code) Both versions can be downloaded from j. Query. com.

The j. Query library is a single Java. Script file, and you reference it with the HTML <script> tag (notice that the <script> tag should be inside the <head> section): <head> <script src="jquery-1. 11. 2. min. js"></script> </head>

Syntax Of JQuery

With j. Query you select (query) HTML elements and perform "actions" on them. The j. Query syntax is tailor made for selecting HTML elements and performing some action on the element(s). Basic syntax is: $(selector). action() A $ sign to define/access j. Query. A (selector) to "query (or find)" HTML elements A j. Query action() to be performed on the element(s) Examples: $(this). hide() - hides the current element. $("p"). hide() - hides all <p> elements. $(". test"). hide() - hides all elements with class="test". $("#test"). hide() - hides the element with id="test".

j. Query Selectors qj. Query selectors allow you to select and manipulate HTML element(s). qj. Query selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. q. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors. q. All selectors in j. Query start with the dollar sign and parentheses: $().

1]The #id Selector The j. Query #id selector uses the id attribute of an HTML tag to find the specific element. An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element. To find an element with a specific id, write a hash character, followed by the id of the HTML element: $("#test") 2]The. class Selector The j. Query class selector finds elements with a specific class. $(". test")

What are Events? All the different visitor's actions that a web page can respond to are called events. An event represents the precise moment when something happens. Examples: moving a mouse over an element selecting a radio button clicking on an element j. Query Syntax For Event Methods In j. Query, most DOM events have an equivalent j. Query method. To assign a click event to all paragraphs on a page, you can do this: $("p"). click(); The next step is to define what should happen when the event fires. You must pass a function to the event: $("p"). click(function(){ // action goes here!! });

$(document). ready() The $(document). ready() method allows us to execute a function when the document is fully loaded. click() dblclick() mouseenter() mouseleave() mousedown() mouseup() hover() focus() blur()

j. Query Callback Functions A callback function is executed after the current effect is 100% finished. Java. Script statements are executed line by line. However, with effects, the next line of code can be run even though the effect is not finished. This can create errors. To prevent this, you can create a callback function. A callback function is executed after the current effect is finished. Typical syntax: $(selector). hide(speed, callback);

Example 1 The example below has a callback parameter that is a function that will be executed after the hide effect is completed: $("button"). click(function(){ $("p"). hide("slow", function(){ alert("The paragraph is now hidden"); }); Example 2 The example below has no callback parameter, and the alert box will be displayed before the hide effect is completed: $("button"). click(function(){ $("p"). hide(1000); alert("The paragraph is now hidden"); });

j. Query Chaining q. With j. Query, you can chain together actions/methods. q. Chaining allows us to run multiple j. Query methods (on the same element) within a single statement. j. Query Method Chaining q. Until now we have been writing j. Query statements one at a time (one after the other). q. However, there is a technique called chaining, that allows us to run multiple j. Query commands, one after the other, on the same element(s). q. Tip: This way, browsers do not have to find the same element(s) more than once. To chain an action, you simply append the action to the previous action.

Example 1 q. The following example chains together the css(), slide. Up(), and slide. Down() methods. The "p 1" element first changes to red, then it slides up, and then it slides down: $("#p 1"). css("color", "red"). slide. Up(2000). slide. Down(2000); q. We could also have added more method calls if needed. q. Tip: When chaining, the line of code could become quite long. However, j. Query is not very strict on the syntax; you can format it like you want, including line breaks and indentations. $("#p 1"). css("color", "red") . slide. Up(2000) . slide. Down(2000); j. Query throws away extra whitespace and executes the lines above as one long line of code.

j. Query - Get Content and Attributes qj. Query contains powerful methods for changing and manipulating HTML elements and attributes. j. Query DOM Manipulation q. One very important part of j. Query is the possibility to manipulate the DOM. qj. Query comes with a bunch of DOM related methods that make it easy to access and manipulate elements and attributes. q. DOM = Document Object Model The DOM defines a standard for accessing HTML and XML documents:

j. Query - Get Content and Attributes qj. Query contains powerful methods for changing and manipulating HTML elements and attributes. j. Query DOM Manipulation q. One very important part of j. Query is the possibility to manipulate the DOM. qj. Query comes with a bunch of DOM related methods that make it easy to access and manipulate elements and attributes. q. DOM = Document Object Model The DOM defines a standard for accessing HTML and XML documents:

Get Content - text(), html(), and val() Three simple, but useful, j. Query methods for DOM manipulation are: text() - Sets or returns the text content of selected elements html() - Sets or returns the content of selected elements (including HTML markup) val() - Sets or returns the value of form fields The following example demonstrates how to get content with the j. Query text() and html() methods:

<!DOCTYPE html> <head> <script src="http: //ajax. googleapis. com/ajax/libs/jquery/1. 11. 2/jquery. min. js"></script> <script> $(document). ready(function(){ $("#btn 1"). click(function(){ alert("Text: " + $("#test"). text()); }); $("#btn 2"). click(function(){ alert("HTML: " + $("#test"). html()); }); </script> </head> <body> <p id="test">This is some <b>bold</b> text in a paragraph. </p> <button id="btn 1">Show Text</button> <button id="btn 2">Show HTML</button> </body> </html>

j. Query - Add, Remove, Empty Elements To remove elements and content, there are mainly two j. Query methods: qremove() - Removes the selected element (and its child elements) qempty() - Removes the child elements from the selected element q. Append()-Appends elements in the exisitng container. Dimension Methods width() height() inner. Width()=width+padding inner. Height()=height+padding outer. Width()=width+padding+border outer. Height()=height+padding+border

j. Query width() and height() Methods q. The width() method sets or returns the width of an element (excludes padding, border and margin). q. The height() method sets or returns the height of an element (excludes padding, border and margin). The following example returns the width and height of a specified <div> element:

<!DOCTYPE html> <head> <script src=“jquery. js"></script> <script> $(document). ready(function(){ $("button"). click(function(){ var txt = ""; txt += "Width of div: " + $("#div 1"). width() + "</br>"; txt += "Height of div: " + $("#div 1"). height(); $("#div 1"). html(txt); }); </script> <style> #div 1 { height: 100 px; width: 300 px; padding: 10 px; margin: 3 px; border: 1 px solid blue; background-color: lightblue; } </style> </head>

<body> <div id="div 1"></div> <button>Display dimensions of div</button> <p>width() - returns the width of an element. </p> <p>height() - returns the height of an element. </p> </body> </html>

Lec 6

What is Traversing? qj. Query traversing, which means "move through", are used to "find" (or select) HTML elements based on their relation to other elements. Start with one selection and move through that selection until you reach the elements you desire. q. The image below illustrates a family tree. With j. Query traversing, you can easily move up (ancestors), down (descendants) and sideways (siblings) in the family tree, starting from the selected (current) element. This movement is called traversing - or moving through - the DOM.

Traversing the DOM Query provides a variety of methods that allows us to traverse the DOM. The largest category of traversal methods are tree-traversal. Traversing Up the DOM Tree Three useful j. Query methods for traversing up the DOM tree are: Øparent() Øparents. Until() j. Query parent() Method q. The parent() method returns the direct parent element of the selected element. q. This method only traverse a single level up the DOM tree.

<html> <head> <style>. ancestors * { display: block; border: 2 px solid lightgrey; color: lightgrey; padding: 5 px; margin: 15 px; } </style> <script src="http: //ajax. googleapis. com/ajax/libs/jquery/1. 11. 2/jquery. min. js"></script > <script> $(document). ready(function(){ $("span"). parent(). css({"color": "red", "border": "2 px solid red"}); </script> </head>

<div class="ancestors"> <div style="width: 500 px; ">div (great-grandparent) <ul>ul (grandparent) <li>li (direct parent) <span>span</span> </li> </ul> </div> <div style="width: 500 px; ">div (grandparent) <p>p (direct parent) <span>span</span> </p> </div> </body> </html>

j. Query parents() Method q. The parents() method returns all ancestor elements of the selected element, all the way up to the document's root element (<html>). q. The following example returns all ancestors of all <span> elements:

<!DOCTYPE html> <head> <style>. ancestors * { display: block; border: 2 px solid lightgrey; color: lightgrey; padding: 5 px; margin: 15 px; } </style> <script src="jquery. js"></script> <script> $(document). ready(function(){ $("span"). parents(). css({"color": "red", "border": "2 px solid red"}); </script> </head>

<body class="ancestors">body (great-grandparent) <div style="width: 500 px; ">div (great-grandparent) <ul>ul (grandparent) <li>li (direct parent) <span>span</span> </li> </ul> </div> </body> <!-- The outer red border, before the body element, is the html element (also an ancestor) --> </html>

j. Query parents() Method q. You can also use an optional parameter to filter the search for ancestors. q. The following example returns all ancestors of all <span> elements that are <ul> elements: $(document). ready(function(){ $("span"). parents("ul"); }); j. Query parents. Until() Method q. The parents. Until() method returns all ancestor elements between two given arguments. q. The following example returns all ancestor elements between a <span> and a <div> element: $(document). ready(function(){ $("span"). parents. Until("div"); });

j. Query Traversing - Descendants q. A descendant is a child, grandchild, great-grandchild, and so on. q. With j. Query you can traverse down the DOM tree to find descendants of an element Traversing Down the DOM Tree Two useful j. Query methods for traversing down the DOM tree are: Øchildren() Øfind()

j. Query children() Method q. The children() method returns all direct children of the selected element. q. This method only traverse a single level down the DOM tree. q The following example returns all elements that are direct children of each <div> elements: <html> <head> <style>. descendants * { display: block; border: 2 px solid lightgrey; color: lightgrey; padding: 5 px; margin: 15 px; }

<script src="jquery. js"></script> <script> $(document). ready(function(){ $("div"). children(). css({"color": "red", "border": "2 px solid red"}); </script> </head> <body> <div class="descendants" style="width: 500 px; ">div (current element) <p>p (child) <span>span (grandchild)</span> </p> </div> </body> </html>

You can also use an optional parameter to filter the search for children. The following example returns all <p> elements with the class name "1", that are direct children of <div>: $(document). ready(function(){ $("div"). children("p. 1"); }); j. Query find() Method 1. The find() method returns descendant elements of the selected element, all the way down to the last descendant. 2. The following example returns all <span> elements that are descendants of <div>:

<html> <head> <style>. descendants * { display: block; border: 2 px solid lightgrey; color: lightgrey; padding: 5 px; margin: 15 px; } </style> <script src=“jquery. js"></script> <script> $(document). ready(function(){ $("div"). find("span"). css({"color": "red", "border": "2 px solid red"}); </script> </head>

< <div class="descendants" style="width: 500 px; ">div (current element) <p>p (child) <span>span (grandchild)</span> </p> </div> </body> </html> Find(*) $(document). ready(function(){ $("div"). find("*"); });

j. Query Traversing - Siblings q. Siblings share the same parent. q. With j. Query you can traverse sideways in the DOM tree to find siblings of an element. Traversing Sideways in The DOM Tree There are many useful j. Query methods for traversing sideways in the DOM tree: siblings() next. All() next. Until() prev. All() prev. Until() First() Last()

j. Query siblings() Method 1. The siblings() method returns all sibling elements of the selected element. 2. The following example returns all sibling elements of <h 2>: <!DOCTYPE html> <head> <style>. siblings * { display: block; border: 2 px solid lightgrey; color: lightgrey; padding: 5 px; margin: 15 px; } </style>

<script src="jquery. js"></script> <script> $(document). ready(function(){ $("h 2"). siblings(). css({"color": "red", "border": "2 px solid red"}); </script> </head> <body class="siblings"> <div>div (parent) <p>p</p> <span>span</span> <h 2>h 2</h 2> <h 3>h 3</h 3> <p>p</p> </div> </body> </html> $(document). ready(function(){ $("h 2"). siblings("p"); });

j. Query next() Method 1. The next() method returns the next sibling element of the selected element. 2. The following example returns the next sibling of <h 2>:

Getting Started with j. Query UI is a widget and interaction library built on top of the j. Query Java. Script Library that you can use to build highly interactive web applications. This guide is designed to get you up to speed on how j. Query UI works.