About jquery Reference Example 2.0 using jquery to select elements _ basics

From jquery Cookbook (O ' Reilly 2009) Chapter 2 selecting Elements with jquery, 2.0 Introduction

The core of jquery is its selector engine, which is used to filter elements from the document by name, attribute, status, and so on. Because of the extensive use of CSS, the use of CSS selector syntax in jquery is a natural choice. In addition to supporting selectors in the vast majority of css1-3 specifications, jquery also adds a number of custom selectors to select elements based on some special states, while at the same time we can write our own selectors.

The easiest way to locate an element or element in a document is to use the jquery encapsulation function and the CSS selector, such as:

JQuery(' #content p a ');  Select a element in the P element in all #content elements   

After selecting the good elements, you can invoke the jquery method on those elements. For example, add the selected class attribute on all selected link elements:

JQuery(' #content p a ').  AddClass(' selected ');      

jquery provides a number of ways to traverse the DOM tree to help select elements, such as Next (), Prev (), parent (), and so on. These methods take a selector expression as its only parameter, filtering the set of selected elements. So, in addition to jquery (...), CSS selectors can be used in many places.

In building a selector, to improve its performance, you can follow a rule that simplifies the authoring of selectors as much as possible. The more complex the selector string, the longer the jquery processing time. jquery uses the native Dom method of the browser to select elements, so selecting an element directly with a selector is simply a result of an abstract encapsulation. There is nothing wrong with directly using the selector itself, but it is important to understand the execution performance of the code being written. The following is an example of an overuse selector:

JQuery(' body div#wrapper div#content ');  

More precise positioning does not mean that the code is running faster. The above selectors can be overridden as:

JQuery(' #content ');  

Compared with the previous example, the code works the same, but it saves a lot of performance overhead. It is noteworthy that sometimes we can further improve performance by specifying the context background of the selector.