Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to jQuery
Similar to jQuery (20)
More from Vishwa Mohan
Recently uploaded
Recently uploaded (20)
jQuery
- 1. jQuery Writes less, Do More Ch. Vishwa Mohan Freelance Software Consultant & Corporate Trainer
- 2. Table of Contents jQuery Introduction jQuery Basics jQuery Core Events Animation AJAX Plugins
- 4. Evolution
- 6. Browser differencesWriting JavaScript code is tedious, time-consuming and error prone.
- 8. Apply methods to sets of DOM elements.
- 9. Builder model (chain method calls)
- 10. Extensible and there are tons of libraries
- 13. What is DOM ? There are four levels of standardized Document Object Model (DOM): Level 0 Level 1 Level 2 Level 3 The DOM Level 2 combines both DOM Level 1 and 2. It provides methods to access and manipulate style sheet elements, and provides further access to page elements relating to XML. This Level 2 have six different recommendations: DOM2 Core DOM2 HTML DOM2 Style/CSS DOM2 Events DOM2 Traversal and Range DOM2 Views
- 14. What is jQuery ? jQuery is not a language, it is a well written Java Script code. Fast and Concise. Simplifies the interaction between HTML and Java Script. It’s syntax is same as JavaScript Syntax. jQuery helps, Improve the performance of the application. Develop most browser compatible web page. Implement UI related critical functionality. Fast Extensible Microsoft is shipping jQuery with Visual Studio. jQuery supports intellisense in Visual Studio 2010 and with 2008 SP1. You can download latest version (1.6.1) of jQuery library at http://docs.jquery.com/Downloading_jQuery
- 15. Why jQuery ? Lightweight : 31KB in size as per v1.6.1 (Minified and Gzipped) CSS 1–3 Complaint Cross Browser support (IE 6.0, Fire Fox 2, Safari 3.0+, Opera 9.0, Chrome) jQuery allows you to elegantly (and efficiently) find and manipulate the HTML elements with minimum code. jQuery commands can be chained together. jQuery is “DOM Scripting” Great CommunityPlugins TutorialsTestCoverage Open (free) licenseBooks
- 17. jQuery Dominating Google trends comparison of JS Framework in last 12 months.
- 18. How to Embed jQuery in your Page By assigning your jQuery script file to the “src” property of script tag. <html> <head> <script src=“path/to/jquery-x.x.js"></script> <script> $(document).ready(function(){ // Start here }); </script> </head> <body> … </body> </html> To link jQuery remotely instead of hosting in your server: <script type="text/javascript“ src="http://ajax.googleapis.com/ajax/libs/ jquery/1.4.0/jquery.min.js?ver=1.4.0"></script> jQuery Code
- 20. jQuery Basics
- 21. jQuery Philosophy The below is the illustration of how jQuery works: { Find Some Elements $(“div”).addClass(“xyz”); } Do something with them jQuery Object
- 24. The Ready Function With the help of jQuery ready() function, you can detect the state of readiness of your document to execute java script. The code included inside $(document).ready() will only run once the page is ready for JavaScript code to execute. $(document).ready(function() { console.log('ready!'); }); Inside the ready function the script will be executed when DOM is ready. You can also pass named function instead of anonymous function. 5 different ways to specify the ready function jquery(document).ready(function(){…..};); jquery().ready(function(){….};) jquery(function(){ ….};) jquery(dofunc); $(dofunc);
- 25. jQuery Core
- 27. $(“#elmtID”); //Selecting elements by ID. ID must be unique.
- 28. $(“div.myClass”); //Selecting elements by class name.
- 29. $(‘input[name=myName]’); //Selecting elements by attribute.
- 30. $(‘input[name$=myName]’); //Selecting elements it attribute ends with myName. Choosing the good selector can improve the performance of your selector. To test whether the specified selection contain elements or not. if ($('div.foo').length) { ... } //If no elements it returns 0 and evaluates false.
- 32. $("#myElmtD"); // selects one HTML element with ID "myElement"
- 33. $(".myClass"); // selects HTML elements with class "myClass"
- 34. $("p#myElmtID"); // selects HTML paragraph element with ID "myElement"
- 36. $("input[type=text]"); // selects inputs that have specified type
- 37. $("a:first"); // selects the first anchor on the page
- 38. $("p:odd"); // selects all odd numbered paragraphs
- 40. $(":button"); // Selects any button elements (inputs or buttons)
- 41. $(":radio"); // Selects radio buttons
- 42. $(":checkbox"); // Selects checkboxes
- 43. $(":checked"); // Selects checkboxes or radio buttons that are selected
- 44. $(":header"); // Selects header elements (h1, h2, h3, etc.)
- 45. $(":disabled"); // Selects disabled form elements. (Enabled also there)
- 46. $(":img"); // Select inputs with type=“image”.
- 47. $(":file"); // Select inputs with type=“file”.
- 50. $(‘p’) tag name.
- 52. $(‘p.class’) <p> elements having the CSS class
- 54. $(‘p:eq(2)’) gets the 2nd <p> element (1 based)
- 55. $(‘p’)[1] gets the 2nd <p> element (0 based)
- 56. $(‘p:nth-child(3)) gets the 3rd <p> element of the parent. n=even, odd too.
- 57. $(‘p:nth-child(5n+1)’) gets the 1st element after every 5th one
- 58. $(‘p a’) <a> elements, descended from a <p>
- 59. $(‘p>a’) <a> elements, direct child of a <p>
- 60. $(‘p+a’) <a> elements, directly following a <p>
- 61. $(‘p, a’) <p> and <a> elements
- 62. $(‘li:has(ul)’) <li> elements that have at least one <ul> descendent
- 63. $(‘:not(p)’) all elements but <p> elements
- 64. $(‘p:hidden’) only <p> elements that are hidden
- 65. $(‘p:empty’) <p> elements that have no child elements
- 67. $(‘a’[href$=pdf]) //Select <a> elmt with an href attribute ending with pdf
- 70. $.each()
- 71. $.proxy() //Returns a function that will always run in the provided scope.
- 72. $.inArray() //Return a value’s index in an Array.
- 73. $.extend() //Change the properties of the first object using properties // of subsequent objects. There are few cases the $.fn namespace and jQuery core name space methods have same name. (Eg: $.each and $.fn.each).
- 78. $('li.selected').siblings();You can also iterate over a selection using $fn.each() function. This function iterates over all elements in a selection. The function receives the index of the current element and the DOM element itself as arguments Inside the function, the DOM element is available as this by default. $('#myListli').each(function(idx, el) { console.log('Element ' + idx + 'has the following html: ' + $(el).html() ); });
- 80. Here $ is another character there is no special meaning for it.
- 81. It is a convention and not mandatory.
- 82. Once you stored in variable you can call jQuery method on it.
- 84. Setters affects all elements in a selection.
- 86. .size() number of elements in set
- 87. .end() reverts to the previous set
- 88. .get(n) get just the nth element (0 based)
- 89. .eq(n) get just the nth element (0 based) also .lt(n) & .gt(n)
- 90. .slice(n,m) gets only nth to (m-1)th elements
- 91. .not(‘p’) don’t include ‘p’ elements in set
- 92. .add(‘p’) add <p> elements to set
- 93. .remove() removes all the elements from the page DOM
- 94. .empty() removes the contents of all the elements
- 95. .filter(fn/sel) selects elements where the func returns true or sel
- 96. .find(selector) selects elements meeting the selector criteria
- 97. .parent() returns the parent of each element in set
- 98. .children() returns all the children of each element in set
- 99. .next() gets next element of each element in set
- 100. .prev() gets previous element of each element in set
- 102. $("div").removeClass("content"); // removes class "content" from all <div> elmts
- 105. $("#myElemt").css("color", "blue") // makes text color blue on element #myElemt
- 106. $("ul").css("border", "solid 1px #ccc") // adds a border to all lists
- 107. $(“h1").css(‘fontSize’, ‘100px’); // Setting an individual property.
- 108. $(“h1").css(‘fontSize’, ‘100px’, ‘color” : ‘red”); // Setting multiple properties. Instead of changing CSS styles via hardcode you can apply CSS class on elements. It is a better approach (No hard code). var$h1 = $('h1'); $h1.addClass(‘myClass'); //removeClass and toggleClass is also there. You can also find any particular CSS class applied for a given element: if ($h1.hasClass('myClass')) { ... }
- 112. $fn.attr(); //Get or set the value of the provided attribute.
- 113. $fn.val(); //Gets or sets the value of an form element.
- 114. $fn.width(); //Gets or sets the width in pixels of the first element in the // selection as an integer. Height is also there.
- 116. $fn.after(); //Places the element provided as an argument after the //selected element.
- 117. $fn.insertBefore();
- 118. $fn.before();
- 119. $fn.appendTo();
- 120. $fn.append();
- 121. $fn.prependTo();
- 122. $fn.prepend(); The below is a simple jQuery code make the first list item the last list item. var $li = $('#myListli:first').appendTo('#myList');
- 123. Removing Elements There are two ways to remove elements from the page. They are $.fn.removeand $.fn.detach. The remove function will remove the selections from the page; while the method does returns the removed element(s). The detach function will persist the data and events. There is a one more function empty, it simply remove its contents but leaves the elements on the page.
- 127. focus,
- 128. hover,
- 129. keydown,
- 130. load,
- 131. mousemove,
- 132. resize,
- 133. scroll,
- 134. submit,
- 136. Type Checking There are set of jQuery core methods define to check for non-primitive types. $.isFunction(); $.isArray(); $.isPlainObject();
- 137. jQuery Events
- 139. These event handlers, can’t be relied upon to run on any particular order.
- 140. When triggered, the event propagates from the top down(capture phase) or bottom up (bubble phase).
- 146. $(‘img’).hover(mouseover, mouseout);Sometimes it can be useful to namespaces your events so you don’t unintentionally disconnect events that you don’t know about it. (Specially using in plug-ins). $('p').bind('click.myNamespace', function() { /* ... */ }); $('p').unbind('click.myNamespace'); $('p').unbind('.myNamespace'); // unbind all events in the namespace
- 149. .submit(func)
- 150. .dblclick(func)
- 151. .mouseover(func)
- 152. .mouseout(func)
- 154. In addition to event object the event handler also has access to DOM element that that handler was bound via the key word ‘this’. To turn the DOM element into jQuery object by simply doing $(this).var $this = $(this); Eg: $('a').click(function(e) { var $this = $(this); if ($this.attr('href').match('evil')) { e.preventDefault(); $this.addClass('evil'); } });
- 156. type //The type of event eg: “click”
- 157. which //The button or the key that was pressed.
- 158. data //Any data that was passed as second param of bind func.
- 159. target // The DOM element that initiated the event. Triggering elmt
- 160. target.id // Event triggering element ID.
- 161. currentTarget //
- 162. preventDefault() //Prevents the default action of event. Eg: following a link.
- 163. stopPropagation() //Stop the event from bubbling up to other elements. In addition to above properties you can find various mouse coordinate and key stroke related properties.
- 165. this.id
- 166. this.tagName
- 167. this.attr
- 168. this.src
- 169. this.classname
- 170. this.title
- 171. this.alt
- 173. .preventDefault() no <a> link, no <form> submit
- 174. .trigger(eventType) does not actually trigger the event, but calls the appropriate function specified as the one tied to the eventType
- 175. .click(), blur(), focus(), select(), submit()
- 177. .show()display:true
- 178. .toggle(func1, func2) first click calls func1, next click executes func2
- 180. Event Delegation With event delegation, you can increase the performance of your code. With event delegation, you bind your event to a container element, and then when the event occurs, you look to see which contained element it occurred on. To support above delegation jQuery provides $.fn.live and $.fn.delegatemethods.
- 183. If you pass two functions, the fist will run for mouse enter, and the second will run for mouse leave. The $.fn.toggle method receives two or more functions; each time the event occurs, the next function in the list is called. Generally, $.fn.toggle is used with just two functions, but technically you can use as many as you'd like. $('p.expander').toggle( function() { $(this).prev().addClass('open');}, function() { $(this).prev().removeClass('open'); } );
- 184. jQuery Animations
- 185. Effects jQuery makes it trivial to add simple effects to your page. Effects can use the built-in settings, or provide a customized duration. Frequently used effects are built into jQuery as methods. They are: $.fn.show//Show the selected element. (Eg: $(‘h1’).show();) $.fn.hide//Hide the selected elements. $.fn.fadeIn//Animate the opacity of the selected element to 100%. $.fn.fadeOut//Animate the opacity of the selected element to 0%. $.fn.slideDown//Display the selected elements with a vertical sliding motion. $.fn.slideUp//Hide the selected elements with a vertical sliding motion. $.fn.slideToggle//Show or hide the selected elements with a vertical sliding. Except $.fn.showand $.fn.hide, all of the built-in methods are animated over the course of 400ms by default. You can also change the duration of effect. $('h1').fadeIn(300); // fade in over 300ms $('h1').fadeOut('slow'); // using a built-in speed definition jQuery has an object at jQuery.fx.speeds that contains the default speed, as well as settings for "slow" and "fast". You can also create custom animations of arbitrary CSS properties
- 187. $.fn.delay//Waits for specified time before running next animation. $('h1').show(300).delay(1000).hide(300);
- 188. Easing Easing describes the manner in which an effect occurs -- whether the rate of change is steady, or varies over the duration of the animation. jQuery includes only two methods of easing: swing and linear. In addition various easing plug-in’s are available. As of jQuery 1.4, it is possible to do per-property easing when using the $.fn.animate method. $('div.funtimes').animate( { left : ["+=50", "swing" ], opacity : [ 0.25, "linear" ] }, 300);
- 189. AJAX
- 191. The XMLHttpRequest method (XHR) allows browsers to communicate with the server without requiring a page reload.
- 192. jQuery provides Ajax support that abstracts away painful browser differences.
- 193. jQuery offers both a full-featured $.ajax() method, and simple convenience methods such as $.get(), $.getScript(), $.getJSON(), $.post(), and $().load().
- 194. Most of jQuery applications use XML and they transport data as plain HTML and JSON.
- 195. In general, Ajax does not work across domains.
- 197. GET requests may be cached by the browser.
- 200. html // To transport blocks of HTML to be placed on the page.
- 201. script // Adding new script to the page.
- 202. json // To transport JSON-formatted data.
- 203. jsonp // To transport JSON data from another domain.
- 207. Cache //Whether to use cached response if available. Default is true for all //data types except script and jsonp.
- 208. Complete //Function to run after completion of request for (success or failure).
- 209. Context //The scope which callback functions would run.
- 210. Data //Data to be sent to server, it can be object or query string.
- 211. dataType //Type of data expect from server. Not specified look for MIME type.
- 212. Error //If request fails this callback function will be called.
- 213. Jsonp // Callback name to send in a query string making a jsonp request.
- 214. Success // If request success this function will be executed.
- 215. Timeout //Time to wait in milliseconds before saying request is failed.
- 216. Traditional //Specify to set serialization style.
- 217. Type //Specify the request type GET, POST, PUT and DELETE.
- 219. $.post() //Performs a POST request to the provided URL.
- 221. url//Required. The URL for the request.
- 222. data //Optional. The data can be sent to server. It can be object //or query string (Eg: foo=bar&baz=bim)
- 223. scucesscallback//Optional. A callback routine need to run on succes
- 225. In addition to providing a URL to the method, you can optionally provide a selector; jQuery will fetch only the matching content from the returned HTML.The following example is a jQuery way to run a script from a script file. $.getScript('/static/js/myScript.js', function() { functionFromMyScript(); });
- 227. $.fn.serializeArray()Turning form data into query string: $('#myForm').serialize(); Creating an array of objects containing form data $('#myForm'). serializeArray();
- 228. Working with jsonp jQuery handles all the complex aspects of JSONP behind-the-scenes -- all we have to do is tell jQuery the name of the JSONP callback parameter specified by "callback“, and otherwise the whole process looks and feels like a normal Ajax request.
- 229. AJAX Events Ajax also supports set of events such as ajax request start or stop events. These events are useful for showing or hiding a loading indicator. The following are the list of AJAX events: Start Stop The following is a Setting up loading indicator. It can be used for all Ajax events: $('#loading_indicator') .ajaxStart(function() { $(this).show(); }) .ajaxStop(function() { $(this).hide(); });
- 230. jQuery Plugins
- 233. Thank You !