A visibility filter selector
The visibility filter selector is to select the corresponding element based on the visible and invisible state of the element
1. :hidden usage: $("tr:hidden") return value collection element
Description: To match all invisible elements, if the type attribute of the input element is "hidden", it will also be matched. It means that both display:none and input type="hidden" in css will be matched. Again, keep it in mind The difference between the colon ":", the period "." and the comma "," is completely clear.
2. :visible usage: $("tr:visible") return value collection element
Description: Matches all visible elements.
attribute filter selector
The filter rule of the attribute filter selector is to obtain the corresponding element through the attribute of the element
1. [attribute] usage: $("div[id]") ; return value collection element
Description: Matches elements that contain the given attribute. In this example, all div tags with the "id" attribute are selected.
2. [attribute=value] usage: $("input[name='newsletter']").attr("checked", true); return value collection element
Description: Matches elements whose given attribute is a specific value. The example selects all input elements whose name attribute is newsletter.
3. [attribute!=value] usage: $("input[name!='newsletter']").attr("checked", true); return value collection element
Description: Match all elements that do not contain the specified attribute, or the attribute is not equal to a specific value. This selector is equivalent to: not([attr=value]), to match elements that contain a specific attribute but are not equal to a specific value, use [attr]:not([attr=value]). The :not seen earlier comes in handy.
4. [attribute^=value] usage: $("input[name^='news']") return value collection element
Explanation: Matching a given attribute is an element that starts with some value. Well, we saw these symbols similar to regular matching again. Can't you forget it now?!
5. [attribute$=value] usage: $("input[name$='letter']") return value collection element
Description: Matches elements where the given attribute ends with some value.
6. [attribute*=value] usage: $("input[name*='man']") return value set element
Description: Matches the given attribute as an element containing some value.
7. [attributeFilter1][attributeFilter2][attributeFilterN] Usage: $("input[id][name$='man']") Return value Collection element
Description: The composite attribute selector is used when multiple conditions need to be met at the same time. It is also a combination, which is often used when we actually use it. In this example, all attributes containing id are selected, and its name attribute is The element ending with man.
Two-child element filter selector
1. :nth-child(index/even/odd/equation) Usage: $("ul li:nth-child(2)") Return value Collection element
Description: Matches the Nth child or parity element under its parent element. This selector is similar to the eq() in Basic Filters mentioned earlier, the difference is that the former starts from 0 and the latter starts from 0 1 to start.
2. :first-child usage: $("ul li:first-child") return value collection element
Description: Matches the first child element. ':first' matches only one element, and this selector will match one child element for each parent element. A special memory difference is required here.
3. :last-child usage: $("ul li:last-child") return value collection element
Description: Matches the last child element. ':last' matches only one element, and this selector will match one child element for each parent element.
4. : only-child usage: $("ul li:only-child") return value collection element
Description: If an element is the only child element in the parent element, it will be matched. If the parent element contains other elements, it will not be matched. Meaning: only one child element will be matched!
Three form object property filter selectors
This selector mainly filters the selected form elements
1. :enabled Usage: $("input:enabled") Return value Collection element
Description: Match all available elements. It means to find all inputs that do not have disabled="disabled" in the input. If it is not disabled, of course it is enabled.
2. :disabled usage: $("input:disabled") return value collection element
Description: Matches all unavailable elements. Corresponds to the one above.
3. :checked usage: $("input:checked") return value collection element
Description: Match all selected elements (check boxes, radio boxes, etc., excluding option in select). This is a bit of a twist.
4. :selected usage: $("select option:selected") return value collection element
Description: Matches all selected option elements.
Four form selectors
1. :input usage: $(":input") ; return value collection element
Description: matches all input, textarea, select and button elements
2. :text usage: $(":text") ; return value collection element
Description: Matches all single-line text boxes.
3. :password usage: $(":password") ; return value collection element
Description: Match all password boxes.
4. :radio usage: $(":radio") ; return value collection element
Description: Matches all radio buttons.
5. :checkbox usage: $(":checkbox") ; return value collection element
Description: Match all checkboxes
6. :submit usage: $(":submit") ; return value collection element
Description: Matches all submit buttons.
7. :image usage: $(":image") return value collection element
Description: Match all image domains.
8. :reset usage: $(":reset") ; return value collection element
Description: Matches all reset buttons.
9. :button usage: $(":button") ; return value collection element
Description: Matches all buttons. This includes the directly written element button.
10. :file usage: $(":file") ; return value collection element
Description: Match all file fields.
11. :hidden usage: $("input:hidden") ; return value collection element
Description: Match all invisible elements, or elements whose type is hidden. This selector is not limited to forms. In addition to matching hidden in input, those whose style is hidden will also be matched.
Note: The method to select the hidden value in the input is the usage of the above example, but if you use ":hidden" directly, it will match all invisible elements in the page, including those with a width or height of 0.