jQuery Difference FAQs-1 1.Difference between body.onload() function and document.ready() function used in jQuery S.No 1 body.

onload() We can have only one onload function body.onload() function is called when everything gets loaded on the page that includes DOM, images and all associated resources of the page. document.ready() We can have more than one document.ready() function in a page document.ready() function is called as soon as DOM is loaded

2.Difference between jquery.size() and jquery.length S.No 1 2 Summary: jquery.size() and jquery.length both returns the number of element found in the object. jquery.size() is slower than jquery.length as there is always an overhead in calling a function Reference: http://onlydifferencefaqs.blogspot.in/2012/08/jquery-difference-faqs-1.html $get vs $find in jQuery Difference between $get and $find in jQuery S.No 1 $get $find jquery.size() jquery.size() is slower than jquery.length size() is a method jquery.length jquery.length is faster than jquery.size() length is a property

Shortcut Method: Shortcut Method: $get is the shortcut method for $find is the shortcut method for document.getElementById. Sys.Application.findComponent(id, parent). Signature Signature of $get is $get(id, element) used: Signature used: Signature of $ind is $find(id, parent)

Suitable Controls: When we want to retrieve normal ASP.NET controls like textbox, checkbox, button etc we can use $get.

Suitable Controls: Controls which are extender controls cannot be retrieved through $get. So, Extender controls like ValidatorCalloutExtender, AutoCompleteExtender etc can be retrieved using $find.

Reference: http://onlydifferencefaqs.blogspot.in/2012/09/difference-between-get-and-findin.html Difference between Json Array and Json Object Difference between Json Array and Json Object S.No 1 2 Json Array A JSONArray is an ordered sequence of values. Its external text form is a string wrapped in square brackets with commas separating the values. Json Object A JSONObject is an unordered collection of name/value pairs. Its external form is a string wrapped in curly braces with colons between the names and values, and commas between the values and names.

Example for Json Array [ ] {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"}, {"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"}, {"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}

