JQuery中的选择器

基本选择器
id选择器:$(“#id名称”);
元素选择器:$(“元素名称”);
类选择器:$(“.类名”);
通配符:*
多个选择器共用(并集)
HTML代码
JQuery代码
层级选择器
ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
parent > child :在给定的父元素下匹配所有的子元素(儿子)
prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的,同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)
代码演示:
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<script type=”text/javascript” src=”../../js/jquery-1.8.3.js” ></script>
<script>
$(function(){
$(“#btn1”).click(function(){
$(“#div1 .mini”).css(“background-color”,”pink”);
});
$(“#btn2”).click(function(){
$(“#div2 > p”).css(“background-color”,”pink”);
});
$(“#btn3”).click(function(){
$(“#p1 + #div3_div1”).css(“background-color”,”pink”);//必须是紧跟着的
});
$(“#btn4”).click(function(){
$(“#div3_div1 ~ div”).css(“background-color”,”pink”)//第二个标签必须是第一个标签的同辈
});
});
</script>
</head>
<body>
<input type=”button” value=”选择标签1内所有匹配的标签2″ id=”btn1″ />
<input type=”button” value=”选择标签1中的子标签2″  id=”btn2″/>
<input type=”button” value=”选择标签1后面紧跟着的标签”  id=”btn3″/>
<input type=”button” value=”选择标签1后指定标签的同级”  id=”btn4″/>
<h1>div1</h1>
<div id=”div1″> 
<div id=”div1_div1″>
<p class=”mini”>111</p>
<p class=”mini”>222</p>
</div>
<p class=”mini”>333</p>
<p> 我的class不是mini 我不变色</p>
</div>
<h1>div2</h1>
<div id=”div2″>
<div id=”div2_div1″>
<p class=”mini”>你看我不变色,因为我的父类是div2_div1</p>
</div>
<p class=”mini”>555</p>
</div>
 
<h1>div3</h1>
<div id=”div3″>
<p id=”p1″>后面一行会变色</p>
<div id=”div3_div1″>
<p> 选择只选择同级的吗?</p>
</div>
<div>
<p id=”p2″> 你看变色了</p>
<p id=”p3″> 我不变色</p>
</div>
</div>
<h1>div4</h1>
<div id=”div4″>
<p>666</p>
<p>777</p>
</div>
</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注