1, always inherit from ID selector
The fastest selector in jquery is the ID selector, as it comes directly from the getElementById () method of JavaScript.
For example, there is a section of HTML code:
Copy Code code as follows:
<div id= "Content" >
<form method= "POST" action= "#" >
<ul id= "Traffic_light" >
<li><input type= "Radio" class= "on" name= "Light" value= "red"/> Red </li>
<li><input type= "Radio" class= "Off" name= "light" value= "yellow"/> Yellow </li>
<li><input type= "Radio" class= "Off" name= "Light" value= "green"/> </li>
</ul>
<input class= "button" id= "Traffic_button" type= "submit" value= "Go"/>
</form>
</div>
If you use the following selector, then efficiency is inefficient.
var Traffic_button = $ ("#content. Button");
Because the button already has an ID, we can use the ID selector directly. As shown below:
var Traffic_button = $ ("#traffic_button");
Of course, this is only for a single element. If you need to select multiple elements, this necessarily involves DOM traversal and looping,
To improve performance, it is recommended that you inherit from the most recent ID.
As shown below:
var traffic_lights = $ ("#traffic_light input");
2, use tag (sign) before class
The second fastest selector in jquery is the tag (tag) selector (for example: $ ("Head").
When tired with the ID selector, because it comes from the native getElementsByTagName () method.
Continue to look at the HTML code just now:
Copy Code code as follows:
<div id= "Content" >
<form method= "POST" action= "#" >
<ul id= "Traffic_light" >
<li><input type= "Radio" class= "on" name= "Light" value= "red"/> Red </li>
<li><input type= "Radio" class= "Off" name= "light" value= "yellow"/> Yellow </li>
<li><input type= "Radio" class= "Off" name= "Light" value= "green"/> </li>
</ul>
<input class= "button" id= "Traffic_button" type= "submit" value= "Go"/>
</form>
</div>
For example, you need to select the Red and green Radio box,
Then you can use a tag name to limit (modify) class, as follows:
var active_light = $ ("Input.on");
Of course, you can also combine the nearest ID, as follows:
var active_light = $ ("#traffic_light Input.on");
when using tag to modify class, we need to be aware of the following points:
(1) Do not use tag to decorate the ID, as follows:
var content = $ ("div#content");
This way, the selector first iterates through all the DIV elements and then matches the #content.
(as jquery has changed the selector core from 1.3.1, this is not the problem.) Temporarily unable to verify. ）
(2) Do not use the superfluous ID to decorate the ID, as follows:
var traffic_light = $ ("#content #traffic_light");
Note: If you use the property selector, try to decorate it with tag as follows:
$ (' p[row= "c3221"]). HTML () instead of: $ (' [row= ' c3221 '] '). html ();
3, caching the jquery object
Caching jquery objects tells us to get into the habit of caching jquery objects into variables.
The following is a new handwritten piece of jquery code:
Copy Code code as follows:
$ ("#traffic_light Input.on"). Bind ("click", Function () {...});
$ ("#traffic_light Input.on"). CSS ("Border", "1px dashed yellow");
$ ("#traffic_light Input.on"). CSS ("Background-color", "orange");
$ ("#traffic_light Input.on"). FadeIn ("slow");
But remember not to do so.
We should first cache the object into a variable and then manipulate it, as follows:
Copy Code code as follows:
var $active _light = $ ("#traffic_light Input.on");
$active _light.bind ("click", Function () {...});
$active _light.css ("Border", "1px dashed yellow");
$active _light.css ("Background-color", "orange");
$active _light.fadein ("slow");
Remember, never let the same selector appear more than once in your code.
Note: (1) to distinguish between common JavaScript objects and jquery objects, you can add the $ symbol to the first letter of the variable.
(2) The above code can be improved using jquery chain operations. As shown below:
Copy Code code as follows:
var $active _light = $ ("#traffic_light Input.on");
$active _light.bind ("click", Function () {...})
. CSS ("Border", "1px dashed yellow")
. CSS ("Background-color", "orange")
. FadeIn ("slow");
If you intend to use jquery objects in other functions, you must cache them in the global environment.
As shown in the following code:
Copy Code code as follows:
Defines an object (for example: Window object) in the global scope
window. $my = {
Head: $ (' head '),
Traffic_light: $ ("#traffic_light"),
Traffic_button: $ ("#traffic_button")
};
function do_something () {
Now you can refer to the stored results and manipulate them
var script = document.createelement ("script");
$my. Head.append (script);
When you operate inside a function, you can continue to store the query in the global object.
$my. Cool_results = $ ("#some_ul Li");
$my. Other_results = $ ("#some_table TD");
Use global functions as a common jquery object.
$my. Other_results.css ("Border-color", "Red");
$my. Traffic_light.css ("Border-color", "green");
}
You can also use it in other functions
jquery Performance Tuning Guide (1) To this end, please review the Guide (2).
