Selectors allow you to operate on groups of elements or individual elements.
JQuery is a very good JS framework, which can greatly facilitate developers to manipulate the behavior of various elements of the page and improve the efficiency of JavaScript development. Compared with JS, JQuery provides a very powerful selector, which is similar to the selector in CSS, simple and convenient.
jQuery element selectors and attribute selectors allow selection of HTML elements by tag name, attribute name, or content.
Selectors allow operations on groups of HTML elements or individual elements.
In HTML DOM terminology:
Selectors allow you to operate on groups of DOM elements or individual DOM nodes.
Below we introduce several selectors commonly used in JQuery.
Quote:
To use JQuery, you must first introduce the JQuery library
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title></title> 5 <script src="JS/jquery-3.1.1.min.js"><br /> 6 //导入的JQuery库，不写内容！！ 7 </script> 8 <script type="text/javascript"> 9 10 </script> 11 </head> 12 13 <body> 14 15 </body> 16 </html>
Selector syntax: $(selector)
Use "$" in JQuery to represent a return function in JQuery. The content in "()" is the selector used.
1. Element selector
Select DOM objects by id attribute, class attribute, or element name, and encapsulate it as an array of jQuery objects.
The syntax of these selectors is simple and easy to choose.
For example id selector:
JQuery code:
$("#div1");
HTML code:
1 <body> 2 <div id="div1"></div> 3 <div></div> 4 <div></div> 5 <div></div> 6 </body>
Will return the content in #div1, this method of use is suitable for selecting all elements in the DOM
2. Hierarchy selector
Select child elements, sibling elements, etc., there are the following four:
①ancestor descendant：
Matches all descendant elements under a given ancestor element
ancestor: ancestor element descendant: descendant element
② parent > child：
Matches all child elements under a given parent element
parent: parent element child: child element
③prev + next：
Matches all next elements immediately after the prev element, for example:
JQuery code:
$("label + input")
HTML code:
1 <body> 2 <form> 3 <label>Name:</label> 4 <input name="name" /> 5 <fieldset> 6 <label>Newsletter:</label> 7 <input name="newsletter" /> 8 </fieldset> 9 </form> 10 <input name="none" /> 11 </body>
Return result:
[ <input name="name" />, <input name="newsletter" /> ]
④prev ~ siblings
Matches all siblings elements after the prev element, for example:
JQuery code:
$("form ~ input")
HTML code:
1 <form> 2 <label>Name:</label> 3 <input name="name" /> 4 <fieldset> 5 <label>Newsletter:</label> 6 <input name="newsletter" /> 7 </fieldset> 8 </form> 9 <input name="none" />
Return result:
[ <input name="none" /> ]