Tips and tips for 20 popular jquery

1. Optimized the performance of complex selection to query a subset of the Dom. When complicated selection is used, the performance is greatly improved: var subset =$ (""); $ ("input [value ^ =''] ", Subset); 2. Specify context parameters for setting context and improving the performance of jquery's core functions. Specify the context parameter to allow deeper branches from the Dom, instead of starting from the DOM root, jquery. Given a large enough Dom, the specified context parameter is converted to performance improvement. $ ("Input: Radio", document. Forms [0]); 3. The on-site event handler sets any selected element to match the event handler even if it is loaded to the DOM after being added to the initial Page: $ ('button. someclass '). live ('click', somefunction); this allows you to load content through Ajax, or add Event Handlers using JavaScript to set up correctly for these elements automatically. Similarly, to stop on-site event handling: 4. Check that jquery has an index, but it is a pain in using the list of the elements you need and using the element you want var Index = E. g $ ('# ul> li '). index (lidomobject); The following is relatively easy: $ ("Ul> li "). click (function () {var Index = $ (this ). prevall (). length;}); if you want to know the index of an element in a collection, for example, the list item in an unordered list: 5. Jquery's data method jquery's data () method is useful and not well known. It allows you to bind data to DOM elements without modifying the Dom. $ ("Ul> li"). Click (function () {var Index = $ (this). prevall (). Length ;}); 6. Delete the fade-out effect of an element. The basic show effect combines multiple jquery effects to animation and delete DOM elements. $ ("# Mybutton "). click (function () {$ ("# mydiv "). fadeto ("slow", 0.01, function () {// fade $ (this ). slideup ("slow", function () {// slide up $ (this ). remove (); // then remove from the DOM}) ;}); 7. Check whether an element if ($ ("# somediv"). Length) {// Hooray !!! It exists...} uses the following code snippet to check whether an element exists. 8. The dynamically created elements added to the DOM use the following code snippet to dynamically create a div and add it to the Dom. VaR newdiv = $ ('<div> </div>'); newdiv. ATTR ("ID", "mynewdiv"). appendto ("body"); 9. Instead of line breaks and chainability: $ (""). hide (). addclass (). fadein (). hide (); like this can increase Readability: $ (""). hide (). addclass (). fadein (). hide (); 10. Create custom options $. extend ($. expr [':'], {over100pixels: function (a) {return $ (). height ()> 100 ;}}); $ ('. box: over100pixels '). click (function () {alert ('the element you clicked is over 100 pixels high');}); 11. Clone a jquery object using the clone () method. Jquery method to clone any DOM objects in JavaScript. // Clone the divvar cloned =$ ('# somediv'). Clone (); jquery's clone () method does not clone a JavaScript Object. Clone a JavaScript Object and use the following code. // Shallow copyvar newobject = jquery. Extend ({}, oldobject); // deep copyvar newobject = jquery. Extend (true, {}, oldobject); 12. Test. We will use jquery if it is hidden. Hide (). In jquery, the show () method is used to change the visibility of elements. Use the following code to check whether an element is visible or invisible. If ($ (element). Is (": visible") = "true") {// The element is visible} 13. Another method is to prepare the file // instead of $ (document ). ready (function () {// document ready}); // use $ (function () {// document ready}); 14. Select an element. (Period), when its ID is selected using a backslash to select the element, during its ID period. $ ("# Address \. Street"). Text ("enter this field"); 15. Counting directly subelements if you want to calculate all Div # Foo elements exist in <Div id = "foo"> <Div id = "bar"> </div> <Div ID = "Baz"> <Div id = "biz"> </div> <span> </div> // jquery code to count child elements $ ("# foo> Div "). size () 16. Create a "Flash" element jquery. FN. flash = function (color, duration) {var current = this.css ('color'); this. animate ({color: 'rgb ('+ color +') '}, duration/2); this. animate ({color: Current}, duration/2);} // then use the above function as: $ ('# importantelement '). flash ('100, 255 ', 1000); 17. Center element on the screen jquery. FN. center = function () {this.css ("position", "absolute"); this.css ("TOP", ($ (window ). height ()-This. height ()/2 + $ (window ). scrolltop () + "PX"); this.css ("Left", ($ (window ). width ()-This. width ()/2 + $ (window ). scrollleft () + "PX"); return this;} // use the above function as: $ (element ). center (); 18. Obtain the parent Div using the closest method. If you want to find the wrapping Div element (regardless of the div id), you will choose $ ("# searchbox") for jquery "). closest ("Div"); 19. Disabled right-click context menu there are many JavaScript fragments disabled right-click context menu, but jquery makes it easier: $ (document ). ready (function () {$ (document ). BIND ("contextmenu", function (e) {return false ;}); 20. Obtain the X and Y axes of the mouse cursor. The script displays the coordinates of the X and Y values-the mouse pointer. $ (). Mousemove (function (e) {// display the X and Y axis values inside the P element ('p'{.html ("X axis:" + E. pagex + "| Y axis" + E. pagey );});