您的位置:首页 > Web前端 > JQuery

Jquery父子选择器基础用法

2016-12-04 22:54 417 查看
Jquery父子选择器基础用法

<input type="button" value="div父元素下的第2个子元素红色"  id="b1"/><br>
<input type="button" value="div父元素下的第一个子元素紫色"    id="b2"/><br>
<input type="button" value="div父元素下的最后一个子元素黄色"  id="b3"/><br>
<input type="button" value="div父元素下的仅仅只有一个子元素,那么选中这个子元素橙色"  id="b4"/><br>
<input type="button" value="div父元素下奇数红色偶数黄色"  id="b5"/><br>
<input type="button" value="div父元素下2n+1绿色"  id="b4"/><br>
<br><br>
<div>
<div id="one" class="mini" >XXXXXXXXX  one</div>
<div id="two" class="mini" >XXXXXXXXX  two </div>
<div id="three" class="mini" >XXXXXXXXX  three</div>
<div id="four"  class="mini" >XXXXXXXXX  four</div>
</div>

<div>
<div id="one" class="mini" >XXXXXXXXX  one</div>
</div>


Javascript操作代码:

$("#b1").click(function(){
$("div:nth-child(2)").css("background","red");
});

$("#b2").click(function(){
$("div:first-child").css("background","purple");
});

$("#b3").click(function(){
$("div:last-child").css("background","yellow");
});

$("#b4").click(function(){
$("div:only-child").css("background","orange");
});

$("#b5").click(function(){
$("div:nth-child(even)").css("background","yellow");
$("div:nth-child(odd)").css("background","red");
});

$("#b6").click(function(){
$("div:nth-child(2n+1)").css("background","green");
});


效果:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息