What are the filter selectors of jquery? What are the commonly used filter selectors?-JS Tutorial-php.cn

What does jquery’s filter selector do? What are the commonly used filter selectors?This article will introduce you to jquery's filter selectors, so that you can understand what are the commonly used jquery filter selectors. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First of all, let’s learn aboutjquery filter selector selector:

jquery selector can operate on HTML element groups or single elements. However, the filter selector is the most widely used type of jquery selector. It can match elements according to a certain type of filtering rules and find (one or more) elements. When written, it starts with:.

jquery filter selectors can be divided into the following categories:

jquery basic filter selectors (key points)
jquery content filter selector
jquery visibility filter selector
jquery attribute filter selector
jquery status filter selector
jquery sub-element filter selector

Below we will use In the above classification, let’s talk about the common jquery filter selectors and how to use these jquery filter selectors.

jquery basic filter selector (key points)

①first() or: first selects the first element

//选择第一个div元素 $('div:first') $('div').first()

Copy after login

②last() or: last selects the last element

//选择最后一个div元素 $('div:last') $('div').last()

Copy after login

③: not(selector) selects other elements except the given selector

$('div:not(.one)') //选择class不为one的 所有div元素

Copy after login

④: even selects elements with an even number, index Starting from 0

$('div:even') //选择 索引值为偶数 的div元素

Copy after login

⑤: odd selects the element with an odd index, starting from 0

$('div:odd') //选择 索引值为奇数 的div元素

Copy after login

⑥: eq(index) selects the element with the specified index, starting from 0

$('div:eq(3)') //选择 索引等于 3 的div元素

Copy after login

⑦: gt(index) selects elements greater than the given index, starting from 0

$('div:gt(3)') //选择 索引大于 3 的div元素

Copy after login

⑧: lt(index) selects elements less than the given index, starting from 0

$('div:lt(3)') //选择 索引小于 3 的div元素

Copy after login

⑨: header selects the title type element

$(':header') //选择 所有的标题元素.比如h1, h2, h3等等...

Copy after login

⑩: animated selects the element that is performing animation effect

$(':animated') //选择 当前正在执行动画的所有元素

Copy after login

⑪: focus selects the currently focused element

$(':focus') //选择 当前选取焦点的所有元素

Copy after login

jquery content filter selector

##①：contains(text) Select elements that contain the specified text

$("div:contains('Runob')") // 选取包含 Runob文本的元素

Copy after login

②：empty Select elements that do not contain child elements or text Empty element

$("td:empty") //选取不包含子元素或者文本的tb空元素

Copy after login

③：has(selector) Select the element containing the selector matching element

$("div:has('.mini')") //选取含有class为mini元素 的div元素

Copy after login

④：parent Select the empty element containing child elements or text

$("div:parent") //选取含有子元素或者文本的div元素

Copy after login

jquery Visibility filter selector

①：hidden selects invisible elements

$("li:hidden") //选取所有不可见元素，或type为hidden的元素,例：

Copy after login

②：visible selects visible elements

$("li:visible") //选取所有可见 li 元素

Copy after login

jquery attribute filter selector

①[attribute] Select elements with this attribute

$('div[title]') //选取含有 属性title 的div元素

Copy after login

②[attribute=value] Select elements with attribute value value

$('div[title=test]') //选取 属性title值等于 test 的div元素

Copy after login

③[attribute!=value] Select attributes whose value is not equal to The element of value

$('div[title!=test]') //选取 属性title值不等于 test 的div元素

Copy after login

④[attribute^=value] Select the element whose attribute value starts with value

$('div[title^=te]') //选取 属性title值 以 te 开始 的div元素

Copy after login

⑤[attribute$=value] Select the element whose attribute value ends with value

$("div[title$=est]") //选取 属性title值 以 est 结束 的div元素

Copy after login

⑥[attribute*=value] Select elements whose attribute value contains value

$("div[title*=es]") //选取 属性title值 含有 es 的div元素

Copy after login

⑦[attribute|=value] Select elements whose attribute value is equal to value or prefixed with value (i.e. "value-xxx") Element

$('div[title|="en"]') //选取 属性title等于en或以en为前缀（该字符串后跟一个连字符'-'）的元素

Copy after login

⑧[attribute~=value] Select elements whose attribute values are separated by spaces and contain the given value

$('div[title~="uk"]')//选取 属性title用空格分隔的值中包含字符uk的元素

Copy after login

⑨[attribute1][attribute2]…[attributeN] Combine attributes Selector

$("div[id][title*=es]") //组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素

Copy after login

jquery status filter selector

①：enabled Select available elements

$("input:enabled") // 选取可用的 input

Copy after login

②：[attribute =value] Select unavailable elements

$("input:disabled") // 选取不可用的 input

Copy after login

③：checked Select selected elements

$("input:checked") // 选取选中的 input

Copy after login

④：selected Select selected elements

$("option:selected") // 选取选中的 option

Copy after login

jquery Child element filter selector

①: first-child Selects the first child element under each parent element and returns the collection element

//选取每个父元素下的第一个子元素 $('div.one :first-child')

Copy after login

②: last-child Select the last child element under each parent element and return the collection element

//选取每个父元素下的最后一个子元素 $('div.one :last-child')

Copy after login

③: only-child Select the only child element under each parent element and return the collection element

//如果父元素下的仅仅只有一个子元素，那么选中这个子元素 $('div.one :only-child')

Copy after login

④: nth-child(index) selects the index-th child element or odd-even element under each parent element. The index starts from 1

//选取每个父元素下的第2个子元素 $('div.one :nth-child(2)')

Copy after login

Summary: The above is a complete introduction to several common jquery filter selectors. You can Get your hands on these filter selectors to achieve the effects you want. I hope it will be helpful to everyone's learning. For more related tutorials, please visit

jQuery Video Tutorial,JavaScript Video Tutorial,bootstrap Video Tutorial!

The above is the detailed content of What are the filter selectors of jquery? What are the commonly used filter selectors?. For more information, please follow other related articles on the PHP Chinese website!