JQuery学习笔记-子元素选择器-创新互联
发展壮大离不开广大客户长期以来的信赖与支持，我们将始终秉承“诚信为本、服务至上”的服务理念，坚持“二合一”的优良服务模式，真诚服务每家企业，认真做好每个细节，不断完善自我，成就企业，实现共赢。行业涉及
玻璃钢雕塑等，在
网站建设公司、
全网营销推广、WAP手机网站、VI设计、软件开发等项目上具有丰富的设计经验。
Untitled Document
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
$(document).ready(function(){
//选取每个class为one的div父元素下的第2个子元素.
$("#btn1").click(function(){
//选取子元素, 需要在选择器前添加一个空格.
$("div.one :nth-child(2)").css("background", "#ffbbaa");
});
//选取每个class为one的div父元素下的第一个子元素.
$("#btn2").click(function(){
$("div.one :first-child").css("background", "#ffbbaa");
});
//选取每个class为one的div父元素下的最后一个子元素.
$("#btn3").click(function(){
$("div.one :last-child").css("background", "#ffbbaa");
});
//如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素.
$("#btn4").click(function(){
$("div.one :only-child").css("background", "#ffbbaa");
});
});
id 为 one,class 为 one 的div
class为mini
