Web Front-end study notes, practice (14) performance issues that jquery may need to pay attention

Jquery:

First, we need to understand two tools: Aptana and Web Developer 2010, which are used to intelligently prompt jquery methods. Aptana needs to download an plug-in package, and jquery1.4.1 comes with web.

Jquery-API address: http://api.jquery.com/browser/

Jquery official: http://jquery.com/

Google online version: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

Understanding jquery is just a javascript Framework library for convenient development and elimination of differences between browsers. Here, I will not discuss its history, development, and detailed document structure. I will tell you how to use it in practical use. First, the HTML structure is as follows:

 

 <  Html >       <  Head  > </  Head  >       <  Body  >           <  Div  ID  = "De" class = "hack"  >                 <  Ul  Class = "De"  >                            <  Li  ID  = "Dell" class = "Lo"  > </  Li  >                            <  Li class = "Lo"  > </  Li  >                 </  Ul  >          </  Div  >       </  Body  >  </  Html  > 

 

Id selector:

In jquery, we can get this Dom structure in many ways. For example, $ (". hack "), $ (" # de "), $ (" Div "), etc. In these selectors, which methods should we use to achieve optimal performance? Avoid using tagclassname, such as $ (". hack "); in terms of performance, the class selector is not a native method, while the ID selector is used to obtain elements through Native methods, jquery only encapsulates it. Of course, when you need a class selector, you must use the class selector, such as the table effect and slide advertising effect.

If we want to select multiple elements, how can we use them? You must set an ID from the highest element, and write $ ("# de li") in this way. Of course, in the project, we 'd better use a variable to cache it, for example: var $ deli = $ ("# de li ");

Class selector:

In the example structure, if we want to use the class selector, we can use the tag selector. Its method comes from getelementbytagname () in native Js (). Example:

VaR $ deli = $ ("# de li. Lo ");

Chain Syntax:

When using jquery, you can use powerful chain syntax to achieve your desired purpose. This can make JavaScript files smaller. For example:

VaR $ deli = $ ("# de li. Lo ");

Includeli.css ("color", "Red"). fadein ("slow ");

Query:

Because jquery already has the encapsulated nature, using subqueries can improve the performance. The example is as follows:

VaR $ de = $ ("# de ");

VaR $ li = $ de. Find ("Li. Lo ");

Postponed loading:

For example, the following technologies can be used for animation effects. After page loading is completed, the jquery function is added.

$ (Window). Load (function (){});

Some simple writing methods:

In jquery, the method for loading a function is $ (document). Ready (function () {});, which can be abbreviated as: $ (function (){});

Move the mouse. You can use. Hover (function () {}, function (){});

Click hide to show and hide.Toggle (function () {}, function (){});

For jquery environment configuration, you only need to place the downloaded jquery file in the script tag, for example, <SCRIPT type = "text/JavaScript" src = "JS/jquery. min.1.7.2.js "> </SCRIPT>