Jquery选择器（二）

最新推荐文章于 2021-11-18 14:17:34 发布

会做饭的技术男

最新推荐文章于 2021-11-18 14:17:34 发布

阅读量277

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=hjhj20h1h0kj&title=Jquery%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%88%E4%BA%8C%EF%BC%89

版权

前端专栏收录该内容

2508 篇文章 12 订阅

订阅专栏

三、过滤选择器

1.基本过滤器

获取第一个元素（索引为0）:

$(document).ready(function(){

$("li:first").css("color"," red");
});

获取最后一个元素

$(document).ready(function(){
$("li:last").css("color"," red");
})

获取偶数项元素

$(document).ready(function(){
$("li:even").css("color"," red");
})

获取基数项元素

$(document).ready(function(){

$("li:odd").css("color"," red");
});

获取索引为2的元素（第三个）

$(document).ready(function(){
$("li:eq(2)").css("color"," red");
});

获取索引大于2的元素

$(document).ready(function(){
$("li:gt(2)").css("color"," red");
});

获取索引小于2的元素

$(document).ready(function(){
$("li:lt(2)").css("color"," red");
});

获取除了id为apple的的input元素

$(document).ready(function(){
$("input:not(#apple)").css("background-color"," red");
});

获取标题元素

$(document).ready(function(){
$(":header").css("background-color"," red");
});

<body>

<h1>我是标题元素</h1>
<ul>
<li>第一项元素</li>
<li>第二项元素</li>
<li>第三项元素</li>
<li>第四项元素</li>
<li>第五项元素</li>
</ul>

</body>

2.内容过滤器

获取div内容包含”我“的元素

$(document).ready(function(){
$("#btn1").click(function(){
$("div:contains('qin')").css("background","#bfa");
})

})

获取为空的div

$(document).ready(function(){
$("#btn2").click(function(){
$("div:empty").css("background","#bfa");
}) });

获取含有p元素选择器的div

$(document).ready(function(){
$("#btn3").click(function(){
$("div:has(p)").css("background","#bfa");
}) });

获取含有子元素或者文本的div

$(document).ready(function(){
$("#btn4").click(function(){
$("div:parent").css("background","#bfa");
}) });

<body>
<div>我是秦怡</div>
<div>我喜欢看电影</div>
<div>你呢<p>我是p</p></div>

3.可见性过滤器

显示隐藏的tr

$(document).ready(function(){
$("#btn5").click(function(){
$("tr:hidden").show();
}) });

隐藏显示的tr

$(document).ready(function(){
$("#btn6").click(function(){
$("tr:visible").hide();
}) });

<table>
<tr style="display:none"><td>我是隐藏的元素</td></tr>
<tr><td>我是显示的元素</td></tr>
</table>
<input type="button" value="查找隐藏的元素" id="btn5" />

会做饭的技术男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery选择器（二）

三、过滤选择器1.基本过滤器1.获取第一个元素（索引为0）:$(document).ready(function(){ $("li:first").css("color"," red");});获取最后一个元素$(document).ready(function(){ $("li:last").css("color"," red");})获取偶数项元素$(doc...
复制链接

扫一扫