Selectors are the most basic thing in jQuery. The selectors listed in this article basically include all jQuery selectors. Maybe you can deepen your understanding of jQuery selectors through this article. Their usage is very simple. What I hope more is that it can improve the efficiency of writing jQuery code for individuals. This article introduces all jQuery selectors with screenshots, code and a simple summary, and also lists some areas that need attention and distinction.
1. Basic selector
1. id selector (specify id element)
Set the background color of the element with id="one" to black. (id selector returns a single element)
$(document).ready(function () {<br> $('#one').css('background', '#000');<br> }); Copy after login
2. class selector (traverse css class elements)
Set the background color of the element with class="cube" to black
$(document).ready(function () {<br> $('.cube').css('background', '#000');<br> }); Copy after login
3. element selector (traverse html elements)
Set the text size of the p element to 12px
$(document).ready(function () {<br> $('p').css('font-size', '12px');<br> });<br> Copy after login
4. * Selector (traverse all elements)
$(document).ready(function () {<br> // 遍历form下的所有元素，将字体颜色设置为红色<br> $('form *').css('color', '#FF0000');<br> }); Copy after login
5. Column Selector
$(document).ready(function () {
// 将p元素和div元素的margin设为0
$('p, div').css('margin', '0');
}); Copy after login
Level Selector
1. parent > child (direct child element)
$(document).ready(function () {
// 选取div下的第一代span元素，将字体颜色设为红色
$('div > span').css('color', '#FF0000');
}); Copy after login
In the following code, only the first span will change color. The second span does not belong to the first generation of child elements of the div, and the color remains unchanged.
<div>
<span>123</span>
<p>
<span>456</span>
</p>
</div> Copy after login
2. prev next (next sibling element, equivalent to next() method)
$(document).ready(function () {
// 选取class为item的下一个div兄弟元素
$('.item + div').css('color', '#FF0000');
// 等价代码
//$('.item').next('div').css('color', '#FF0000');}); Copy after login
In the code below, only 123 and 789 will change color
<p class="item"></p><br><div>123</div><br><div>456</div><br><span class="item"></span><br><div>789</div> Copy after login
3. prev ~ siblings (all sibling elements of the prev element, equivalent to the nextAll() method)
$(document).ready(function () {<br> // 选取class为inside之后的所有div兄弟元素<br> $('.inside ~ div').css('color', '#FF0000');<br> // 等价代码<br> //$('.inside').nextAll('div').css('color', '#FF0000');}); Copy after login
With the following code, G2 and G4 will change color
<div class="inside">G1</div><br><div>G2</div><br><span>G3</span><br><div>G4</div> Copy after login
3. Filter selector
1. Basic filter selector
——1.1 :first and :last (take the first element or the last element)
$(document).ready(function () {<br> $('span:first').css('color', '#FF0000');<br> $('span:last').css('color', '#FF0000');<br> }); Copy after login
With the following code, G1 (first element) and G3 (last element) will change color
<span>G1</span><br><span>G2</span><br><span>G3</span> Copy after login
——1.2:not (take non-element)
$(document).ready(function () {<br> $('div:not(.wrap)').css('color', '#FF0000');<br> }); Copy after login
The following code, G1 will change color
<div>G1</div><br><div class="wrap">G2</div> Copy after login
However, please note the following code:
<div>
<br> G1 <div class="wrap">G2</div>
<br>
</div> Copy after login
When the div where G1 is located and the div where G2 is located have a parent-child relationship, both G1 and G2 will change color.
——1.3 :even and :odd (take even index or odd index element, index starts from 0, even means even number, odd means odd number)
$(document).ready(function () {<br> $('tr:even').css('background', '#EEE'); // 偶数行颜色<br> $('tr:odd').css('background', '#DADADA'); // 奇数行颜色<br> }); Copy after login
The color of rows A and C is #EEE (the index of the first row is 0), the color of rows B and D is #DADADA
——1.4 :eq(x) (take the element at the specified index)
$(document).ready(function () {<br> $('tr:eq(2)').css('background', '#FF0000');<br> }); Copy after login
Change the background color of the third line. In the above code, the background of C will change color.
——1.5 :gt(x) and :lt(x) (take elements greater than x index or less than x index)
$(document).ready(function () {<br> $('ul li:gt(2)').css('color', '#FF0000');<br> $('ul li:lt(2)').css('color', '#0000FF');<br> }); Copy after login
L4 and L5 will be red, L1 and L2 will be blue, L3 is the default color
——1.6:header (take H1~H6 title elements)
$(document).ready(function () {<br> $(':header').css('background', '#EFEFEF');<br> });<br> Copy after login
With the following code, the background color of H1~H6 will change
<h1>H1</h1><br><h2>H2</h2><br><h3>H3</h3><br><h4>H4</h4><br><h5>H5</h5><br><h6>H6</h6> Copy after login
2. Content filter selector
——2.1:contains(text) (get the element containing text)
$(document).ready(<span style="color: blue">function </span>() {
<span style="color: #006400">// dd元素中包含"jQuery"文本的会变色
</span>$(<span style="color: maroon">'dd:contains("jQuery")'</span>).css(<span style="color: maroon">'color'</span>, <span style="color: maroon">'#FF0000'</span>);
}); Copy after login
In the following code, the first dd will change color
技术
jQuery, .NET, CLR
SEO
关键字排名
其他
——2.2 :empty (take elements that do not contain child elements or have empty text)
$(document).ready(function () {<br> $('dd:empty').html('没有内容');<br>});<br> Copy after login
The third dd above will display the text "No content"
——2.3:has(selector) (take the element matched by the selector)
$(document).ready(function () {<br> // 为包含span元素的div添加边框<br> $('div:has(span)').css('border', '1px solid #000');<br> }); Copy after login
Even if span is not a direct child element of div, it will take effect
<div>
<br> <h2>
<br> A <span>B</span><br> </h2>
<br>
</div> Copy after login
——2.4 :parent（取包含子元素或文本的元素）
$(document).ready(function () {<br> $('ol li:parent').css('border', '1px solid #000');<br> }); Copy after login
下面的代码，A和D所在的li会有边框
<ol>
<br> <li>
<br> <li>A</li>
<br> <li>
<br> <li>D</li>
<br>
</ol> Copy after login
3. 可见性过滤选择器
——3.1 :hidden（取不可见的元素）
jQuery至1.3.2之后的:hidden选择器仅匹配display:none或
参照：http://www.jquerysdk.com/api/hidden-selector
下面的代码，先弹出"hello"对话框，然后hid-1会显示，hid-2仍然是不可见的。
http://www.w3.org/1999/xhtml" ><br><br> <title></title><br> <style type="text/css"><br /> div<br /> {<br /> margin: 10px;<br /> width: 200px;<br /> height: 40px;<br /> border: 1px solid #FF0000;<br /> display:block;<br /> }<br /> .hid-1<br /> {<br /> display: none;<br /> }<br /> .hid-2<br /> {<br /> visibility: hidden;<br /> }<br /> </style><br> <script type="text/javascript" src="js/jquery.min.js"></script><br> <script type="text/javascript"><br /> $(document).ready(function() {<br /> $('div:hidden').show(500);<br /> alert($('input:hidden').val());<br /> });<br /> </script><br><br><br> <div class="hid-1">display: none</div><br> <div class="hid-2">visibility: hidden</div><br> <input type="hidden" value="hello"><br><br> Copy after login
——3.2 :visible（取可见的元素）
下面的代码，最后一个div会有背景色
<script type="text/javascript"><br /> $(document).ready(function() { $('div:visible').css('background', '#EEADBB'); });</script><br><div class="hid-1">display: none</div><br><div class="hid-2">visibility: hidden</div><br><input type="hidden" value="hello"><br><div>
<br> jQuery选择器大全</div> Copy after login
4. 属性过滤选择器
——4.1 [attribute]（取拥有attribute属性的元素）
下面的代码，最后一个a标签没有title属性，所以它仍然会带下划线
<script type="text/javascript"><br /> $(document).ready(function() { $('a[title]').css('text-decoration', 'none'); }); </script> <br> Copy after login
——4.2 [attribute = value]和[attribute != value]（取attribute属性值等于value或不等于value的元素）
分别为class="item"和class!=item的a标签指定文字颜色
<script type="text/javascript"><br /> $(document).ready(function() {<br /> $('a[class=item]').css('color', '#FF99CC');<br /> $('a[class!=item]').css('color', '#FF6600');<br /> });</script> Copy after login
——4.3 [attribute ^= value], [attribute $= value]和[attribute *= value]（attribute属性值以value开始，以value结束，或包含value值）
在属性选择器中，^$符号和正则表达式的开始结束符号表示的含义是一致的，*模糊匹配，类似于sql中的like '%str%'。
<script type="text/javascript"><br /> // 识别大小写，输入字符串时可以输入引号，[title^=jQuery]和[title^="jQuery"]是一样的<br /> $('a[title^=jQuery]').css('font-weight', 'bold');<br /> $('a[title$=jQuery]').css('font-size', '24px');<br /> $('a[title*=jQuery]').css('text-decoration', 'line-through');</script> Copy after login
——4.4 [selector1][selector2]（复合型属性过滤器，同时满足多个条件）
将title以"jQuery"开始，并且class="item"的a标签隐藏，那么jQuery事件大全 会被隐藏
<script type="text/javascript"><br /> $(document).ready(function() {<br /> $('a[title^=jQuery][class=item]').hide();<br /> });<br /> </script> Copy after login
5. 子元素过滤选择器
——5.1 :first-child和:last-child
:first-child表示第一个子元素，:last-child表示最后一个子元素。
需要大家注意的是，:fisrst和:last返回的都是单个元素，而:first-child和:last-child返回的都是集合元素。举个 例子：div:first返回的是整个DOM文档中第一个div元素，而div:first-child是返回所有div元素下的第一个元素合并后的集 合。
这里有个问题：如果一个元素没有子元素，:first-child和:last-child会返回null吗？请看下面的代码：
http://www.w3.org/1999/xhtml" ><br><br> <title></title><br> <script type="text/javascript" src="js/jquery.min.js"></script><br> <script type="text/javascript"><br /> $(document).ready(function() {<br /> var len1 = $('div:first-child').length;<br /> var len2 = $('div:last-child').length;<br /> });<br /> </script><br><br><br><div>
<br> <div>
<br> <div></div>
<br> </div>
<br>
</div><br><br> Copy after login
也许你觉得这个答案，是不是太简单了？len1 = 2, len2 = 2。但实际确并不是，它们俩都等于3。
http://www.w3.org/1999/xhtml" ><br><br> <title></title><br> <script type="text/javascript" src="js/jquery.min.js"></script><br> <script type="text/javascript"><br /> $(document).ready(function() {<br /> var len1 = $('div:first-child').length;<br /> var len2 = $('div:last-child').length;<br /> $('div:first-child').each(function() {<br /> alert($(this).html());<br /> });<br /> });<br /> </script><br><br><br><div>123<br> <div>456<br> <div></div>
<br> </div>
<br>
</div><br><br> Copy after login
结果却是弹出三个alert，只不过最后一个alert里面是空白的。
——5.2 :only-child
当某个元素有且仅有一个子元素时，:only-child才会生效。
http://www.w3.org/1999/xhtml" ><br><br> <title></title><br> <script type="text/javascript" src="js/jquery.min.js"></script><br> <script type="text/javascript"><br /> $(document).ready(function() {<br /> $('div:only-child').css('border', '1px solid #FF0000').css('width','200px');<br /> });<br /> </script><br><br><br><div>123<br> <div>456<br> <div></div>
<br> </div>
<br>
</div><br><br> Copy after login
这里:only-child也是三个元素，从最后一个很粗的红色边框（实际是两个元素的边框重叠了）也可以看出来。
——5.3 :nth-child
看到这个就想起英文单词里的，fourth, fifth, sixth……，nth表示第n个，:nth-child就表示第n个child元素。要注意的是，这儿的n不像eq(x)、gt(x)或lt(x)是从 0开始的，它是从1开始的，英文里好像也没有zeroth这样的序号词吧。
:nth-child有三种用法：
1) :nth-child(x)，获取第x个子元素
下面的两个例子是针对2)和3)的，1)的例子我就不列举了。
例2：
http://www.w3.org/1999/xhtml" ><br><br> <title></title><br> <style type="text/css"><br /> <br /> td {<br /> width: 200px;<br /> height: 32px;<br /> line-height: 32px;<br /> }<br /> <br /> </style><br> <script type="text/javascript" src="js/jquery.min.js"></script><br> <script type="text/javascript"><br /> $(document).ready(function() {<br /> // 偶数行背景红色<br /> $('tr:nth-child(even)').css('background', '#FF0000');<br /> // 奇数行背景蓝色<br /> $('tr:nth-child(odd)').css('background', '#0000FF');<br /> });<br /> </script><br><br><br> Copy after login
1. NBA 2012季后赛 2. NBA 2011季后赛 3. NBA 2010季后赛 4. NBA 2009季后赛 5. NBA 2008季后赛 6. NBA 2007季后赛
例3（html代码和例2是一样的）：
<script type="text/javascript"><br /> $(document).ready(function() {<br /> $('tr:nth-child(3n)').css('background', '#0000FF');<br /> });</script><br> Copy after login
6. 表单对象属性过滤选择器
——6.1 :enabled和:disabled（取可用或不可用元素）
:enabled和:diabled的匹配范围包括input, select, textarea。
<script type="text/javascript"><br /> $(document).ready(function() {<br /> $(':enabled').css('border', '1px solid #FF0000');<br /> $(':disabled').css('border', '1px solid #0000FF');<br /> });<br /> </script><br> <div>
<br> <input type="text" value="可用的文本框"><br> </div><br> <div>
<br> <input type="text" disabled value="不可用的文本框"><br> </div><br> <div>
<br> <textarea disabled>不可用的文本域</textarea><br> </div><br> <div>
<br> <select disabled><br> <option>English</option>
<br> <option>简体中文</option>
<br> </select><br> </div> Copy after login
——6.2 :checked（取选中的单选框或复选框元素）
下面的代码，更改边框或背景色仅在IE下有效果，chrome和firefox不会改变，但是alert都会弹出来。
<script type="text/javascript"><br /> $(document).ready(function() {<br /> $(':checked').css('background', '#FF0000').each(function() {<br /> alert($(this).val());<br /> });<br /> });</script><br><div>
<br> <input type="checkbox" checked value="must">必须勾选</div><br><div>你现在工作的企业属于：<br> <input type="radio" name="radio" checked value="外企">外企<br> <input type="radio" name="radio" value="国企">国企<br> <input type="radio" name="radio" value="民企">民企</div> Copy after login
——6.3 :selected（取下拉列表被选中的元素）
<script type="text/javascript"><br /> $(document).ready(function() {<br /> alert($(':selected').val());<br /> });</script><br><select><br> <option value="外企">外企</option>
<br> <option value="国企">国企</option>
<br> <option value="私企">私企</option>
<br></select> Copy after login
四、表单选择器
1. :input（取input,textarea,select,button元素）
:input元素这里就不再多说了，前面的一些例子中也已经囊括了。
2. :text（取单行文本框元素）和:password（取密码框元素）
这两个选择器分别和属性选择器$('input[type=text]')、$('input[type=password]')等同。
<script type="text/javascript"><br /> $(document).ready(function() {<br /> $(':text').css('border', '1px solid #FF0000');<br /> $(':password').css('border', '1px solid #0000FF');</script> Copy after login
// 等效代码<br> //$('input[type=text]').css('border', '1px solid #FF0000');<br> //$('input[type=password]').css('border', '1px solid #0000FF');<br> });<br> Copy after login
账户登录
用户名：
密 码：
3. :radio（取单选框元素）
:radio选择器和属性选择器$('input[type=radio]')等同
<script type="text/javascript"><br /> $(document).ready(function() {<br /> $(':radio').each(function() {<br /> alert($(this).val());<br /> });<br /> // 等效代码<br /> /*<br /> $('input[type=radio]').each(function() {<br /> alert($(this).val());<br /> });<br /> */<br /> });</script>你现在工作的企业属于：<br> <input type="radio" name="radio" checked value="外企">外企<br> <input type="radio" name="radio" value="国企">国企<br> <input type="radio" name="radio" value="民企">民企 Copy after login
4. :checkbox（取复选框元素）
:checkbox选择器和属性选择器$('input[type=checkbox]')等同
<script type="text/javascript"><br /> $(document).ready(function() {<br /> $(':checkbox').each(function() {<br /> alert($(this).val());<br /> });<br /> // 等效代码<br /> /*<br /> $('input[type=checkbox]').each(function() {<br /> alert($(this).val());<br /> });<br /> */<br /> });</script><br> 您的兴趣爱好：<br> <input type="checkbox">游泳<br> <input type="checkbox">看书<br> <input type="checkbox" checked value="打篮球">打篮球<br> <input type="checkbox" checked value="电脑游戏">电脑游戏 Copy after login
上面的代码，会将所有额checkbox的value输出出来。若你想选择选中项，有三种写法：
$(':checkbox:checked').each(function() {<br> alert($(this).val());<br>});<br>$('input[type=checkbox][checked]').each(function() {<br> alert($(this).val());<br>});<br>$(':checked').each(function() {<br> alert($(this).val());<br>}); Copy after login
5. :submit（取提交按钮元素）
:submit选择器和属性选择器$('input[type=submit]')等同
6. :reset（取重置按钮元素）
:reset选择器和属性选择器$('input[type=reset]')等同
7. :button（取按钮元素）
:button选择器和属性选择器$('input[type=button]')等同
8. :file（取上传域元素）
:file选择器和属性选择器$('input[type=file]')等同
9. :hidden (retrieve invisible elements)
: The hidden selector is equivalent to the attribute selector $('input[type=hidden]')
The above is the entire content of jQuery selector, is it very comprehensive? If there is anything missing, please let me know and this article will continue to be updated.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
