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
21. jQuery Philosophy The below is the illustration of how jQuery works: { Find Some Elements $(“div”).addClass(“xyz”); } Do something with them jQuery Object
22.
23.
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);
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.
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() ); });
79.
80. Here $ is another character there is no special meaning for it.
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')) { ... }
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.
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
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'); } });
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.
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.
181.
182.
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'); } );
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
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);
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.
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(); });
226.
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(); });
