JQuery notes, jquery
JQuery online manual: http://jquery.bootcss.com/http://www.css119.com/book/jQuery/JQuery code specification: http://bbs.html5cn.org/thread-86001-1-1.htmlJQuery Tutorial Learning Network: http://jqfundamentals.com/chapter/jquery-basicsJQuery Performance Improvement: http://bbs.html5cn.org/thread-84143-1-1.htmlJQuery50 required code snippet: http://jingyan.baidu.com/article/d5a880eb4f0c5d13f147cc2e.htmlHttp://bbs.html5cn.org/thread-85030-1-1.htmlLittle-known methods in jQuery: http://bbs.html5cn.org/thread-83804-1-1.htmlJQuery best practices performance optimization: http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.htmlJQuery various operations form Element Method: http://bbs.html5cn.org/thread-85045-1-1.html When using jQuery, try to use the native CSS3 selector. It may make your code run fast. In this way, the selector engine can use the browser native parser instead of the selector's own.Selector Performance drops from top to bottom: id selector $ ("# id")/$ ("# cont "). find ("div") → tag selector $ ("div")/$ ("input") → class selector $ (". class ") → attribute selector $ (" [attribute = value] ") → pseudo selector $ (": hidden ") 1. addClass () is only used to set styles. attr () can be used to set more attributes, including class. Attr () is a set attribute, and the original attribute will be replaced. The addClass () method adds one or more classes to the selected element. This method does not remove the existing class attribute and only adds one or more class attributes. 2. The mouseover event is triggered no matter the mouse pointer passes through the selected element or its child element. Corresponding to mouseout
The mouseenter event is triggered only when the mouse pointer passes through the selected element. Mouseleave
In this case, the mouseenter sub-element will not trigger events repeatedly, otherwise, flashes often occur in IE.
3. Every time you call the $ (function () {}) method, new behaviors will be applied to existing behaviors. These behavior functions will be executed in the order of registration. 4. If the CDN loading fails, we need to load our local jQuery file. You only need to add the following code to the header:
(1) <script type = "text/javascript" src = "// ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
(2) <script> window. jQuery | document. write ('<script src = "js/jquery-1.11.1.min.js" type = "text/javascript"> <\/script>') </script>
5. $. each () usage: http://www.cnblogs.com/mabelstyle/archive/2013/02/19/2917260.html
$. Map () usage: http://www.css88.com/jqapi-1.9/jQuery.map/
$. Grep () usage: This function must pass at least two parameters: the array to be filtered and the filter function. The filter function must return true to retain the element or false to delete the element.
The difference between $. each () and $. map () is that each returns the original array and does not create a new array. The map method returns a new array. If map is used without any need, memory may be wasted. When each iterates an array, it can be obtained by accessing the this keyword, while map, inside the function, this refers to the window object.
6. Pre-load images
This image preload segment allows you to quickly pre-load images without waiting. The Code is as follows:
JQuery. preloadImagesInWebPage = function (){
For (var ctr = 0; ctr <argument s. length; ctr ++ ){
JQuery (""). attr ("src", argument s [ctr]);
}
}
Call method:
$. PreloadImages ("image1.gif", "image2.gif", "image3.gif ");
Determine whether the image has been loaded:
$ ('# Imageobject'). attr ('src', 'image1.gif'). load (function (){
Alert ('image has been loaded... ');
}); 7. In jQuery, you can use the mouseenter and mouseleave events to avoid the side effects of event bubbling. 8. differences and commonalities between the left offset of js and jq (the top offset is the same): the same value (both refer to the left style of the element and all contain unit px ): $ ("# id" ).css ("left"); documentElementById ("id "). style. left; // get the line style getComputedStyle (documentElementById ("id"), null ). left; // chrome, FFdocumentElementById ("id "). getCurrentStyle. left; // different IE values (excluding unit px): $ ("# id "). offset (). left // The left offset from the current browser window $ ("# id "). position (). left // sets the value documentElementById ("id") of left after position "). offsetLeft // left margin relative to the parent object, including the left outer margin and the inner margin 9. $ (th Is) and this: $ (this) refers to the jQuery object, which can only call jQuery methods and attributes, while this refers to the HTML object, and the js DOM object $ (this) [0] is equivalent to this, both of which can call native js methods and attributes. (1) var $ cr = $ ("# cr"); ar cr = $ cr [0] // convert a jQuery object to a DOM object; (2) var cr = document. getElementById_x_x_x_x_x_x_x_x_x_x_x_x_x_x ("cr"); var $ cr = $ (cr); // convert a DOM object to a jQuery object. 10. attributes with both true and false attributes, such as checked, selected, or disabled using prop (), and others using attr (). 11. Align horizontally and vertically using jQuery (window size change is also applicable): $ (window). resize (function () {$ (". mydiv" ).css ({
Position: "absolute ",
Left: ($ (window). width ()-$ (". mydiv"). outerWidth ()/2,
Top: ($ (window). height ()-$ (". mydiv"). outerHeight ()/2
});
});
In addition, you need to call resize () when loading the page ().
$ (Function (){
$ (Window). resize ();
}); 12. <input type = "text" id = "results"> var content = $ ('# results '). val (); if ($. trim (content) = "") {alert ('null');} if it is written as if (content. trim () = "") in IE, an error is returned. Generally, $. trim (this. value). length <1 is used to determine whether it is null. 13. jQuery implements the drop-down prompt and automatically fills the mailbox: http://bbs.html5cn.org/thread-84263-1-1.html14.innerWidth (): The inner width includes the padding of the element, but does not include the height of the margin (margin), border (border) and other parts. OuterWidth (): by default, the outer width includes the padding and border of the element, but does not include the width of the margin (margin. You can also specify the parameter to true to include the width of the margin (margin. 15. Do not operate on vacant objects. For more information. // BAD: $ ("# nosuchthing "). slideUp (); // GOOD: var $ mySelection = $ ("# nosuchthing"); if ($ mySelection. length) {$ mySelection. slideUp ();} 16. it is also easy to write a custom jQuery function that can be called in a method chain. What you do is to write a function that can modify elements and return elements. The Code is as follows (reusable functions or methods): $. fn. makeRed = function () {return vertex (thisground .css ('background', 'red') ;}$ ('# mytable '). find ('. firstColumn '). makeRed (). append ('hello'); 17. jQuery (function ($) {// you can continue using $ as an alias here}); 18. to create a <input> element, you must set the type attribute at the same time. Because Microsoft requires that the type of the <input> element can be written only once. JQuery code: // invalid in IE: $ ("<input> "). attr ("type", "checkbox"); // valid in IE: $ ("<input t ype = 'checkbox'>"); 19. new jQuery technology details: Deferred objects: http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.htmlHTML5 FormData object: http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html
