J query presentation

  • 80 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
80
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Vikas SharmaInternet Programming
  • 2. 2What is jQuery?• JavaScript Library• Functionality– DOM scripting & event handling– Ajax– User interface effects– Form validation
  • 3. 3Why jQuery?• Lightweight – 14kb (Minified andGzipped)• Cross-browser support (IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+)• CSS-like syntax – easy fordevelopers/non-developers tounderstand• Active developer community• Extensible - plugins
  • 4. JQuery• Powerful JavaScript library– Simplify common JavaScript tasks– Access parts of a page• using CSS or XPath-like expressions– 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
  • 5. 5Example – Show/Hide the old way<a href="#" onclick="toggle_visibility(foo);">Click here to togglevisibility of #foo</a>function toggle_visibility(id) {var e = document.getElementById(id);if(e.style.display == block)e.style.display = none;elsee.style.display = block;}
  • 6. 6Example – Show/Hide with jQuery$().ready(function(){$("a").click(function(){$("#more").toggle("slow");return false;});});
  • 7. Introductory Sample<html><body><h1>Cities of the World</h1><dl><dt>Paris</dt><dd>Chic,fashionable, expensiverude</dd><dt>Sydney</dt><dd>Operahouse but no culture, MardiGras, fireworks</dd></dl></body></html>h1 {font-size: 2.5em;margin-bottom: 0;}.emphasize {font-style:italic; color:red;}
  • 8. Basic JQuery• Selecting part of document isfundamental operation• A JQuery object is a wrapper for aselected group of DOM nodes• $() function is a factory method thatcreates JQuery objects• $(“dt”) is a JQuery object containing allthe “dt” elements in the document
  • 9. Basic JQuery• .addClass() method changes the DOM nodesby adding a ‘class’ attribute– The ‘class’ attribute is a special CSS construct thatprovides a visual architecture independent of theelement structures• $(“dt”).addClass(“emphasize”) will change alloccurrences of <dt> to<dt class=“emphasize”>• See also .removeClass()
  • 10. Basic JQuery• To make this change, put it in a function andcall it when the document has been loadedand the DOM is createdfunction doEmph(){$(“dt”).addClass(“emphasize”)}<body onLoad=“doEmph()”>• We had to alter the HTML (bad)• Structure and appearance should beseparated!• Also, onLoad waits until all images etc areloaded. Tedious.
  • 11. Basic JQuery• JQuery provides an independent schedulingpoint after DOM is created and before imagesare loaded– $(document).ready(doEmph);• No HTML mods required. All done in script.• Better solution:– $(document).ready(function(){$(“dt”).addClass(“emphasize”)}); <html><head><script src="jquery.js" type="text/javascript"></script><script src="test.js" type="text/javascript"></script>…
  • 12. JQuery Selectors• CSSp element name#id identifier.class classnamep.class element with classp a anchor as any descendant of pp > a anchor direct child of p
  • 13. JQuery Selectors• XPath/html/body//div pathsa[@href] anchor with anhref attrdiv[ol] div with an ol inside//a[@ref=nofollow] any anchor with aspecific value for the ref attribute
  • 14. JQuery Filtersp: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 orup to the fourtha:contains(‘click’) links that contain theword click
  • 15. Example• JQuery uses chaining as follows$(‘a:contains("ECS")’).parent().addClass("emphasize")
  • 16. JQuery Events• bind(eventname, function) method– ‘click’– ‘change’– ‘resize’• $(“a[@href]”).bind(‘click’,function(){$(this).addClass(‘red’);});
  • 17. Other JQuery Effects• .css(‘property’, ‘value’)• .css({‘prop1’:‘value1’, ‘prop2’:’value2’…})• E.g. .css(‘color’, ‘red’)• .hide(speed) or .show(speed)– Where speed is ‘slow’, ‘normal’ or ‘fast’
  • 18. More JQuery Changes DOM• .attr({‘name’, ‘value’})– sets a new attribute (or many)• $(‘<i>hello</i>’)– Creates a new element• $(‘<i>hello</i>’).insertAfter(‘div.chapter p’);– Creates element and inserts it into the document• .html() or .text() or .empty() will replace matchedelements with newly created elements
  • 19. 19Example – Show/Hide the old way<a href="#" onclick="toggle_visibility(foo);">Click here totoggle visibility of #foo</a>function toggle_visibility(id) {var e = document.getElementById(id);if(e.style.display == block)e.style.display = none;elsee.style.display = block;}
  • 20. 20Example – Show/Hide with jQuery$().ready(function(){$("a").click(function(){$("#more").toggle("slow");return false;});});
  • 21. 21Example – Ajax the old wayfunction GetXmlHttpObject(handler) {var objXmlHttp = null; //Holds the local xmlHTTP object instance//Depending on the browser, try to create the xmlHttp objectif (is_ie){var strObjName = (is_ie5) ? Microsoft.XMLHTTP : Msxml2.XMLHTTP;try{objXmlHttp = new ActiveXObject(strObjName);objXmlHttp.onreadystatechange = handler;}catch(e){//Object creation erroredalert(Verify that activescripting and activeX controls are enabled);return;}}else{// Mozilla | Netscape | SafariobjXmlHttp = new XMLHttpRequest();objXmlHttp.onload = handler;objXmlHttp.onerror = handler;}//Return the instantiated objectreturn objXmlHttp;}
  • 22. 22Example – Ajax with jQuery$.get(“controller/actionname", { name: "John", time: "2pm" },function(data){ alert("Data Loaded: " + data); });$.post(“controller/actionname", { name: "John", time: "2pm" },function(data){ alert("Data Loaded: " + data); });
  • 23. 23Example – Form Validation$().ready(function(){// validate the comment form when it is submitted$("#commentForm").validate();});<input id="cname" name="name" class="some other styles {required:true,minLength:2}" /><input id="cemail" name="email" class="{required:true,email:true}" />
  • 24. Questions?