jQuery-筛选
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jq</title> <script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <style> </style> </head> <body> <script> $(document).ready(function(){ $("#but1").click(function(){ $("p").eq(2).toggle();// 0开始计数 -1即为最后一个 });//查找第3个 $("#but2").click(function(){ $("p").first().toggle(); });//查找第一个 $("#but3").click(function(){ $("p").last().toggle(); });//查找最后一个 $("#but4").click(function(){ alert("p中是否有input："+$("p").hasClass("intro")); });//如果p有intro的类，就true $("#but5").click(function(){ $("p").filter(".intro").toggle(); });//隐藏显示含intro类的p $("#but6").click(function(){ alert("p中是否有intro："+$("[class='intro']").is("p")); });//如果有含intro的类的p就true $("#but7").click(function(){ $("#x").append( $("input").map(function(){ return $(this).val(); }).get().join(", ") ); });//为input列一个表在#x $("#but8").click(function(){ $('p').has('b').css('background-color', 'red'); });//p中含b的 $("#but9").click(function(){ $("p").not("#selected").css('background-color', 'red'); });//p中id为selected的删除颜色 $("#but10").click(function(){ $("p").slice(0, 2).wrapInner("<b></b>"); });//选择第一，二个p加上b $("#but11").click(function(){ $("h2").add("p").add("span").css("color","yellow"); });//将后面的串联于h2 $("#but12").click(function(){ $("span").contents().replaceWith("<b>加粗内容</b>");; });//文本节点 }); </script> <input id="but1" type="button" value="第n个"> <input id="but2" type="button" value="第一个"> <input id="but3" type="button" value="最后个"> <input id="but4" type="button" value="判断"> <input id="but5" type="button" value="含类的值"> <input id="but6" type="button" value="判断"> <input id="but7" type="button" value="列个表"> <input id="but8" type="button" value="x中含x的"> <input id="but9" type="button" value="删x中含x的"> <input id="but10" type="button" value="第n，n...个"> <input id="but11" type="button" value="集合"> <input id="but12" type="button" value="文本节点"> <br /> <h2>标题</h2> <p>段落</p> <span>内容</span> <p id="selected">小<b>白</b>鼠1</p> <p>小<b>白</b>鼠2</p> <p class="intro">小<b>白</b>鼠3</p> <p type="xxx">小<b>白</b>鼠4</p> <p>小<b>白</b>鼠5</p> <p>小<b>白</b>鼠6</p> <b id="x"></b> </body> </html>
筛选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq</title>
<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
.after{
color:red;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
$("#but1").click(function(){
$("p").children().css("color", "blue");
});//p的子元素
$("#but2").click(function(){
$("b").closest("p").css("color", "blue");
});//从本级向上级查找p
$("#but3").click(function(){
$("p").find("b").css("color","pink");
});//从本级向下级查找b
$("#but4").click(function(){
$("p").next().css("color","pink");
});//与p同级
$("#but5").click(function(){
$("p").nextAll().addClass("after");
});//改变与p同级的的类
$("#but6").click(function(){
$("p.intro").nextUntil("p#x").css({"color":"red","border":"2px solid red"});
});//查找与p同级的直到匹配的元素
$("#but7").click(function(){
$("p").offsetParent().css("background-color","red");
});//查找最近的带有position：relative，absolute的父级
$("#but8").click(function(){
$("#x").parent().css("color","#fff");
});//唯一父级
$("#but9").click(function(){
$("#x").parents().css("background","red");
});//祖先级（父级，祖父，曾祖父...）
$("#but10").click(function(){
$("#x").parentsUntil("#d").css({"color":"red","border":"2px solid red"});
});//查找与#x同级的直到匹配的元素
$("#but11").click(function(){
$("p").prev().css("color","red");
});//上面的兄弟节点
$("#but12").click(function(){
$("p").prevAll().css("color","red");
});//最后一个p元素之前的所有同级元素
$("#but13").click(function(){
$("p").prevUntil("#x").css("color","pink");
});//p到#x之前
$("#but14").click(function(){
$("p").siblings().css("color","red");
});//所有p的同辈元素
});
</script>
<input id="but1" type="button" value="子元素">
<input id="but2" type="button" value="向上查找">
<input id="but3" type="button" value="向下查找">
<input id="but4" type="button" value="同级">
<input id="but5" type="button" value="同级的类">
<input id="but6" type="button" value="之间">
<input id="but7" type="button" value="最近父级">
<input id="but8" type="button" value="唯一父级">
<input id="but9" type="button" value="祖先级">
<input id="but10" type="button" value="之间">
<input id="but11" type="button" value="兄弟节点">
<input id="but12" type="button" value="同级">
<input id="but13" type="button" value="之间">
<input id="but14" type="button" value="同辈元素">
<br />
<div style="border:1px solid black;width:300px;height:300px;position:absolute;top:40px;">
<br />
<div id="d" style="border:1px solid black;width:200px;height:260px;background:yellow;">
<p>小<b>白</b>鼠1</p>
<p>小<b>白</b>鼠2</p>
<p class="intro">小<b>白</b>鼠3</p>
<p type="xxx">小<b>白</b>鼠4</p>
<p>小<b>白</b>鼠5</p>
<div>
<p id="x">小<b>白</b>鼠6</p>
</div>
</div>
</div>
</body>
</html>
查找
