概述
jQuery基本选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>hello</div>
<a href="">click</a>
<p id="p1" alex="sb">pppp</p>
<p id="p2" alex="sb">pppp</p>
<div class="outer">outer
<div class="inner">
inner
<p>inner p</p>
</div>
<p>alex</p>
</div>
<div class="outer2">Yuan</div>
<p>xialv</p>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>4444</li>
<li>4444</li>
<li>4444</li>
</ul>
<input type="text">
<input type="checkbox">
<input type="submit">
<script src="jquery-3.1.1.js"></script>
<script>
// 基本选择器
$("div").css("color","red")
$("*").css("color","red")
$("#p1").css("color","red")
$(".outer").css("color","red")
$(".inner,p,div").css("color","red")
// 层级选择器
$(".outer p").css("color","red")
$(".outer>p").css("color","red")
$(".outer+p").css("color","red")
$(".outer~p").css("color","red")
// 基本筛选器
$("li:first").css("color","red")
$("li:eq(0)").css("color","red")
$("li:gt(2)").css("color","red")
$("li:lt(2)").css("color","red")
// 属性选择器
$("[alex='sb'][id='p1']").css("color","red")
// 表单选择器，下面两行等价
$("[type='text']").css("width","200px")
$(":text").css("width","400px")
</script>
</body>
</html>筛选器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="">click</a>
<p id="p1" alex="sb">pppp</p>
<p id="p2" alex="sb">pppp</p>
<div class="outer">outer
<div class="inner">
inner
<p>inner p</p>
</div>
<p>alex</p>
</div>
<div class="outer2">Yuan</div>
<p>xialv</p>
<ul>
<li class="begin">1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>4444</li>
<li id="end">4444</li>
<li>4444</li>
</ul>
<input type="text">
<input type="checkbox">
<input type="submit">
<script src="jquery-3.1.1.js"></script>
<script>
//筛选器
$("li").eq(2).css("color","red");
索引筛选，起始为0
$("li").first().css("color","red");
第一个
$("li").last().css("color","red");
最后一个
//查找筛选器
$(".outer").children("p").css("color","red");
子代
$(".outer").find("p").css("color","red");
后代
$("li").eq(2).next().css("color","red");
下一个
$("li").eq(2).nextAll().css("color","red");下面所有
$("li").eq(2).nextUntil("#end").css("color","red");指定下面区间筛选
$("li").eq(4).prev().css("color","red");
上一个
$("li").eq(4).prevAll().css("color","red");上面所有
$("li").eq(4).prevUntil("li:eq(0)").css("color","red");指定上面区间筛选
console.log($(".outer .inner p").parent().html())
$(".outer .inner p").parents().css("color","red");
$(".outer .inner p").parentsUntil("body").css("color","red");
$(".outer").siblings().css("color","red")
</script>
</body>
</html>最后
以上就是跳跃眼睛为你收集整理的jQuery的选择器和筛选器的全部内容，希望文章能够帮你解决jQuery的选择器和筛选器所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复