Example for Json Object {"bindings": [ {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"}, {"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"}, {"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"} ] }; Reference: http://onlydifferencefaqs.blogspot.in/2012/08/difference-between-json-arrayand-json.html

jQuery.map() vs jQuery.each() Difference between jQuery .map and .each S.No 1 jQuery.map() Used as: The map method can be used as an iterator. What it returns ? Map function returns a new array Callback arguments used: map(arr, function(elem, index) {}); jQuery.each() Used as: The each method is meant to be used as an immutable iterator. What it returns ? Each function returns the original array. Callback arguments used: each(arr, function(index, elem) {});

Note: If we overuse the return value of the map function we can potentially waste a lot of memory. Reference: http://onlydifferencefaqs.blogspot.in/2012/09/jquerymap-vs-jqueryeach.html jQuery.find() vs jQuery.filter() Difference between find() and filter() in jQuery S.No 1 jQuery.find() What it does ? Searches through all the child elements in the matched set. Description: Get the descendants of each element in the current set of matched elements, filtered by a selector. jQuery.filter() What it does ? Searches through all elements in the matched set Description: Reduce the set of matched elements to those that match the selector or pass the function's test.

Syntax: .find( selector ) selector: A string containing a selector expression to match elements against. .find( jQuery object ) jQuery object: A jQuery object to match elements against. .find( element ) element: An element to match elements against.

Syntax: .filter( selector ) selector: A string containing a selector expression to match the current set of elements against. .filter( function(index) ) function(index): A function used as a test for each element in the set. this is the current DOM element. .filter( element ) element: An element to match the current set of elements against. .filter( jQuery object ) jQuery object: An existing jQuery object to match the current set of elements against.

Reference: http://onlydifferencefaqs.blogspot.in/2012/09/differencebetween-find-and-filterin.html jQuery.append() vs jQuery.html() Difference between append() and html() in jQuery S.No 1 jQuery.append() .append() add some value with the existing one. jQuery.html() .html() do the same as like .append() but it removes the old value.

Here is an example given to understand the practical difference between .append() and .html(), <ul id="test"> <li>test</li> </ul> Now if .append() is used to add one <li>,as given below <script type="text/javascript>" jQuery("#test").append("<li>test1</li>"); </script> The output of this jQuery will be <ul id="test"> <li>test</li> <li>test1</li> </ul> Now if .html() is used to add one <li>,as provided below <script type="text/javascript>" jQuery("#test").html("<li>test1</li>"); </script> The output of this Script will be <ul id="test"> <li>test1</li> </ul> Here in this example .append() add one extra <li>, whether .html() removes the old one with new one. This is the main difference between .append() and .html() in Jquery

Reference: http://onlydifferencefaqs.blogspot.in/2012/09/jqueryappend-vs-jqueryhtml.html JQuery.find() vs JQuery.children() Difference between find() and children() in jQuery

S.No 1

Jquery.find() What it does ? Search through the matched elements child, grandchild, great-grandchildany levels down.

Jquery.children() What it does ? Search through the matched elements child only (single level down).

Summary: Both find() and children() methods are used to filter the child of the matched elements, except the former is travels any level down, the latter is travels a single level down. Reference: http://onlydifferencefaqs.blogspot.in/2012/09/jqueryfind-vs-jquerychildren.html string array vs numerical array sorting Difference between sorting string array and numerical array in jQuery S.No 1 jQuery.sort() for string array sort() method sorts the string array in alphabetical order. jQuery.sort() for numerical array sort() method does not sort the numerical array in proper order. This is because sort method sorts on the basis of the ASCII values .Hence,the numerical values are not sorted correctly with the sort() method i.e., it considers the ASCII value of the first numerical digit of all numerical values for sorting purposes. To sort numerical values correctly, we must define a comparison function with sort(). Note: Please look at the points below for comparison function process.

To sort string array, there is no need to define a comparison function with sort().But, it is better to have all uniform names. That is, they must begin with either uppercase or lowercase, but not mixed case.

If we define a comparison function, then a pair of values from the array will be repeatedly sent to the function until all elements of the array are processed. In the comparison function, we thus write a statement considering the pair of values passed to it so that the function returns any of the following three values: <0 or="or">0.

 When the function returns value is less than(<) 0, the second value of the pair of array values sent to the function is larger than the first value and hence must be pushed down the sorting order. When the function returns value >0, the first value is larger than the second value, so it must be pushed down the sorting order. When the function returns value =0, it means there is no need to change the sort order since the two values are same. Example: jQuery.sort() for string array $(document).ready(function() { var list= [ "jQuery", "Dojo", "JavaScript", "Ajax"]; $('#alltech').html(list.join("")); list = list.sort(); $('#sorted').html(list.join("")); })

Results: List of Client side technologies jQuery Dojo JavaScript Ajax List of Client side technologies in sorted order Ajax Dojo JavaScript jQuery Example: jQuery.sort() for numerical array without using comparison function $(document).ready(function() { var list= [ 45, 32, 98, 24, 16, 9, 3]; $('#allnumber').html(list.join("")); list = list.sort(); $('#sorted').html(list.join("")); })

Results: Numbers in Array before sorting 45 32

98 24 16 9 3 Numbers in Array After sorting 16 24 3 32 45 9 98 Well, the numerical values are not sorted correctly with the sort() method because as mentioned earlier that it considers the ASCII value of the first numerical digit of all numerical values for sorting purposes. To sort numerical values correctly, we must define a comparison function with sort(). Example: jQuery.sort() for numerical array with comparison function $(document).ready(function() { var list= [ 45, 32, 98, 24, 16, 9, 3]; $('#allnumber').html(list.join("")); list = list.sort(function(a,b){ return a-b; }); $('#sorted').html(list.join("")); })

Results: Numbers in Array before sorting 45 32 98 24 16 9 3 Numbers in Array After sorting 3 9 16 24

32 45 98 Reference: http://onlydifferencefaqs.blogspot.in/2012/09/string-array-vs-numerical-arraysorting.html jQuery.live() vs jQuery.delegate() Difference between jQuery live() and delegate() S.No 1 jQuery.live() Whether it can be used with chaining or not ? live() cannot be used with chaining .So, the below thing cannot be done, $ (#foo).children(table).find(td ).live(click, function(){ blah blah... }); 2 Performance: Live() default context is document. so it bubble till document which cause the performance issue. But, in jQuery 1.4 , option is provided to define context for live other than document as given below, $(a, $(#mytable) [0]).live(click, function(){ blah blah... }); Note: Context is defining the search limit to bubble to top level of element. Summary: 1. Both live() and delegate() are used to attach event to current element and future elements which we append after DOM loaded e.g. we load some table rows using ajax. 2. By considering performance factor,so it is better to use delegate all the time instead of live() and bind(). jQuery.delegate() Whether it can be used with chaining or not ? delegate() can be used with chaining as provided below, $ (#foo).children(table).delegate(tr , click, function(){ blah blah... }); Performance: In delegate we can set context which cause less traverse $(#mytable).delegate(a,click, function(){ blah blah... });

Reference: http://onlydifferencefaqs.blogspot.in/2012/09/jquerylive-vs-jquerydelegate.html clientX/Y vs pageX/Y in jQuery Difference between jQuery mouse event clientX/Y & pageX/Y S.No 1 ClientX/Y What is the function of this event ? It gives us x,y offset of the mouse click point relative to top left browser's view port regardless of the scrolling. For example, our browser window view port size 1024x820 px, the maximum value of clientX/clientY would be 1024 px/820 px irrespective of the document size. PageX/Y What is the function of this event ? It gives us x,y offset of the mouse click point relative to top left of the document regardless of the scrolling.

Example: $(document).click(function(e){ alert(e.clientX); alert(e.clientY); alert(e.pageX); alert(e.pageY); }); Reference: http://onlydifferencefaqs.blogspot.in/2012/09/clientxy-vs-pagexy-in-jquery.html mouseout() vs mouseleave() in jQuery Difference between mouseout and mouseleave in jQuery S.No 1 mouseout() Does it bubble the event ? By deault, in mouseout there is no event bubbling. mouseleave() Does it bubble the event ? In mouseleave the events bubble by default.

Example: Consider the following example,

1. When we point the cursor of the mouse over the red area where the div is and there is an attached event listener for mouseout of that div, something like divElement.onmouseout = doSomething;, where this is of course pseudo code, and 2. When we point the mouse over the a-tag yet again the mouseout of the div doesnt fire. Thats because of the event bubbling in JavaScript where if one element receives the event, in this case the a tag has the mouse over it, the event bubbles to the parent element and then to the parent of the parent and so forth to the document root. Why $.mouseout does not bubble the event ? In JQuery the mouseout doesnt bubble and there comes the problem with the schema from the image. If we have, $('div').mouseout(); and we point to the a-tag even it is inside the div, the mouseout event fires. Now this seems strange. Our mouse is over that element but jQuery says us that it is out! What is the solution for event bubbling to take place automatically ? OR Which event can be used to handle the above scenario ? OR Which event can replace the mouseout to handle the above scenario? This is easy and mouseleave helps us enter with the mouse over the a-tag and still the mouseleave event doesnt fire. But if we move the mouse outside the div and we point the body, now this seems normal. Reference: http://onlydifferencefaqs.blogspot.in/2012/09/mouseout-vs-mouseleave-injquery.html