The document discusses jQuery, a JavaScript library that simplifies common tasks like accessing and modifying elements on an HTML page. It covers how jQuery interacts with the DOM and allows selecting elements, modifying styles and content, and handling events. The document also provides examples of how jQuery can be used to make AJAX requests to retrieve and display external data without reloading the page.

1. JQuery By Susheel Kumar Sharma

2. 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

3. 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

4. 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.”

5. 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);

6. Selecting Elements Creating 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’

7. Filters p:first first paragraph li:last last list item a:nth(3) fourth link a:eq(3) fourth link p:even or p:odd every other paragraph a:gt(3) or a:lt(4) every link after the 4th or up to the fourth a:contains(‘click’) links that contain the word click

8. 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

9. 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’)‏

10. 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>’);

11. Adding Events Mouseover events – bind, hover, toggle Button click events Keystrokes

12. Event Methods .stopPropagation()- Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event. .preventDefault()-i f 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

13. Shortcut Event Binding .click(func)‏ .submit(func)‏ .dblclick(func)‏ .mouseover(func)‏ .mouseout(func)‏ .select(func)‏

14. Ajax Perform 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.

15. How AJAX Works?

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

17. AJAX In JQuery Exp-1 $.ajax({ type: &quot;POST&quot;, url: &quot;some.php&quot;, data: &quot;name=John&location=Boston&quot;, success: function(msg){ alert( &quot;Data Saved: &quot; + msg ); } }); Exp - 2. $.ajax({ url: &quot;test.html&quot;, cache: false, success: function(html){ $(&quot;#results&quot;).append(html); } });