Previous performance optimizations have said that the ID selector is the fastest speed. So in HTML code, you can use IDs as much as possible instead of class.
Look at one of the following examples:
Create a listvar $myList = $ (' #myList ');var mylistitems = ' <ul> ';for (i = 0; i < 1000; i++) {Mylistitems + = ' <li class= ' listItem ' + i + ' ' >this is a list item</li> '; The class is used here.}Mylistitems + = ' </ul> ';$myList. HTML (mylistitems);Select each Lifor (i = 0; i < 1000; i++) {var SelectedItem = $ ('. ListItem ' + i);}
At the end of the code, in the process of selecting each Li, it took a total of 5066 milliseconds, more than 5 seconds.
And then we'll do a comparison with ID instead of class:
Create a listvar $myList = $ (' #myList ');var mylistitems = ' <ul> ';for (i = 0; i < 1000; i++) {Mylistitems + = ' <li id= ' listItem ' + i + ' ' >this is a list item</li> '; The ID is used here}Mylistitems + = ' </ul> ';$myList. HTML (mylistitems);Select each Lifor (i = 0; i < 1000; i++) {var SelectedItem = $ (' #listItem ' + i);}
The jquery selector has a selector that specifies the context.
JQuery (expression, context);
This is the added method after the jQuery1.3.1 version, which is the function of dynamically binding events for the new DOM element.
But for efficiency, this approach is more resource intensive. So please try not to use it.
For example, there is a piece of code:
<script type= "Text/javascript" >$ (function () {$ ("P"). Click (function () {Alert ($ (this). text ());});$ ("button"). Click (function () {$ (' <p>this is second p</p> '). Appendto ("body");});}) </script><body><p>this is p</p> <button>add</button></body>
After running, you will find the new P element, and not be bound to the Click event.
You can fix the problem by changing to. Live ("click"), the code is as follows:
$ (function () {$ ("P"). Live ("Click", Function () {//change to Live modeAlert ($ (this). text ());});$ ("button"). Click (function () {$ (' <p>this is second p</p> '). Appendto ("Body");})
But I do not recommend this, I want to solve the problem in another way, the code is as follows:
$ (function () {$ ("P"). Click (function () {Alert ($ (this). text ());});$ ("button"). Click (function () {$ ("<p>this is second p</p>"). Click (function () {/) rebind once for the new elementAlert ($ (this). text ());}). Appendto ("body");});})
Although I've written back the binding event again, the code is a little bit more efficient than the live () way,
This is particularly noticeable in the frequent dom operations.
11, child selector and descendant selector
Descendant selectors are often used, such as: $ ("#list P");
The descendant selector gets all the elements inside the element.
Sometimes the descendant selector should not be used as long as the child element is actually acquired.
You should use a child selector with the following code:
$ ("#list > P");
12, using the data () method to store temporary variables
Here's a very simple piece of code,
$ (function () {
var flag = false;
$ ("button"). Click (function () {
if (flag) {
$ ("P"). Text ("true");
Flag=false;
}else{
$ ("P"). Text ("false");
Flag=true;
}
});
})
With the data () method instead, the code is as follows:
$ (function () {
$ ("button"). Click (function () {
if ($ ("P"). Data ("flag")) {
$ ("P"). Text ("true");
$ ("P"). Data ("flag", false);
}else{
$ ("P"). Text ("false");
$ ("P"). Data ("flag", true);
}
});
})
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
