jquery children()函数实例

最新推荐文章于 2021-05-05 16:05:56 发布

eternity668

最新推荐文章于 2021-05-05 16:05:56 发布

阅读量1.8k

点赞数

分类专栏： jquery 文章标签： jquery翻译

jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

在jquery中，children()函数被用来发现匹配元素的子元素，它此选择子元素，不会下到第二代中去。

例如 div 元素有三层子元素：

<divclass="A1">

        <divclass="child">A1-1</div>

        <divclass="child">A1-2</div>

        <divclass="orphan">A1-3</div>

        <divclass="child">A1-4</div>

        <divclass="A2">

               <divclass="child">A2-1</div>

               <divclass="child">A2-2</div>

               <divclass="A3">

                       <divclass="child">A3-1</div>

                       <divclass="child">A3-2</div>

               </div>

        </div>

</div>

1 $(‘.A1’).children()

$('.A1').children().css('background','red');

仅选择匹配的类名为A1元素的第一层子元素。即A2 A3的子元素被忽略。

2 $(‘.A1’).children(‘.child’)

$('.A1').children('.child').css('background','red');

选择类名为A1的元素的子元素中有类名为child的元素。

具体的实例：

<html>
	<head>
		<script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
		<style type="text/css">
			div{
				padding:8px;
				border:1px solid;
				}
			
			</style>
	</head>
	<body>
		<h1>jquery children() example</h1>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#buttonChildren1").click(function(){
					$('div').css("background","white");
					$('.A1').children().css("background",'red');	
					
					});
				$('#buttonChildren2').click(function(){
					$('div').css("background","white");
					$('.A1').children(".child").css("background","red");
					
					
					
					});
				
				
				
				
				});
			
			
			
			</script>
			<div class="A1">
			<div class="child">A1-1</div>
			<div class="child">A1-2</div>
			<div class="orphan">A1-3</div>
			<div class="child">A1-4</div>
   <div class="A2">
  <div class="child">A2-1</div>
  <div class="child">A2-2</div>
  <div class="A3">
    <div class="child">A3-1</div>
    <div class="child">A3-2</div>
  
  </div>
  
  
  </div>			
			</div>
		<br/><br/><br/>
		<input type="button" value=".A1 child()" id="buttonChildren1">
		<input type="button" value=".A1 children(child)" id="buttonChildren2">
		
	</body>
</html>

效果图：