jquery选择器之基本过滤选择器详解
2018-10-12 14:01
746 查看
<style type="text/css">
/*高亮显示*/
.highlight{
background-color: gray
}
</style>
<body>
<h3>各省市行政区划</h3>
<table border="1" width="50%">
<thead>
<tr>
<th>北京</th>
<th>上海</th>
<th>商丘</th>
</tr>
</thead>
<tbody>
<tr>
<td>海淀</td>
<td>徐汇</td>
<td>睢阳</td>
</tr>
<tr>
<td>朝阳</td>
<td>闸北</td>
<td>梁园</td>
</tr>
<tr>
<td>昌平</td>
<td>黄埔</td>
<td>柘城</td>
</tr>
</tbody>
</table>
</body>
一、:first
$("tr:first").addClass("highlight"); //获取匹配的第一个tr元素
![](https://oscdn.geek-share.com/Uploads/Images/Content/201810/b0b98115ff3542cb40587d5350943892.png)
二、:last()
$("tr:last").addClass("highlight"); //获取匹配的最后一个tr元素
![](https://oscdn.geek-share.com/Uploads/Images/Content/201810/cb0cdd777bf7d7dd5d33953d2ca8f220.png)
三、:not(selector)
$("td:not(:even)").addClass("highlight");//获取除了索引是偶数的td
![](https://oscdn.geek-share.com/Uploads/Images/Content/201810/4cf61335e106e0fd7ca5a72d0fbc9509.png)
四、:even
$("tr:even").addClass("highlight"); //匹配所有索引值为偶数的元素,从 0 开始计数
![](https://oscdn.geek-share.com/Uploads/Images/Content/201810/0fc31550285865ad50460a4e8327ec54.png)
五、:odd
$("tr:odd").addClass("highlight"); //匹配所有索引值为奇数的元素,从 0 开始计数
![](https://oscdn.geek-share.com/Uploads/Images/Content/201810/cfeabc5fbdcf093ed5da334f68af6231.png)
六、:eq(index)
$("tr:eq(2)").addClass("highlight"); //匹配一个给定索引值的元素
![](https://oscdn.geek-share.com/Uploads/Images/Content/201810/fa30022c626cda03fdd0be6729e3d00d.png)
七、:gt(index)
$("tr:gt(1)").addClass("highlight"); //匹配所有大于给定索引值的元素
![](https://oscdn.geek-share.com/Uploads/Images/Content/201810/b9e533bdf8997a92bcfbe3a7e333aa03.png)
八、:lt(index)
$("tr:lt(2)").addClass("highlight"); //匹配所有小于给定索引值的元素
![](https://oscdn.geek-share.com/Uploads/Images/Content/201810/8100e28858f00f993e2aa0016b2a9923.png)
九、:header
$(":header").addClass("highlight"); //匹配如 h1, h2, h3之类的标题元素
![](https://oscdn.geek-share.com/Uploads/Images/Content/201810/491253050d90fc0097bd5042e05da7d7.png)
您可能感兴趣的文章:
相关文章推荐
- jquery选择器之基本过滤选择器详解
- JQuery的基本选择器使用总结以及过滤,文本,可见度的选择代码
- jquery基本过滤选择器:first :last :not(.myclass) :even :odd :eq(1) :gt(5) :lt(1) :header :animated :focus
- jQuery选择器——基本过滤选择器
- jQuery基本过滤选择器用法示例
- jquery选择器之属性过滤选择器详解
- 【5】jQuery学习——入门jQuery选择器之过滤选择器-基本过滤选择器
- 前端学习笔记-jquery-9-(过滤选择器)过滤器:基本过滤器
- jQuery过滤选择器详解
- JavaScript学习笔记8-jQuery基本过滤选择器深度解析
- jQuery基本过滤选择器使用介绍
- JavaScript之jQuery-2 jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)
- 网站前端_jQuery-基础入门.玩转jQuery基本/层次/过滤/表单选择器?
- jQuery过滤选择器详解
- 一步一步学习 JQuery (三) 过滤选择器:基本过滤选择器 && 内容过滤选择器 && 可见性过滤选择器
- jQuery表单对象属性过滤选择器实例详解
- jQuery的基本过滤选择器
- jquery过滤器,过滤器它是在基本选择器与层次选择器获取到一批元素后,再进行过滤操作
- jQuery的选择器—基本过滤选择器
- jQuery过滤选择器详解