JQuery selector and filter sorting

After a night of searching and sorting, I finally sorted out a set of JQuery's filter that should be considered the most comprehensive method. All codes are tested.

First HTML code

Copy the codeThe code is as follows:

HTML Code

<select name="select31" size="1">
    <option value="select311">option1</option>
    <option value="select312" selected>option2</option>
    <option value="select313">option3</option>
</select>

      </td>
      <td name="td32" class="td32"></td>
      <td name="td33" class="td33"></td>
    </tr>
</table>
</form>
<h1>Hello world! </h1>
</body>
</html>

JS Code

Objects and JQuery wrapping set

1. The DOM object or DOM object set is obtained through (), (), etc., the former takes the object, and the latter obtains the DOM object set.

Copy the codeThe code is as follows:

var text11_dom=("text11");

var text11_dom=("text11")[0];
var text11_dom=.text11;// Here text11 can be either the name value or the id value

var text11_dom=[10];

2. If you want to use the functions provided by JQuery, you must first construct the JQuery wrapper set, and the returned JQuery wrapper set through $() is the JQuery wrapper set.

Copy the codeThe code is as follows:

var text11_jquery=$("#text11");

Convert the wrapping set and DOM objects to each other

Objects cannot use JQuery property methods, but DOM objects can be converted into JQuery wrapper sets through $()

Copy the codeThe code is as follows:

var text11_dom=("text11");

var text11_jquery=$(text11_dom);

The wrapping set can use the attribute methods of some DOM objects such as .length, but there are also some attribute methods that cannot be used such as .value. You can obtain the corresponding DOM objects by adding brackets and index values after the JQuery wrapping set.

Copy the codeThe code is as follows:

var text11_dom=$("#text11")[0];

3. This is also a DOM object when each loop or when an event is triggered

Copy the codeThe code is as follows:

$("#text11").click(function(){

    var text11_dom_value=;

    alert(text11_dom_value);

});

3. The $ symbol represents a reference to a JQuery object in JQuery. There are four core methods of JQuery.

(html[,ownerDocument]): Dynamically create Dom elements based on HTML raw string

Copy the codeThe code is as follows:

$("<div><p>Hello!</p></div>").appendTo("body");

( elements ): Encapsulate one or more Dom objects into jQuery wrapping set, that is, the above DOM objects are converted to JQuery wrapping set

( callback ): $(document).ready() abbreviation method

Copy the codeThe code is as follows:

$(function(){

    alert("Hello!");

});

(selector[,context]): Find the JQuery packaging set that meets the criteria within the specified range. The context is the search range. The context can be a DOM object set or a JQuery packaging set.
Find JQuery wrapper set with id of text11 element in all tr tags

Copy the codeThe code is as follows:

var text11_query=$("#text11","tr");

============================ jQuery selector====================

1. Basics

1. Select according to the label name

Copy the codeThe code is as follows:

var input_query=$("input");

2. Select according to the id value

Copy the codeThe code is as follows:

var text11_query=$("#text11");

3. Select according to the class value

Copy the codeThe code is as follows:

var text11_query=$(".text11");

4. Select multiple JQuery packaging sets that meet the conditions at the same time, and separate the conditions by number.

Copy the codeThe code is as follows:

var text_query=$("#text11,.text12");

5. Select all DOM elements

Copy the codeThe code is as follows:

var all_query=$("*");

2. Hierarchy Selector Hierarchy

1. Get all elements below it with id value of text11 from all tr tags

Copy the codeThe code is as follows:

var text11_query=$("tr #text11");

2. Get all direct input child elements under all td tags

Copy the codeThe code is as follows:

var input_query=$("td>input");

3. Get the class button11 element after the id is text11 element, and only get one element that meets the conditions. Text11 and button11 are in the same level in terms of status

Copy the codeThe code is as follows:

var button11_query=$("#text11+.button11");

4. Get all elements with id as text11 after the element with class button11

Copy the codeThe code is as follows:

var button11_query=$("#text11~.button11");

3. Basic Filters

1. Get the first input element

Copy the codeThe code is as follows:

var input_query=$("input:first");

2. Get the last input element

Copy the codeThe code is as follows:

var input_query=$("input:last");

3. Get all unselected input elements

Copy the codeThe code is as follows:

var input_query=$("input:not(:checked)");

4. The first input element is counted as one, and find all odd-numbered input elements

Copy the codeThe code is as follows:

