JQuery selector

Any operation of the page needs the support of nodes. How to find the specified node quickly and efficiently is also a key point in front-end development. JQuery provides a series of selectors to help developers achieve this goal, allowing developers to focus less on complex selection processes and performance optimization and more on writing business logic.

JQuery supports almost all the mainstream cSS1 to CSS3 selectors, so we’ll start with the simplest and most common ones

Id selector: an ID used to find the element’s ID attribute

$( “#id” )

Id selectors are also basic selectors, and jQuery internally uses the JavaScript function document.getelementById () to handle id fetching. Native syntax support is always efficient, so it’s worth considering this selector if you can manipulate DOM fetching with ids: ids are unique, and each ID value can only be used once on a page. If multiple elements are assigned the same ID, only the first DOM element in the selection set of that ID will be matched. But that shouldn’t happen; Pages with more than one element using the same ID are not valid

2. The class selector, as the name implies, gets nodes by class style class name

$(“.class”)

Class selectors are less efficient than ID selectors, but the advantage is that they can be selected. The same jQuery implementation, for class selectors, if the browser supports, JQuery is implemented using JavaScript’s native getElementsByClassName() function: $(“.imooc”).css() {$(“.imooc”).css() {$(“.imooc”). There are other advantages that we’ll learn about over time. Element selector: Selects all elements based on the given (HTML) tag name

Description: $(“element”)

Search all nodes with the specified element tag name. This is a collection operation. There is also support for the native getElementsByTagName() function as shown in the example code below:

The < body > < div class = "Aaron" > < p > class = "Aaron" < / p > < p > select < / p > < / div > < div class = "Aaron" > < p > class = "Aaron" < / p > < p > < / p > selected < / div > < div class = "imooc" > < p > class = "imooc" < / p > < p > jQuery selected < / p > < / div > < div class = "imooc" > < p > class = "imooc < / p >" <p> </p> </div> <script type="text/javascript" document.getElementsByTagName('div'); for (var i = 0; i < divs.length; i++) { divs[i].style.border = "3px solid blue"; } </script> <script type="text/javascript"> $("p").css("border", "3px solid red"); </script> </body>Copy the code

The first group: by getElementsByTagName method page, all of the < div > element var divs = document. The getElementsByTagName (‘ div ‘); Divs is a DOM collection object that loops through each

*4, full selector (selector)

In CSS, it is common to write a style like this in the first line

{padding: 0; margin: 0; }

Wildcards mean default margins for all elements. JQuery also allows you to pass in a selector to select elements in a document page

Description: $(“*”)

JQuery aside, if you want to get the document of all the elements in through the document. The getElementsByTagName () passed in the “*” can also be get

It is not difficult to find that id, class, tag can be obtained by the native method of the corresponding node, but we also need to consider a compatibility issue, I mentioned in passing here, for example:

1. IE implements comment nodes as elements, so a call to getElementsByTagName in IE will include comment nodes, which should not normally be expected
2. Arguments to getElementById are case insensitive in IE8 and earlier versions
3. In IE7 and earlier versions, getElementById selects FORM A if the name attribute of form A uses the ID name of another element B and A precedes B
4. Internet Explorer 8 and earlier, browsers do not support getElementsByClassName

5. Hierarchy selector

All nodes in a document have relationships of one kind or another. We can use the traditional family relationship to describe the relationship between nodes. We can regard the document tree as a family tree. Then nodes and nodes will directly have the relationship of father and son, brother, grandfather and grandson.

The hierarchical selector in the selector is used to handle this relationship: child elements, descendant elements, sibling elements, and neighboring elements

Compare hierarchy selectors with a list

If you look closely, there are many similarities and differences between hierarchical selectors

1. Each level selector has a reference node
2. Descendant selectors contain the contents of child selectors’ selections
3. The normal sibling selector contains the contents of the neighboring sibling selection
4. Adjacent sibling selectors and regular sibling selectors must select elements under the same parent element

6. Basic filter selector

Most of the time you can’t find the element you want directly through the basic and hierarchical selectors, so jQuery provides a series of filter selectors to make it easier to find the DOM element you want. Many of the filter selectors are not CSS specifications, but are extensions of jQuery’s own selectors for developers’ convenience

Filter selectors are used in much the same way as pseudo-elements in CSS, starting with a colon “:” and going through a list to see how basic filters are described:

Matters needing attention:

1. :eq(), :lt(), :gt(), :even, :odd are used to filter the set of elements that precede their matching expressions, and further filter based on the elements that were previously matched. Note that jQuery collections are indexed from 0

2. Gt is a paragraph filter that starts at the next index specified, gt(1) actually starts at 2

7. Content filter selector

Basic filter selectors are for element DOM nodes. If you want to filter by content, jQuery also provides a set of content filter selectors, whose rules are also defined by the child elements or text content they contain

Content filters are described as follows: