J query presentation
Upcoming SlideShare
Loading in...5
×
 

J query presentation

on

  • 207 views

 

Statistics

Views

Total Views
207
Views on SlideShare
207
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

J query presentation J query presentation Presentation Transcript

  • Vikas SharmaInternet Programming
  • 2What is jQuery?• JavaScript Library• Functionality– DOM scripting & event handling– Ajax– User interface effects– Form validation
  • 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
  • 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
  • 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;}
  • 6Example – Show/Hide with jQuery$().ready(function(){$("a").click(function(){$("#more").toggle("slow");return false;});});
  • 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;}
  • 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
  • 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()
  • 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.
  • 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>…
  • 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
  • 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
  • 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
  • Example• JQuery uses chaining as follows$(‘a:contains("ECS")’).parent().addClass("emphasize")
  • JQuery Events• bind(eventname, function) method– ‘click’– ‘change’– ‘resize’• $(“a[@href]”).bind(‘click’,function(){$(this).addClass(‘red’);});
  • 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’
  • 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
  • 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;}
  • 20Example – Show/Hide with jQuery$().ready(function(){$("a").click(function(){$("#more").toggle("slow");return false;});});
  • 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;}
  • 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); });
  • 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}" />
  • Questions?