var input_query=$("input:even");

5. Starting from the second input, find all the even-number input elements

Copy the codeThe code is as follows:

var input_query=$("input:odd");

6. Find the input element with index 1, and the index value starts from 0.

Copy the codeThe code is as follows:

var input_query=$("input:eq(1)");

7. Find all input elements with index greater than 0

Copy the codeThe code is as follows:

var input_query=$("input:gt(0)");

8. Find all input elements with index less than 2

Copy the codeThe code is as follows:

var input_query=$("input:lt(2)");

9. Get all <h> title elements on the page

Copy the codeThe code is as follows:

var h_query=$(":header");

10. Get all elements that are executing animation effects

Copy the codeThe code is as follows:

var animated_query=$(":animated");

4. Content Filters

1. Find all html content with h1 elements containing "Hello World!"

Copy the codeThe code is as follows:

var h1_query=$("h1:contains('Hello world!')");

2. Get all td elements with empty subtitles or html content

Copy the codeThe code is as follows:

var td_query=$("td:empty");

3. Find all td elements containing input child elements

Copy the codeThe code is as follows:

var td_query=$("td:has(input)");

4. Find all TD elements containing subtags or html content

Copy the codeThe code is as follows:

var td_query=$("td:parent");

5. Visibility Filters Visibility Filters

1. Find all hidden input elements

Copy the codeThe code is as follows:

var input_query=$("input:hidden");

2. Find all visible input elements

Copy the codeThe code is as follows:

var input_query=$("input:visible");

6. Attribute Filters
1. Find all input elements containing id attributes

Copy the codeThe code is as follows:

var input_query=$("input[id]");

2. Find the input element with name value of text11

Copy the codeThe code is as follows:

var input_query=$("input[name='text11']");

3. Find all input elements whose name value is not equal to text11

Copy the codeThe code is as follows:

var input_query=$("input[name!='text11']");

4. Find the input element whose name value starts with text

Copy the codeThe code is as follows:

var input_query=$("input[name^='text']");

5. Find all input elements with name value ending with 11

Copy the codeThe code is as follows:

var input_query=$("input[name$='11']");

6. Find all input elements containing ext in the name value

Copy the codeThe code is as follows:

var input_query=$("input[name*='ext']");

7. Find all input elements that contain id attributes and have ext in name value

Copy the codeThe code is as follows:

var input_query=$("input[id][name*='ext']");

7. Child Filters

1. Find all input elements ranked second among all child elements in the parent element
In nth-child(), you can choose even here to calculate even numbers, odd numbers here, n any number selects all input elements with parent elements. The number directly selects the input element ranked in the first input element, and the first input element counts one

Copy the codeThe code is as follows:

var input_query=$("input:nth-child(2)");

2. Find all input elements that rank first among all child elements in the parent element

Copy the codeThe code is as follows:

var input_query=$("input:first-child");

3. Find all input elements that are last among all child elements in the parent element

Copy the codeThe code is as follows:

var input_query=$("input:last-child");

4. Find all input elements that are the only child elements in the parent element

Copy the codeThe code is as follows:

var input_query=$("input:only-child");

8. Form Selector Forms

1. Find all input elements

Copy the codeThe code is as follows:

var input_query=$(":input");

2. Find all text box elements

Copy the codeThe code is as follows:

var text_query=$(":text");

3. Find all password box elements

Copy the codeThe code is as follows:

var password_query=$(":password");

4. Find all check boxes

Copy the codeThe code is as follows:

var checkbox_query=$(":checkbox");

5. Find all submission button elements

Copy the codeThe code is as follows:

var submit_query=$(":submit");

6. Find all image domain elements

Copy the codeThe code is as follows:

var image_query=$(":image");

7. Find all reset button elements

Copy the codeThe code is as follows:

var reset_query=$(":reset");

8. Find all button elements

Copy the codeThe code is as follows:

var button_query=$(":button");

9. Find all file domain elements

Copy the codeThe code is as follows:

var file_query=$(":file");

9. Form Filters

1. Find all available input elements

Copy the codeThe code is as follows:

var input_query=$("input:enabled");

2. Find all unavailable input elements

Copy the codeThe code is as follows:

var input_query=$("input:disabled");

3. Find all selected radio check boxes

Copy the codeThe code is as follows:

var input_query=$("input:checked");

4. Find all selected drop-down boxes

Copy the codeThe code is as follows:

var option_query=$("option:selected");