1 / 58

An introduction to

An introduction to. jQuery feels like cheating. jQuery is a fast and concise JavaScript library that simplifies HTML document traversing, event handling, animation, and Ajax interactions for rapid web development. About 29KB in size Minified and Gzipped.

axel-workman
Download Presentation

An introduction to

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. An introduction to

  2. jQuery feels like cheating.

  3. jQuery is a fast and concise JavaScript library that simplifies HTML document traversing, event handling, animation, and Ajax interactions for rapid web development.

  4. About 29KB in size Minified and Gzipped

  5. (function(){var l=this,g,y=l.jQuery,p=l.$,o=l.jQuery=l.$=function(E,F){return new o.fn.init(E,F)}, D=/^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,f=/^.[^:#\[\.,]*$/;o.fn=o.prototype={init:function(E,H) {E=E||document;if(E.nodeType){this[0]=E;this.length=1;this.context=E;return this}if(typeof E==="string") {var G=D.exec(E);if(G&&(G[1]||!H)){if(G[1]){E=o.clean([G[1]],H)}else{var I=document.getElementById(G[3]); if(I&&I.id!=G[3]){return o().find(E)}var F=o(I||[]);F.context=document;F.selector=E;return F}}else {return o(H).find(E)}}else{if(o.isFunction(E)){return o(document).ready(E)}} if(E.selector&&E.context){this.selector=E.selector;this.context=E.context}return this.setArray(o.isArray(E)?E:o. makeArray(E))},selector:"",jquery:"1.3.2",size:function(){return this.length},get:function(E){return E===g?Array.prototype.slice.call(this):this[E]},pushStack:function(F,H,E){var G=o(F);G.prevObject=this;G.context= this.context;if(H==="find"){G.selector=this.selector+(this.selector?" ":"")+E}else{if(H){G.selector=this.selector+". "+H+"("+E+")"}}return G},setArray:function(E){this.length=0;Array.prototype.push.apply(this,E);return this},each:function (F,E){return o.each(this,F,E)},index:function(E){return o.inArray(E&&E.jquery?E[0]:E,this)},attr:function(F,H,G){var E=F;if(typeof F==="string"){if(H===g){return this[0]&&o[G||"attr"](this[0],F)}else{E={};E[F]=H}}return this.each(function(I){for(F in E){o.attr(G?this.style:this,F,o.prop(this,E[F],G,I,F))}})},css:function(E,F){if((E=="width"||E=="height")&&parseFloat(F)<0){F=g}return this.attr(E,F,"curCSS")},text:function(F){if(typeof F!=="object"&&F!=null){return this.empty().append((this[0]&&this[0].ownerDocument||document).createTextNode(F))}var E="";o.each(F||this,function(){o.each(this.childNodes,function(){if(this.nodeType!=8){E+=this.nodeType!=1?this.nodeValue:o.fn.text([this])}})});return E},wrapAll:function(E){if(this[0]){var F=o(E,this[0].ownerDocument).clone();if(this[0].parentNode) {F.insertBefore(this[0])}F.map(function(){var G=this;while(G.firstChild){G=G.firstChild}return G}).append(this)} return this},wrapInner:function(E){return this.each(function(){o(this).contents().wrapAll(E)})} ,wrap:function(E){return this.each(function(){o(this).wrapAll(E)})},append:function(){ return this.domManip(arguments,true,function(E){if(this.nodeType==1){this.appendChild(E)}})},prepend:function() {return this.domManip(arguments,true,function(E){if(this.nodeType==1){this.insertBefore(E,this.firstChild)}})}, before:function(){return this.domManip(arguments,false,function(E){this.parentNode.insertBefore(E,this)})}, after:function(){return this.domManip(arguments,false,function(E){this.parentNode.insertBefore(E,this.nextSibling)})}, end:function(){return this.prevObject||o([])},push:[].push,sort:[].sort,splice:[].splice,find:function(E){if(this.length===1) {var F=this.pushStack([],"find",E);F.length=0;o.find(E,this[0],F);return F}else{return this.pushStack (o.unique(o.map(this,function(G){return o.find(E,G)})),"find",E)}},clone:function(G){var E=this.map(function() {if(!o.support.noCloneEvent&&!o.isXMLDoc(this)){var I=this.outerHTML;if(!I){var J=this.ownerDocument.createElement("div"); J.appendChild(this.cloneNode(true));I=J.innerHTML}return o.clean([I.replace(/ jQuery\d+="(?:\d+|null)"/g,""). replace(/^\s*/,"")])[0]}else{return this.cloneNode(true)}});if(G===true){var H=this.find("*").andSelf(),F=0;E.find ("*").andSelf().each(function(){if(this.nodeName!==H[F].nodeName){return}var I

  6. About 27KB in size Minified and Gzipped Supports CSS 1-3 selectors

  7. About 29KB in size Minified and Gzipped Supports CSS 1-3 selectors IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome

  8. About 29KB in size Minified and Gzipped Supports CSS 1-3 selectors IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome There’s a big community developing plug-ins

  9. About 29KB in size Minified and Gzipped Supports CSS 1-3 selectors IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome There’s a big community developing plug-ins Animation effects, table sorting, drag-and-drop, form validation, AJAX

  10. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Getting Stared</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript“> $(document).ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!"); }); }); </script> </head> <body> <a href="http://wordpress.org/">WordPress</a> </body> </html>

  11. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Getting Stared</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript“> $(document).ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!"); }); }); </script> </head> <body> <a href="http://wordpress.org/">WordPress</a> </body> </html>

  12. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Getting Stared</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript“> $(document).ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!"); }); }); </script> </head> <body> <a href="http://wordpress.org/">WordPress</a> </body> </html>

  13. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Getting Stared</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript“> $(document).ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!"); event.preventDefault(); }); }); </script> </head> <body> <a href="http://wordpress.org/">WordPress</a> </body> </html>

  14. Plays well with others • $(“p”) or $(document)

  15. Plays well with others $(“p”) or $(document) By default, jQuery uses "$" as a shortcut for "jQuery"

  16. Plays well with others $(“p”) or $(document) By default, jQuery uses "$" as a shortcut for "jQuery" Can be used with other framework (like Prototype), which also use $()

  17. Plays well with others jQuery.noConflict(); jQuery(document).ready(function(){ jQuery("div").hide(); }); // Use Prototype with $(...), etc. $('someid').hide();

  18. <a href=“somepage.php” class=“external”>My Johns Hopkins</a> .external { background:url(../images/popout.gif) right top no-repeat; height:12px; padding-right:13px; } $('a.external').click(function(event){ window.open(this.href); });

  19. <a href=“somepage.php” class=“external”>My Johns Hopkins</a> .external { background:url(../images/popout.gif) right top no-repeat; height:12px; padding-right:13px; } $('a.external').click(function(event){ window.open(this.href); });

  20. jQuery UI

  21. jQuery UI

  22. jQuery UI Reference • Interactions • Draggable • Droppable • Sortable • Selectable • Resizable • Widgets • Accordion • Datepicker • Dialog • Progressbar • Slider • Tabs • Effects • Theming • Theming Overview • Theming API • ThemeRoller • jQuery API Reference • jQuery Core • Selectors • Attributes • Traversing • Manipulation • CSS • Events • Effects • Ajax • Utilities • Internals

  23. More on Selectors Element Returns: Array<Element(s)> Matches all elements with the given tag name. $("div").css("border","9px solid red");

  24. More on Selectors Element Returns: Array<Element(s)> Matches all elements with the given tag name. $("div").css("border","9px solid red"); #id Returns: Array<Element> Matches a single element with the given id attribute. $("#myDiv").css("border","3px solid red");

  25. More on Selectors Element Returns: Array<Element(s)> Matches all elements with the given tag name. $("div").css("border","9px solid red"); #id Returns: Array<Element> Matches a single element with the given id attribute. $("#myDiv").css("border","3px solid red"); .class Returns: Array<Element(s)> Matches all elements with the given class. $(".myClass").css("border","3px solid red");

  26. More on Selectors Element Returns: Array<Element(s)> Matches all elements with the given tag name. $("div").css("border","9px solid red"); #id Returns: Array<Element> Matches a single element with the given id attribute. $("#myDiv").css("border","3px solid red"); .class Returns: Array<Element(s)> Matches all elements with the given class. $(".myClass").css("border","3px solid red"); .class.class Returns: Array<Element(s)> Matches all elements with the given classes. $(".myClass.myOtherClass").css("border","3px solid red");

  27. Contextual Selectors & Chaining $("div p").css("border","9px solid red"); All the paragraphs in a div

  28. Contextual Selectors & Chaining $("div p").css("border","9px solid red"); All the paragraphs in a div $(“.post > img").slideDown("slow"); Finds all the images in the element with id #main

  29. Contextual Selectors & Chaining $("div p").css("border","9px solid red"); All the paragraphs in a div $(“.post > img").slideDown("slow"); Finds all the images in the element within the class .post $("tr:first").css("font-style", "italic"); Makes the font style for the first row in a table italicized

  30. Contextual Selectors & Chaining $("div p").css("border","9px solid red"); All the paragraphs in a div $(“.post > img").slideDown("slow"); Finds all the images in the element within the class .post $("tr:first").css("font-style", "italic"); Makes the font style for the first row in a table italicized $(this).not($("#nav > li.on")).removeClass("over"); Demonstrates chaining

  31. <div id="slideshow"> <img src="images/1.jpg" height="200" width="200" alt=“Amy Hopkins" /> <img src="images2.jpg" height="200" width="200" alt=“Jenn Hopkins" /> <img src="images/3.jpg" height="200" width="200" alt="Johns Hopkins" /> </div> $('#slideshow').cycle() jquery.cycle.lite.min.js 4kb http://malsup.com/jquery/cycle/lite/

  32. <div id="slideshow"> <img src="images/1.jpg" height="200" width="200" alt=“Amy Hopkins" /> <img src="images2.jpg" height="200" width="200" alt=“Jenn Hopkins" /> <img src="images/3.jpg" height="200" width="200" alt="Johns Hopkins" /> </div> $('#slideshow').cycle() jquery.cycle.lite.min.js 4kb http://malsup.com/jquery/cycle/lite/

  33. $(document).ready(function(){ $('#nav a').click(function () { $('#content').scrollTo($(this).attr('href'),800); return false; }); }); jquery.scrollTo-1.4.2-min.js 3kb jquery.localscroll-1.2.7-min.js 2kb http://flesler.blogspot.com/2007/10/jqueryscrollto.html

  34. $('.tops').corners("10px top-left top-right"); $('.bottoms').corners("10px bottom-left bottom-right"); $('.rounded').corners("7px"); $('.round').corners("10px"); $('.lefties').corners("10px top-left bottom-left "); jquery.corner.js 8kb not minified http://jquery.malsup.com/corner/

  35. $('.tops').corners("10px top-left top-right"); $('.bottoms').corners("10px bottom-left bottom-right"); $('.rounded').corners("7px"); $('.round').corners("10px"); $('.lefties').corners("10px top-left bottom-left "); $(".page_item").corners("10px top-left bottom-left "); jquery.corner.js 8kb not minified http://jquery.malsup.com/corner/

  36. var XMLHttpRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest( ); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHTTP”); } function getData(dataSource, divID){ if(XMLHttpRequestObject) { var obj = document. getElementById(divID); XMLHttpRequestObject.open(“GET”, dataSource); XMLHttpRequestObject.onreadystatechange = function( ) { if (XMLHttpRequestObject.readyState = = 4 && XMLHttpRequestObject.status = = 200) { obj.innerHTML =XMLHttpRequestObject.responseText; } } <form> <input type=“button” value=“Fetch the message” onclick=“getData(‘message.txt’,‘targetDiv’)”> </form>

  37. $(document).ready(function(){ $("div").load("message.txt"); });

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

  39. var library = { 'name' :‘Enoch Pratt', '@open' : ‘1940-17-7', 'address' : { 'city' : ‘Baltimore', 'zip' : '12345', 'state' : 'MD', 'street' : ‘Cathedral' }, 'books':[ { 'title' : 'Harry Potter', 'isbn' : '1234-1234', 'category' : 'Childrens', 'available' : '3', 'chapters' : [ 'Chapter 1', 'Chapter 2' ] }, { 'title' : 'Brief History of time', 'isbn' : '1234-ABCD', 'category' : 'Science', 'chapters' : [ '1', '2' ] } ]}; JSON (JavaScript Object Notation)

More Related