0 basic html5-jquery (2) Selector-

The selector selecor in jQuery is a powerful feature that is frequently used. In fact, jQuery provides us with a wealth of techniques to use selector to locate DOM elements. The following describes how to select all elements of a selector instance * $ (& amp; quot; * & amp; quot ...,. The selector selecor in jQuery is a powerful feature that is frequently used. In fact, jQuery provides us with a wealth of techniques to use selector to locate DOM elements. The following describes the usage

Selector instance Selection

* $ ("*") All elements

# Id $ ("# lastname") id = "lastname" element

. Class $ (". intro") All class = "intro" Elements

Element $ ("p") All

Element

. Class. class $ (". intro. demo") All class = "intro" and class = "demo" Elements

: First $ ("p: first") first

Element

: Last $ ("p: last") last

Element

: Even $ ("tr: even") All even numbers

Element

Dd $ ("trdd") All odd

Element

: Eq (index) $ ("ul li: eq (3)") The fourth element in the list (index starts from 0)

: Gt (no.) $ ("ul li: gt (3)") list elements with an index greater than 3

: Lt (no) $ ("ul li: lt (3)") list elements whose index is less than 3

: Not (selector) $ ("input: not (: empty)") All input elements not empty

: Header $ (": header") All header Elements

-

: All animation elements of animated

: Contains (text) $ (": contains ('str')") contains all elements of the specified string

: Empty $ (": empty") all elements of nodes without child (element)

: Hidden $ ("p: hidden") All hidden

Element

: Visible $ ("table: visible") all visible tables

S1, s2, s3 $ ("th, td,. intro") All elements with matching Selection

[Attribute] $ ("[href]") All elements with the href attribute

[Attribute = value] $ ("[href = '#']") the value of all href attributes is equal to the element "#".

[Attribute! = Value] $ ("[href! = '#'] ") The values of all href attributes are not equal to those "# ".

[Attribute $ = value] $ ("[href?='.jpg ']") the values of all href attributes include elements ending with ". jpg"

: Input $ (": input") All elements

: Text $ (": text") all elements of type = "text"

: Password $ (": password") All type = "password" Elements

: Radio $ (": radio") All type = "radio" Elements

: Checkbox $ (": checkbox") All types = "checkbox" Elements

: Submit $ (": submit") All type = "submit" Elements

: Reset $ (": reset") All type = "reset" Elements

: Button

$ (": Button") all elements of type = "button"

: Image

$ (": Image") All types = "image" Elements

: File $ (": file") All types = "file" Elements

: Enabled $ (": enabled") All activated input Elements

: Disabled $ (": disabled") All disabled input Elements

: Selected $ (": selected") All selected input Elements

: Checked $ (": checked") All selected input Elements

Although selector is the most commonly used and basic function of Jquery, few developers may consider using different selectors to solve performance problems. Here we will introduce several common selectors and their performance differences.

1. $ ("# id ")

Using id to locate DOM elements is undoubtedly the best way to improve performance, because the bottom layer of jQuery will directly call the local method document. getElementbyId (). If you are familiar with javascript, you should know that this method will directly return the corresponding element through the element id.

Of course, if this method cannot directly find the elements you need, you can consider calling the. find () method. As follows:

$ ("# Gbid"). find ("p ")

The preceding method can effectively narrow down the DOM elements you have located.

2. $ ("p"), $ ("p"), $ ("input ")

Using the label name is the second optimization option, because jQuery will directly call the local method document. getElementsByTagname () to locate the DOM element.

3. $ (". class ")

Use. the class method is a little more complex for us. For newer browsers such as IE9, it supports the local method document. getElementsByClassName (). For older browsers, such as IE8 or earlier versions, you have to use DOM search to achieve this. This naturally has a big impact on performance. So you have to choose to use it.

4. $ ("[attribute = value]")

The local javascript method does not directly implement DOM elements using attributes. Most of them use the DOM search method to achieve the effect. Many modern browsers support the querySelectorAll () method, but the performance of different browsers is different. In general, it is not ideal to use this method to locate DOM elements. Therefore, in order to achieve better optimization results, you must try to avoid using this method that is harmful to performance.

5. $ (": hidden ")

Similar to the way in which attributes are used to locate the DOM, this pseudo selector does not have a local js method for direct implementation. In addition, jQuery needs to search for every element to locate this selector, which will bring a great performance problem to your application. So try not to use it. Of course, if you want to use it, first use the find method to locate the parent element and then use this selector, which will help you optimize performance, as follows: $ ("# gbp "). find (": hidden ")

The above is a basic selector rule, with top-down performance decreasing in turn. If you use selector in development, please follow the above simple optimization performance rule.

The above is the content of the jquery (2) selector of html5. For more information, see PHP Chinese Network (www.php1.cn )!