jquery如何选取子元素

在jquery中选取子元素的方法：1.新建html项目，引入jquery；2.在项目中创建html元素；3.使用child方法选取子元素；

具体步骤如下：

首先，在新建一个html项目，在项目中引入jquery；

<script type="text/javascript" class="lazy" data-src="/static/jquery-2.1.4.min.js"></script>

引入jquery后，在项目中创建html元素，用于测试；

<div class="top">
<div>
<li></li>
<li></li>
</div>
<div>
<li></li>
<li></li>
</div>
</div>

最后，html元素创建好后，在项目中使用child方法即可选取子元素；

1）使用first-child选取父元素中的第一个子元素

$(document).ready(function(){
$('#btn2').click(function(){
$('div.one :first-child').css("background","#bbffaa");
})
});

2）使用last-child选取父元素中的最后一个子元素

$(document).ready(function(){
$('#btn3').click(function(){
$('div.one :last-child').css("background","#bbffaa");
})
});

3）使用nth-child(n)选取父元素中的第n个个子元素

$(document).ready(function(){
$('#btn1').click(function(){
$('div.one :nth-child(n)').css("background","#bbffaa");
})
});