Improvement of front-end programming (13th) ---- jquery Selector

Improvement of front-end programming (13th) ---- jquery Selector

Jquery represents javascript and query, which is the class library for javascript query operations. jquery is a fact standard in the web Front-end field. I recently read "sharp jquery" and found that the biggest feature of this book is that a deeper discussion of jquery's usage situations and optimization methods is of unique value to developers who have some experience using jquery. This is a summary of Letti's reading of this book, which provides a deeper understanding of selector and DOM operations.

Javascript contains three major drawbacks:

Complex Document Object Model (DOM) Inconsistent browser implementation and convenient development Lack of debugging tools

The significance of Jquery lies in its solution to the first two drawbacks. The latter disadvantage has been well solved by browser vendors, especially chrome, who have greatly improved the browser performance and functions.

Jquery coding style:

Core features of jquery code: new objects and chained calls are not required. In actual use, chained call is very convenient for multiple operations on an object. The bad thing is that the readability is reduced, so certain rules must be followed for writing code.

There are many operations on a single object. Write one operation per line:

$(this).removeClass("mouseout")       .addClss("mouseover")       .stop()       .fadeTo("fast,0.6")       .unbind("click");

If a small number of operations are performed on multiple objects, each object writes a row involving child elements and is indented as appropriate.

$(this).removeClass("mouseout")       .children("li").show().end() .siblings().addClss("mouseover")       .children("li").hide()

Differences and relationships between jquery objects and DOM objects:

DOM objects can use methods in javascript, while Jquery objects are generated after DOM objects are packaged by Jquery. If it is a jquery object, you can use the method in jquery.

If the retrieved object is a jquery object, add $:

Var domObj = document. getElementsByTagName ("h3") [0]; // Dom object var $ jQueryObj = $ (domObj); // jQuery object

The jquery object is an array-like object. You can get the corresponding dom object in two ways:

Var $ cr = $ ("# cr"); // first var cr = $ cr [0]; // second var cr $ cr. get (0 );

To convert DOM to jquery, you only need to use $ () to wrap the DOM object:

Var domObj = document. getElementsByTagName ("h3") [0]; // Dom object var $ jQueryObj = $ (domObj); // jQuery object

However, you must note that the above method $ () always gets objects, even if no elements are obtained on the webpage. Example:

To determine whether an object contains elements, You need to determine the object length or convert it to a DOM object:

if ($("#noExitst").length) {        console.log("this is an object");    } else {    console.log("there is no DOM element");    }

High-performance jquery selector:

Jquery selectors are widely used on the Internet. Here we mainly discuss the performance of selectors.

The performance of selector mainly involves the combination of jquery source code and javascript core methods and the traversal complexity.

First, it is foreseeable that a high-performance method is a selector that can directly use the javascript local method. For example, $ ("# id") and $ ("div") all have local methods corresponding to them: document. getElementById (),Document. getElementByTagName (). And $ (". class "), $ (" [attribute = value] "), $ (": hidden ") are not implemented using local methods. Most of them use DOM search to achieve the effect, therefore, these methods are harmful in terms of performance.

We recommend that you use the ID selector whenever possible and specify the context for the selector whenever possible. We recommend that you use the ID selector to select the parent element and then select a tag Based on the tag selector. It is a bit similar to the method of using class first and then using level selector in css.

Multiple selectors constructed by jquery are easy to use, but they sacrifice performance. Therefore, there is no silver bullet in performance and efficiency.