|
|
一、选择器分类
1.基本选择器
2.层级选择器
3.属性选择器
4.过滤选择器
5.可见选择器
二、选择器详解
*1.基本选择器
1）标签选择器 语法：$("h2") 选取HTML中所有的h2标签
2）id选择器 语法：$("#one") 选取id为one的元素（可以很好的获取单个元素）与css中格式相同
3）类选择器 语法：$(".one") 选取class为one的所有元素 与css中格式相同
4）并集选择器 语法： $("div,p,.title") 选取所有div、p和class为title的元素（注意：每个元素以逗号（,）分隔开
5）交集选择器 语法：$("h2 .title) 选取所有拥有class为title 的h2元素
6）全局选择器 语法：$("*") 选取所有元素（注意：* 代表匹配所有）
*2.层级选择器
1）后代选择器 语法：$("#menu span")选取id为menu的所有后代为<span>的元素（不仅包括子代，孙子代。。。也包括）
例：
<div id="menu">
<div class="one">
<SPAN></SPAN>
</div>
<SPAN>
<SPAN></SPAN>
</SPAN>
</div>
2）子代选择器 语法：$("parent>child") 如$("#menu>span") 选取id为menu的所有子类元素 （注意：用>对不同元素进行分隔）
例：
<div id="menu">
<div class="one">
<span></span>
<span></span>
</div>
<SPAN>
<span></span>
</SPAN>
<div></div>
<SPAN></SPAN>
</div>
3）相邻选择器 语法：$("div+span")选取div之后的同辈的相邻元素 （注意：用+对不同元素进行分隔）
4）同辈选择器 语法：$("div~span")选取div的所有同辈元素 （注意：用~对多个元素进行分隔）
*3.属性选择器 （注意属性选择器都需要使用方括号[]对元素进行包裹）
1.不给定条件的属性选择器 语法：$("[href]")选取含有属性href的所有元素
2.给定单条件的属性选择器
1）选取属性为特定值得属性 语法：$("[href='#']")选取href属性值为“#”的元素
2）选取属性不等于某值的属性 语法：$("[href!='#']")选取属性href属性值不等于“#”的所有元素
3）选取属性值以特定值开头的选择器 语法：$("[href^='en']")选取href属性值以en开头的属性（注意：^是以什么开头的的意思）
4）选取属性值以特定值结尾的选择器 语法：$("[class$='en']")选取class以en结尾的元素。（注意：$的意思是以什么结尾）
5）选取属性值包含特定值的选择器 语法：$("[class*='en']")选取class包含en的元素。
3.给定多条件的属性选择器
1）选取满足多条件的复合属性选择器 语法：$("li[id][title=新闻要点]")选取含有id属性和title属性为“新闻要点”的<li>元素。
*4.过滤选择器
1.过滤选择器通过特定的过滤规则来筛选元素。其语法特点是使用“:”
1.基本过滤选择器：注意：索引值从0开始
1）:first 选取第一个元素 $("li:first")
2) :last 选取最后一个元素 $("li:last")
3) : odd 选取索引为奇数项的元素 $("li: odd")
4）: even 选取索引值为偶数项的元素 $("li:even")
5) : eq(index) 选取索引值等于index的元素 $("li:eq(1)")
6) : gt(index) 选取索引值大于index的元素 $("li:gt(1)")
7) : lt(index) 选取索引值小于index的元素 $("li:lt(5)")
8) :not(selector)
9) :header
10):focus
2.可见性过滤选择器
1）:visible 选取所有可见的元素 例：$("p:visible").hide() 令所有显示的p标签隐藏
2）:hidden 选取所有隐藏的元素 例：$(" P : hidden").show() 令所有隐藏的p标签进行显示
补充内容 (2019-8-9 15:36):
本人小白，自己平时课堂自己手打的一些笔记。供大家参考，有错误的请指正。 |
评分
-
查看全部评分总评分 : 金币 +100
声明：
1、本帖所有言论、观点及图片均为会员个人观点，不代表本站立场。
2、本帖资源内容来源于网友、站友、作者推广引流自愿分享或其他公开网络渠道，非特殊说明资料一般在百度网盘仅用于交流与学习参考。
3、如本帖内容涉及任何版权或知识产权问题，请立即点论坛右侧邮件图标联系我们，我们将在核实后及时删除，并致以歉意。
4、本站资料仅供站友个人学习参考，禁止以任何形式进行传播或商用；如下载学习，请务必在 24 小时内删除。
|
发表于 2019-8-9 15:35:23
发表于 2019-10-27 00:27:46
