jQuery 选择器及优化
层级选择器
通过 DOM 的嵌套关系匹配元素
jQuery 层级选择器—-包含选择器、子选择器、相邻选择器、兄弟选择器 4 种
- 包含选择器：
$("a b")在给定的祖先元素下匹配所有后代元素。(不受层级限制) - 子选择器：
$("parent > child")在给定的父元素下匹配所有子元素。 - 相邻选择器：
$("prev + next")匹配所有紧接在prev元素后的next元素。 - 兄弟选择器：
$("prev ~ siblings")匹配prev元素之后的所有sibling元素。
案例：
<BODY>
<!--包含选择器/子选择器/兄弟选择器/相邻选择器-->
<div class="main">
<span>1<img src="images/1.jpg"/></span>
2<img src="images/1.jpg"/>
</div>
3<img src="images/1.jpg">
4<img src="images/1.jpg">
<div>
5<img src="images/1.jpg">
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
//$(".main img").css("border","5px solid red");
//$(".main > img").css("border","5px solid blue");
//$(".main + img").css("border","5px solid blue");
$(".main ~ img").css("border","5px solid blue");
});
</script>
</BODY>
综合应用：
<body>
<h1>沁园春·雪</h1>
<h2>毛泽东</h2>
<div>
<span><div>北国风光，千里冰封，万里雪飘。
<div>望长城内外，惟余莽莽；大河上下，顿失滔滔。</div>
<p>山舞银蛇，原驰蜡象，欲与天公试比高。</p>
<p>须晴日，看红装素裹，分外妖娆。</p>
</div></span>
<p id="mp">江山如此多娇，引无数英雄竞折腰。</p>
</div>
<p class="c1">惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</p>
<p class="c1">一代天骄，成吉思汗，只识弯弓射大雕。</p>
<p>俱往矣，数风流人物，还看今朝。</p>
</body>
<!--
1. 让 id 为 mp 的元素文字大小变成 30px
2. 让 class 名为.c1 的元素背景为#CCFF99
3. 将所有的 div 和 p，统一显示间距
4. 将所有的 div 增加 2 像素 实线 红色
5. 将 div 下的所有子 div 中文字变蓝色 blue
6. 将 div 中包含的 div 颜色变成#FF99FF
7. 将 div 的所有兄弟标签 p 的字体颜色变成蓝色
8. 将紧跟着 div 的 p 标签的边框设为 2 像素 实线 #009900
-->
常用伪类选择器
可以看作是一种特殊的类选择符
选择器
:first匹配找到的第 1 个元素:last匹配找到的最后一个元素:eq匹配一个给定索引值的元素:even匹配所有索引值为偶数的元素:odd匹配所有索引值为奇数的元素:gt(index)匹配所有大于给定索引值的元素:lt(index)匹配所有小于给定索引值的元素:not去除所有与给定选择器匹配的元素
特定位置选择器
:first/:last/:eq(index)
例：
<table>
<tr><th>特定位置选择器</th><th>描述</th></tr>
<tr><td>:first</td><td>匹配找到的第一个元素</td></tr>
<tr><td>:last</td><td>匹配找到的最后一个元素</td></tr>
</table>
指定范围选择器
:even/:odd/:gt(index)/:lt(index)
<table>
<tr><th>指定范围选择器</th><th>描述</th></tr>
<tr><td>:first</td><td>匹配找到的第一个元素</td></tr>
<tr><td>:last</td><td>匹配找到的最后一个元素</td></tr>
<tr><td>:even</td><td>匹配所有索引值为偶数的元素</td></tr>
<tr><td>:odd</td><td>匹配所有索引值为奇数的元素</td></tr>
<tr><td>:gt(index)</td><td>匹配所有索引大于给定索引值的元素</td></tr>
<tr><td>:lt(index)</td><td>匹配所有索引小于给定索引值的元素</td></tr>
</table>
排除选择器
:not 非
<table>
<tr><th>排除选择器</th><th>描述</th></tr>
<tr><td>:not</td><td>排除符合特定匹配规则的元素</td></tr>
</table>
选择器优化：
使用合适的选择器表达式可以提高性能、增强语义并简化逻辑。常用的选择器中， ID 选择器速度最快，其次是类型选择器。
- 多用
ID选择器 - 少直接使用
class选择器 - 多用父子关系，少用嵌套关系
- 缓存
jQuery对象
使用过滤器
jQuery 提供了 2 种选择文档元素的方式：选择器和过滤器
- 类过虑器：根据元素的类属性来进行过滤操作。
hasClass(className)：判断当前jQuery对象中的某个元素是否包含指定类名，包含返回true，不包含返回false
- 下标过滤器：精确选出指定下标元素
eq(index)：获取第 N 个元素。index是整数值，下标从 0 开始
- 表达式过滤器
filter(expr)/(fn)：筛选出与指定表达式/函数匹配的元素集合。- 功能最强大的表达式过滤器，可接收函数参数，也可以是简单的选择器表达式
- 映射
map(callback)：将一组元素转换成其他数组 - 清洗
not(expr)：删除与指定表达式匹配的元素 - 截取
slice(start,end)：选取一个匹配的子集
查找
向下查找后代元素
children():取得所有元素的所有子元素集合（子元素）find():搜索所有与指定表达式匹配的元素（所有后代元素中查找)
查找兄弟元素 siblings() 查找当前元素的兄弟
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
上一篇： jQuery 基础之插件
下一篇： 彻底找到 Tomcat 启动速度慢的元凶
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论