What filter selectors does jQuery have?

jQuery filter selectors include: ":first", ":last", ":not()", ":even", ":odd", ":eq()", ":gt( )", ":lt()", ":header", ":empty", ":has()", ":hidden", etc.

[Related recommendations: jQuery video tutorial]

jQuery filter selector

filter? Definitely need to add filter conditions. Add filter conditions through ":", such as "$("div:first")" to return the first div element in the div element collection, and first is the filter condition.
According to different filtering rules, filtering selectors can be divided into basic filtering, content filtering, visibility filtering, attribute filtering, sub-element filtering and form object attribute filtering selectors.

1. Basic filter selector

a) ":first", select the first element, don't forget that it is also placed in a collection! Because JQuery is a collection of DOM objects. For example, "$("tr:first")" returns the first tr element of all tr ​​elements, which is still saved in the collection.

b) ":last", select the last element. For example, "$("tr:last")" returns the last tr element of all tr ​​elements, which is still saved in the collection.

c) ":not(selector)", removes all elements matching the given selector. For example, "$("input:not(:checked)")" returns all input elements, but removes the selected elements (radio button, multi-select box).

d) ":even", selects even-numbered elements among all elements. Because the JQuery object is a collection, the even number here refers to the index of the collection, and the index starts from 0.

e) ":odd", selects odd-numbered elements among all elements, and the index starts from 0.

f) ":eq(index)", selects the element at the specified index, and the index starts from 0.

g) ":gt(index)", selects elements whose index is greater than the specified index, and the index starts from 0.

h) ":lt(index)", selects elements whose index is less than the specified index, and the index starts from 0.

i) ":header", select all title elements, such as hq, h2, etc.

j) ":animated", selects all animated elements currently being executed.

2. Content filtering selector

It operates on elements and text content.

a) ":contains(text)", select the element containing text text content.

b) ":empty", selects empty elements that do not contain child elements or text nodes.

c) ":has(selector)", selects the element containing the element matched by the selector.

d) ":parent", select elements containing child elements or text nodes. (It is a parent node)

3. Visibility filter selector

Selects elements based on their visible or invisible status.

• ":hidden", select all invisible elements.

• ":visible" selects all visible elements.

Visible selector: hidden not only includes elements whose style attribute display is none, but also includes text hidden fields () and visible:hidden. Elements.

4. Attribute filter selector

Select the corresponding element through the attribute of the element.

a) "[attribute]", select elements with this attribute.

b) "[attribute=value]", select all elements whose specified attribute value is value.

c) "[attribute !=value]", select all elements whose attribute value is not value.

d) "[attribute ^= value]", select all elements whose attribute value starts with value.

e) "[attribute $= value]", select all elements whose attribute value ends with value.

f) "[attribute *= value]", select all elements whose attribute value contains value.

g) "[selector1] [selector2]...[selectorN]", a composite selector, first selects [selector1] and returns set A, set A then selects [selector2] and returns set B, set B Then select and return the result set through [selectorN].

5. Child element filter selector

As you can see from the name, it selects the child elements of a certain element.

a) ":nth-child(index/even/odd)", selects the element with index, the element with even index, and the element with odd index.

• nth-child(even/odd): Can select elements whose index value under each parent element is an even (odd) number.

• nth-child(2): Can select the element with index value 2 under each parent element.

• nth-child(3n): Can select elements whose index value under each parent element is a multiple of 3.

• nth-child(3n 1): Can select the element whose index value is 3n 1 under each parent element.

b) ":first-child", select the first child element.

c) ":last-child", select the last child element.

d) ":only-child", selects the only child element whose parent element has only this child element.

6. Form filter selector

The filter selector that selects form elements.

a) ":input", selects all , , <select> and <button> elements. </p> <p>b) ":text", select all text box elements. </p> <p>c) ":password", select all password box elements. </p> <p>d) ":radio", select all radio button elements. </p> <p>e) ":checkbox", select all checkbox elements. </p> <p>f) ":submit", select all submit button elements. </p> <p>g) ":image", selects all image button elements. </p> <p>h) ":reset", selects all reset button elements. </p> <p>i) ":button", select all button elements. </p> <p>j) ":file", selects all file upload domain elements. </p> <p>k) ":hidden", select all invisible elements. </p> <p><strong>7. Form object attribute filter selector </strong></p> <p> Filter selector that selects form element attributes. </p> <ul style="list-style-type: disc;"> <li><p>":enabled" selects all available elements. </p></li> <li><p>":disabled" selects all disabled elements. </p></li> <li><p>":checked" selects all selected elements, such as radio buttons and check boxes. </p></li> <li><p>":selected" selects all selected elements, such as drop-down list boxes and list boxes. </p></li> </ul> <p>For more programming-related knowledge, please visit: <a href="https://www.php.cn/course.html" target="_blank" textvalue="编程学习">Programming Learning</a>! ! </p><p>The above is the detailed content of What filter selectors does jQuery have?. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">jquery</a> <a href="javascript:void(0);">select</a> <a href="javascript:void(0);">checkbox</a> <a href="javascript:void(0);">Attribute</a> <a href="javascript:void(0);">对象</a> <a href="javascript:void(0);">dom</a> <a href="javascript:void(0);">选择器</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">input</a> <a href="javascript:void(0);">tr</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="How to install react in code" href="https://m.php.cn/faq/463664.html">How to install react in code</a></span><span>Next article：<a class="dBlack" title="How to install react in code" href="https://m.php.cn/faq/463692.html">How to install react in code</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/459010.html" title="jQuery implements div display, hiding and text filling" class="aBlack">jQuery implements div display, hiding and text filling</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/463507.html" title="Introducing four types of js detection methods and tool methods written based on jquery" class="aBlack">Introducing four types of js detection methods and tool methods written based on jquery</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/463558.html" title="What is jQuery PrimeUI?" class="aBlack">What is jQuery PrimeUI?</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/463609.html" title="A brief discussion on the method of introducing jquery into vue" class="aBlack">A brief discussion on the method of introducing jquery into vue</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/463635.html" title="What is the difference between size() and length in jquery?" class="aBlack">What is the difference between size() and length in jquery?</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>