jQuery - 选择器
Posted 萌胖次
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery - 选择器相关的知识，希望对你有一定的参考价值。
1. 基本选择器
// 标签选择器 : 所有标签为td的元素 console.log($("td")); // ID选择器 : ID为td1的元素 console.log($("#td1")); // 类选择器 console.log($(".txtColor")); // 所有class属性值为txtColor的元素 console.log($("td.txtColor")); // 所有td元素中, class值为txtColor的元素 // 通配选择器 : 所有元素 console.log($("*")); // 并集选择器 : 选择所有tr和td元素 console.log($("tr,td")); // 后代选择器 : body标签下所有子标签是span标签的元素 (包含孙子) console.log($("body span")); // 父子选择器 : body标签下所有子标签是span标签的元素 (不包含孙子) console.log($("body>span")); // 后面第一个兄弟元素 : 选择id为#tr1的元素的下一个tr元素 console.log($("#tr1+tr")); // 后面所有兄弟元素 : 选择id为#tr1的元素后面所有的兄弟级tr元素 console.log($("#tr1~tr"));
<style> .txtColor { color: red; } </style>
<body> <span>表格</span> <table border="1px" width="300px" height="150px"> <tr id="tr1"> <td id="td1">aaa</td> <td class="txtColor">bbb</td> <td>ccc</td> </tr> <tr> <td><span>111</span></td> <td>222</td> <td>333</td> </tr> <tr class="txtColor"> <td>444</td> <td>555</td> <td>666</td> </tr> </table> </body>
2. 属性选择器
// 选择在所有span元素中属性带有id的元素 console.log($("span[id]")); // 选择在所有span元素中属性带有id和name的元素 console.log($("span[id][name]")); // 选择在所有span元素中属性带有id并且属性值为s1的元素 console.log($("span[id=‘s1‘]")); // 选择在所有span元素中属性id不为s1的元素, 包括没有id属性的元素 console.log($("span[id!=‘s1‘]")); // 选择在所有span元素中属性id的值以s开头的元素 console.log($("span[id^=‘s‘]")); // 选择在所有span元素中属性id的值以1结尾的元素 console.log($("span[id$=‘1‘]")); // 选择在所有span元素中属性id的值包含a的元素 console.log($("span[id*=‘a‘]"));
<span id="s1" name="s1">111</span> <span id="s2">222</span> <span id="a1">333</span> <span id="a">444</span>
3. 位置选择器
// 针对整个页面 // 页面中第一个span元素和最后一个span元素 console.log($("span:first")); console.log($("span:last")); // 页面中所有span元素 console.log($("span:odd")); // 奇数行 (索引从0开始) console.log($("span:even")); // 偶数行 (索引从0开始) // 页面中第2个span元素, 索引从0开始 console.log($("span:eq(2)")); // 页面中span元素个数索引大于1的元素, 索引从0开始 console.log($("span:gt(1)")); // 页面中span元素个数索引小于2的元素, 索引从0开始 console.log($("span:lt(2)")); // 针对父级元素 // 所有元素中第一个元素为span的元素 console.log($("span:first-child")); // 所有元素中最后一个元素为span的元素 console.log($("span:last-child")); // 获取所有元素中, 子元素只有一个span的span元素 console.log($("span:only-child")); // 获取所有元素中的第2个span元素, 索引从1开始 console.log($("span:nth-child(2)"));
<div> <span>111</span> </div> <div> <span>222</span> <span>333</span> </div>
4. 表单选择器
// 获取所有的表单元素 console.log($(":input")); // 获取所有type为text的表单元素 console.log($(":text")); // 获取所有禁用的表单元素 console.log($(":disabled"));
<form action="#" method="get"> 文本框1 : <input type="text" /> <br /> 文本框2 : <input type="text" disabled="disabled" /> <br /> </form>
5. 内容选择器
// 获取所有带有子元素或文本的td元素 console.log($("td:parent")); // 获取所有不包含子元素或文本的td元素 console.log($("td:empty")); // 获取包含带有val文本的td元素 console.log($("td:contains(‘val‘)")); // 获取包含选择器匹配的元素的td元素 console.log($("td:has(span)"));
<table> <tr> <td><span>value1</span></td> <td></td> </tr> <tr> <td>value2</td> <td></td> </tr> </table>
以上是关于jQuery - 选择器的主要内容，如果未能解决你的问题，请参考以下文章