JQuery essay (1) selector

JQuery selector

  The selector allows us to select html elements (tags) and perform corresponding operations. In CSS styles, using selectors can add overlay styles to specific elements, making HTML elements more colorful. As a framework of JavaScript, JQuery aims to simplify DOM operations in JS, allowing us to write less code to achieve our goals. The selection of HTML elements is also the way of CSS selectors. There are more than fifty selectors in the JQuery1.xx version.

  The selector is more like a semantic specification, which allows us to obtain the elements we want relatively accurately without writing a lot of code like DOM operations.

The basic use of selectors in JQuery:

<script>
    var elements = $("selector");
</script>

 

Selector classification:

Basic selector

$("*")	Select all elements
$(“element”)	Select the corresponding element, return an array-like object when there are multiple
$("#idName")	id selector, select the element corresponding to id = "idName"
$(".className")	Class selector, select the corresponding element with class="className"
$(“selector1, selector2,…”)	All elements in the corresponding selector will be selected, which also returns an array-like object

 

Level selector

$("ancestor element descendant element")	Select all descendant elements under the corresponding ancestor element. For example, $("form input") selects all input tags under all form tags
$(“parent > child”)	Select the direct child nodes of the parent node

Note: The above-mentioned ancestor node, parent node, and child node can be analogous to the definition of the tree structure in the data structure.
 

Element attribute selector

Attribute name selector	$(“element[attribute]”)	Select the element with attribute under element element
Attribute value selector	$(“element[attribute=‘value’]”)	Select the element with the attribute value corresponding to the attribute, you can select the desired element more accurately than the above
Composite attribute selector	$(“element[attribute] [attribut2=‘value’]”)	It can be seen as a mixture of the above two, just like selecting elements in a two-dimensional array (note that there is no space between the two square brackets)

Attach:

Using attribute values ​​to select is, in addition to'=', you can also use other to achieve the purpose of our choice:

E.g

• $("element[attribute!='value']"): You can select elements whose attribute value is not value

• $("element[attribute^='str']"): You can select the element that matches the str string at the beginning of the attribute value

• $("element[attribute $='str']"): You can select the element whose attribute value matches the str string at the end

  Wait~

Filter selector

$(“element:first”)	Select the first tag (element) of all tag names element
$(“element:last”)	Select the last element whose label is named element
$(“element:gt(index)”)	Select all the elements whose tag name is element whose subscript is greater than index, which can be regarded as obtaining all element name elements, and select the element whose index is less than index
$(“element:eq(index)”)	Select all elements whose tag name is element whose subscript is greater than index
$(“element:lt(index)”)	Select all elements whose tag name is element whose subscript is less than index
$(“element:even”)	Select all elements whose label name is element and whose subscript is even
$(“element:odd”)	Select all elements whose label name is element and whose subscript is odd
$(“element:not(“selector”)”)	Select all elements whose tag name is element, but are not selected by the selector
$(":header")	Select the title element, such <h1> ,<h2>as

 

Form object attribute selector

$(“input:enabled”)	There is no disabled attribute tag under the input tag
$(“input:disabled”)	Select the disabled attribute label under the input label
$(“input[checkbox=‘checkboxName’]:checked”)	Select all selected elements in the checkboxes, and the return value can be used as an array
$(“select > option:selected”)	Select all elements selected in the drop-down box, you can set multiple selection

Note: In the drop-down box, write $("select>option:SELECTED")andnotbe\; able\; towrite$ (" select: selected "), otherwise the select element just selected, rather than corresponding to the selected option.

 
For more information about the selector, please refer to the official document
JQuery local document download: CSDN download
JQuery download of various versions: CSDN download