jQuery选择器
1.1 jQuery基础选择器
名称 | 用法 | 描述 |
---|
ID选择器 | $(“#id”) | 匹配指定ID的元素 |
全选选择器 | $(“*”) | 匹配所有元素 |
类选择器 | $(“.class”) | 获取同一类class的元素 |
标签选择器 | $(“div”) | 获取同一类class标签的所有元素 |
并集选择器 | $(“div,p,li”) | 选取多个元素 |
交集选择器 | $(“li.current”) | 交集元素 |
1.2 jQuery层级选择器
名称 | 用法 | 描述 |
---|
子代选择器 | $(“ul>li”) | 使用>号,代表子代选择器,获取ul下的最近一级子元素li元素,不包括孙子等 |
后代选择器 | $(“ul li”) | 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
<body>
<div>惊喜不,以外不</div>
<div>惊喜不,以外不</div>
<div>惊喜不,以外不</div>
<div>惊喜不,以外不</div>
<ul>
<li>相同的操作1</li>
<li>相同的操作2</li>
<li>相同的操作3</li>
</ul>
<script>
$(function () {
console.log($('div'));
$('div').css('background','pink')
$('ul li').css('color','red')
$('ul li').css('font-family','华文行楷')
})
</script>
</body>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/68dbeb938e49b908936561612a6233ed.png#pic_center)
1.3 jQuery筛选选择器
语法 | 用法 | 描述 |
---|
:first | $(‘li:first’) | 获取第一个li元素 |
:last | $(‘li:last’) | 获取最后—个li元素 |
:eq(index) | $(‘li:eq(2)’) | 获取到的li元素中,选择索引号为2的元素,索引号index从0开始. |
:odd | $(‘li:odd’) | 获取到的li元素中,选择索引号为奇数的元素 |
:even | $(‘li:even’) | 获取到的li元素中,选择索引号为偶数的元素 |
<body>
<ul>
<li>我是第1个ul li</li>
<li>我是第2个ul li</li>
<li>我是第3个ul li</li>
<li>我是第4个ul li</li>
<li>我是第5个ul li</li>
<li>我是第6个ul li</li>
</ul>
<ol>
<li>我是第1个ol li</li>
<li>我是第2个ol li</li>
<li>我是第3个ol li</li>
<li>我是第4个ol li</li>
<li>我是第5个ol li</li>
<li>我是第6个ol li</li>
<li>我是第7个ol li</li>
</ol>
<script>
$(function(){
$('ul li:odd').css('color','aqua')
$('ul li:even').css('color','skyblue')
$('ul li:first').css('color','red')
$('ul li:last').css('color','red')
$('ol li:odd').css('color','red')
$('ol li:even').css('color','aqua')
$('ol li:last').css('color','blue')
$('ol li:first').css('backgroundColor','red')
$('ol li:eq(2)').css('color','yellowgreen')
})
</script>
</body>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7d455b57b1e14c76a38376f77e12fc24.png#pic_center)
1.4 jQuery筛选方法
语法 | 用法 | 说明 |
---|
parent() | $(''li").parent(); | 查找父级 |
children(selector) | $(“ul”).children(“li”) | 查找ul的子集,不包括孙子集等 |
find(selector) | $(“ul”).find(“li”); | 查找ul的子集,包括孙子集等 |
siblings(selector) | $(“.first”).siblings(“li”); | 查找兄弟节点,不包括自己本身 |
nextAll( [expr]) | $(“.first” ).nextAll() | 查找当前元素之后所有的同辈元素 |
prevtAl1([expr]) | $(“.last” ).prevAll() | 查找当前元素之前所有的同辈元素 |
hasclass(class) | $( 'div ’ ).hasClass( “protected”) | 检查当前的元素是否含有某个特定的类,如果有,则返回true |
eq(index) | $(“li”).eq(2); | 获取到的li元素中,选择索引号为2的元素,index 从0开始 |
<body>
<ul>
<li>我是第1个ul li</li>
<li>我是第2个ul li</li>
<li class="item">我是第3个ul li</li>
<li>我是第4个ul li</li>
<li>我是第5个ul li</li>
<li>我是第6个ul li</li>
</ul>
<ol>
<li>我是第1个ol li</li>
<li>我是第2个ol li</li>
<li>我是第3个ol li</li>
<li>我是第4个ol li</li>
<li>我是第5个ol li</li>
<li>我是第6个ol li</li>
<li>我是第7个ol li</li>
</ol>
<dl>
<dd>我是第1个dl dd</dd>
<dd>我是第2个dl dd</dd>
<dd>我是第3个dl dd</dd>
<dd>我是第4个dl dd</dd>
<dd>我是第5个dl dd</dd>
<dd>我是第6个dl dd</dd>
<dd>我是第7个dl dd</dd>
</dl>
<div class="current">我有current</div>
<div>我没有current</div>
<script>
$(function(){
$('ul .item').siblings('li').css('backgroundColor','aqua')
$('ol>li').eq(2).css('font-family','华文行楷')
$('ol>li').eq(3).css('font-size','40px')
$('ol>li:eq(4)').css('color','red')
$('dl>dd').eq(2).nextAll('dd').css('font-size','25px')
$('dl>dd').eq(2).prevAll('dd').css('font-size','25px')
$('dl>dd').eq(2).prevAll('dd').css('color','red')
console.log($('div:first').hasClass('current'));
console.log($('div:last').hasClass('current'));
})
</script>
</body>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/86366e4d7df492b395559a95e0e024dc.png#pic_center)