Front-end Programming Improvement Tour (13)----jquery Selector

jquery represents JavaScript and query, the class library for JavaScript query operations, and jquery is the de facto standard for the Web front end. Recently read "Sharp jquery", found that the most important feature of this book is to discuss in more depth some of the jquery usage scenarios and optimization methods, for a certain jquery experience developers have unique value. This article is Yue Timor read this book, the selector and DOM operation to deepen understanding of the summary.

JavaScript itself contains three major drawbacks:

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

The meaning of jquery is that it solves the top two drawbacks well, and the next drawback is that it has been well addressed in recent years, especially with chrome-led browser makers dramatically improving browser performance and functionality.

jquery code writing style:

jquery Code core features: Do not need to display new objects, chained calls. When chained calls are actually used, it is very convenient to have multiple operations on an object. The downside is that the readability is reduced, so the code needs to follow certain rules.

A single object is more operational, and one action per line is written:

$ (this). Removeclass ("Mouseout").       addclss ("MouseOver").       stop ().       fadeTo ("fast,0.6")       . Unbind (" Click ");

If there is a small number of operations for multiple objects, each object is written in one line, involving child elements, appropriately indented.

$ (this). Removeclass ("Mouseout").       children ("Li"). Show (). End (). siblings (). ADDCLSS ("MouseOver")       . Children ("Li"). Hide ()

jquery objects differ from DOM objects in relation to:

Dom objects can use methods in JavaScript, while jquery objects are objects that are produced after wrapping a DOM object through jquery. If you are a jquery object, you can use the methods in jquery.

If the Fetch object is a jquery object, add $ before the variable:

var domobj = document.getElementsByTagName ("h3") [0]; Dom object var $jQueryObj = $ (domobj);  jquery Object

The jquery object is an array-like object that can be used in two ways to get the corresponding DOM object:

var $CR = $ ("#cr");//The first var cr = $CR [0];//the second var cr $cr. Get (0);

Dom to jquery only needs to use $ () to wrap the DOM object together to get:

var domobj = document.getElementsByTagName ("h3") [0]; Dom object var $jQueryObj = $ (domobj);  jquery Object

However, it is important to note that the above method $ () always gets the object, even if the element is not fetched on the page. As an example:

So at this point, the method of determining whether to contain elements requires judging the length of the object or converting it to a DOM object:

if ($ ("#noExitst"). Length) {        Console.log ("This was an object"),    } else {    Console.log ("There is no DOM element" );    }

high performance using the jquery selector:

jquery Selector The use of various selectors online has been a lot of popular, here mainly from the performance of the discussion selector.

The performance of the selector is mainly taken into account from the combination of jquery source code and JavaScript core method and traversal complexity.

First, the ability to anticipate high performance is a selector that can be used directly from the JavaScript native method. For example, $ ("#id"), $ ("div") have local methods corresponding to it: document.getElementById (),document.getelementbytagname (). While $ (". Class"), $ ("[Attribute=value]"), $ (": hidden"), such selectors do not have local method implementations, mostly using DOM search method to achieve the effect, so from the performance considerations, the latter methods are more harmful.

The overall recommendation is to use the ID selector as much as possible and to specify the context for the selector. Yue Timor's recommendation is to first select the parent element using the ID selector and then choose the label based on the tag Selector. It's a bit like the way CSS uses class before using a hierarchy selector.

jquery constructs a variety of selectors, although convenient to use, but at the expense of performance. So there is no silver bullet in performance and efficiency.

Front-end Programming Improvement Tour (13)----jquery Selector