1. Optimize performance of complex selectorsQuery a subset of the DOM when using complex selectors drastically improves performance:
2. Set Context and improve the performanceOn the core jQuery function, specify the context parameter when. Specifying the context parameter allows jQuery to start from a deeper branch in the DOM, rather than from the DOM root. Given a large enough DOM, specifying the context parameter should translate to performance gains.
3. Live Event HandlersSet an event handler for any element that matches a selector, even if it gets added to the DOM after the initial page load:
Likewise, to stop the live event handling:
4. Checking the IndexjQuery has .index but it is a pain to use as you need the list of elements and pass in the element you want the index of
if you want to know the index of an element within a set, e.g. list items within a unordered list:
5. Use jQuery data methodjQuery’s data() method is useful and not well known. It allows you to bind data to DOM elements without modifying the DOM.
6. Fadeout Slideup effect to remove an elementCombine more than one effects in jQuery to animate and remove an element from DOM.
7. Checking if an element existsUse following snippet to check whether an element exists or not.
8. Add dynamically created elements into the DOMUse following code snippet to create a DIV dynamically and add it into the DOM.
9. Line breaks and chainabilityInstead of doing:
10. Creating custom selectors
12. Test if something is hidden using jQueryWe use .hide(), .show() methods in jquery to change the visibility of an element. Use following code to check the whether an element is visible or not.
13. Alternate way of Document Ready
14. Selecting an element with . (period) in its IDUse backslash in the selector to select the element having period in its ID.
15. Counting immediate child elementsIf you want to count all the DIVs present in the element #foo
16. Make an element to “FLASH”
17. Center an element on the Screen
18. Getting Parent DIV using closestIf you want to find the wrapping DIV element (regardless of the ID on that DIV) then you’ll want this jQuery selector:
20. Get mouse cursor x and y axisThis script will display the x and y value – the coordinate of the mouse pointer.
//display the x and y axis values inside the P element
"X Axis : "
+ e.pageX +
" | Y Axis "