J Query

JQueryBy

Susheel Kumar Sharma

JQuery

• Powerful JavaScript library– Simplify common JavaScript tasks– Access parts of a page– Modify the appearance of a page– Alter the content of a page– Change the user’s interaction with a page– Add animation to a page– Provide AJAX support– Abstract away browser quirks

The DOM

• Document Object Model

• jQuery is “DOM scripting”

• Heirarchal structure of a web page

• You can add and subtract DOM elements on the fly

• You can change the properties and contents of DOM elements on the fly

The DOM Cont..• “The Document Object Model (DOM) is a cross-platform and language-

independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Aspects of the DOM (such as its "Elements") may be addressed and manipulated within the syntax of the programming language in use.”

The Ready Function

• Set up a basic HTML page and add jQuery• Create a “ready” function• Call a function

– $(document).ready(function(){…};);– jquery().ready(function(){…};)– jquery(function(){…};)– jquery(dofunc);– $(dofunc);

Selecting ElementsCreating a “wrapped set”

• $(selector)• selector:

• $(‘#id’) id of element• $(‘p’) tag name• $(‘.class’) CSS class• $(‘p.class’) <p> elements having the CSS class• $(‘p:first’) $(‘p:last’) $(‘p:odd’) $(‘p:even’)• $(‘p a’) <a> elements, descended from a <p>• $(‘p>a’) <a> elements, direct child of a <p>• $(‘p+a’) <a> elements, directly following a <p>• $(‘p, a’) <p> and <a> elements• $(‘li:has(ul)’) <li> elements that have at least one <ul> descendent• $(‘:not(p)’) all elements but not <p> elements• $(‘p:hidden’) only <p> elements that are hidden

$(‘p:empty’) <p> elements that have no child elements $(‘a’[href^=http://]) <a> elements with an href attribute starting with ‘http://’

$(‘a’[href$=.pdf]) <a> elements with an href attribute ending with ‘.pdf’

$(‘a’[href*=ntpcug]) <a> elements with an href attriute containing ‘ntpcug’

Filters

p:first first paragraphli:last last list itema:nth(3) fourth linka:eq(3) fourth linkp:even or p:odd every other paragrapha:gt(3) or a:lt(4) every link after the 4th or

up to the fourtha:contains(‘click’) links that contain the

word click

Useful Functions

• .each() iterate over the set• .size() number of elements in set• .end() reverts to the previous set• .get(n) get just the nth element (0 based)• .eq(n) get just the nth element (0 based) also .lt(n) & .gt(n)• .slice(n,m) gets only nth to (m-1)th elements• .not(‘p’) don’t include ‘p’ elements in set• .add(‘p’) add <p> elements to set• .remove() removes all the elements from the page DOM• .empty() removes the contents of all the elements• .filter(fn/sel) selects elements where the func returns true or sel• .find(selector) selects elements meeting the selector criteria• .parent() returns the parent of each element in set• .children() returns all the children of each element in set• .next() gets next element of each element in set• .prev() gets previous element of each element in set• .siblings() gets all the siblings of the current element

Formatting Elements

• .css(property, value)-Get the value of a style property for the first element in the set of matched elements

• .html()-Get the HTML contents of the first element in the set of matched elements.

• .val() (form elements)-Get the current value of the first element in the set of matched elements.

• .text()-Get the combined text contents of each element in the set of matched elements, including their descendants.

• .addClass(‘class’)

• .removeClass(‘class’)

Add Page Elements

• $(‘#target’).before(‘<p>Inserted before #target</p>’);• $(‘#target’).after(‘<p>This is added after #target</p>’);• $(‘#target’).append(‘<p>Goes inside #target, at end</p>’);• $(‘#target’).wrap(‘<div></div>’);

Adding Events

• Mouseover events – bind, hover, toggle

• Button click events

• Keystrokes

Event Methods

• .stopPropagation()-Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

• .preventDefault()-if this method is called, the default action of the event will not be triggered

• .trigger(eventType)-Execute all handlers and behaviors attached to the matched elements for the given event type.

• .click(), blur(), focus(), select(), submit()• With no parameter, invokes the event handlers, like

trigger does, for all the elements in the wrapped set

Shortcut Event Binding

• .click(func)• .submit(func)• .dblclick(func)• .mouseover(func)• .mouseout(func)• .select(func)

AjaxPerform an asynchronous HTTP (Ajax) request.

AJAX = Asynchronous JavaScript and XML.

AJAX is a technique for creating fast and dynamic web pages.

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

How AJAX Works?

function showHint(str){var xmlhttp;if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; }if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } }xmlhttp.open("GET","gethint.asp?q="+str,true);xmlhttp.send();}

AJAX In Javascript

AJAX In JQuery

Exp-1

$.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } });

Exp - 2.

$.ajax({ url: "test.html", cache: false, success: function(html){ $("#results").append(html); }});