jquery Optimization Tips

 1. Optimizes the use of IDs and tag selectors;
The fastest speed to access a DOM element is ID, followed by the tag (tag) of the element, followed by category (Class)

2. Use jquery object caching;
So-called object caching is, When using a jquery object, try to save the object name with the variable, and then manipulate the
Example:
$ ("#main") by using the variable's method. CSS ("height", "200px");
$ ("#main"). Click ( function () {});
$ ("#main"). attr ("Checked", true);
The optimized code is:
var obj = $ ("#main"),
Obj.css ("height", "200px");
Obj.click (function () {});
Obj.attr (" Checked ", true);
If you want to make a variable work in another function, you can define it as follows:
//global variable
window.objpub = {
obj:$ ("#main");
}
When using variables to cache jquery objects, there are two points to note:
1. Whether local or global change, to avoid conflict with other variables, as far as possible to name the var $obj = $ ("#main");
2). If the same DOM object has multiple operations, try to optimize the calling code in a chained notation, such as:
$obj. css ("height", "200px"). Click (function () {}). attr ("", "");

3. Give the selector a context;
For example: $ (Expression,[context])
[] The expression is a range, for example:
<div class= ". MyClass" >
<div id= "Div0" ></div>
</div>
$ ("#div0", ". MyClass") is more efficient than $ ("#div0")

4. The selector contains special symbols;
In the page, according to the standard of the consortium, can not contain "#", "(", "[" etc non-standard characters
For example <div id= "div1#" ></div>
The wrong wording: $ ("#div1 #"). html ();
The correct wording: $ ("#div1 #"). html (); You need to escape with ""

5. The selector contains spaces;
For example: $ (". Myclass:hide") is represented as a hidden element under. MyClass;
$ (". Myclass:hide") indicates that the class of the hidden element is. MyClass;

6. Optimize the bubbling phenomenon in the event;
When the page element is nested, if the same event is triggered, the bubbling behavior of the event may be triggered, and the stoppagation can be used to prevent the occurrence of this phenomenon;
Target gets the element that triggers the event

7. Returns the stored data using the data method cache (
1):
Data ("name"),
2) Setting:
("name", "Zhangsan");
3) Removing cached data:
Removedata ("name");
Example: Caching JSON format data
<p><b> data status </b></p>

$ ("P"). Data ("Tmpdata");//Here is empty
$ ("P") . Data ("Tmpdata", {name: "Zhangsan", Age: "A", Sex: "Male"});
$ ("P"). Data ("Tmpdata"). Name;//zhangsan;
$ ("P"). Data ("Tmpdata"). Age;//18;
Cache data must be cleaned up in a timely manner, with special attention to

8.jquery Library conflicts with other libraries
1) jquery imports
before other libraries direct use of jquery, such as jquery (function () {}), transfer of the use of $ to other libraries
2) JQuery is imported after other libraries
using jquery.noconflict ()
/* Method one */
Jquery.noconflict ();
jquery (function () {
JQuery ("#div0"). html ();
});

/* Method Two---Custom shortcuts */
var j = jquery.noconflict ();
J (function () {
J ("#div0"). html ();
});

/* Method Three---Use the $ character */
Jquery.noconflict () in the jquery function,
JQuery (function ($) {
$ ("#div0"). html ();
})

9. Select subquery to optimize the performance;
<div id= "div0"
<ul class= "MyClass"
<li class= "Li0" ><span > Test Elements a </span></li>
<li class= "li1" > test element two </li>
</ul>
</div>

General notation $ ("#div0. MyClass. Li0 span "). HMTL ();
$ ("#div0. MyClass. Li1"). HMTL ();
The above writing efficiency is low, no cache, not conducive to peer query, each time is a new cost;

var $obj = $ ("#div0");
var $objc = $obj. Find (". MyClass");
var $obj Li0 = $OBJC. Find (". Li0");
var $spn = $objli 0.find ("span");
var li0 = $spn. html ();
var objli1 = $objc. Find (". Li1");