点击切换帐号登陆
帐号密码登陆

jQuery遍历(二)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jquery第六节课</title>
	<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
  <script type="text/javascript">
   // jQuery遍历(用一种相对的关系来查找html元素)
   //  向上查找(祖先元素) 
   //  向下查找(子元素)
   //  同级查找(同胞) 
   $(function(){
   //  向上查找(祖先元素)
     // parent() 方法返回被选元素的直接父元素
     //$('b').parent().css('border','1px solid red')
     //parents() 方法返回被选元素的所有祖先元素
     //$('b').parents().css('border','1px solid blue')
     //parents() 方法会使用可选参数来过滤对祖先元素的搜索
      //$('b').parents('div').css('border','1px solid blue')
   //向下查找(子元素) 
      //children() 方法返回被选元素的所有直接子元素
      //$('div').children().css('border','1px solid red')
      //可过滤
     //$('div').children('a').css('border','1px solid red')
     //find() 方法返回被选元素的后代元素
     //$('div').find('span').css('border','1px solid red')
     //同级查找(同胞)
     //siblings() 方法返回被选元素的所有同胞元素 
     //$('a').siblings().css('border','1px solid red')
      //可过滤
    $('a').siblings('span').css('border','1px solid red')
   })
  </script>
  <style type="text/css">
  *{margin:0;padding:0;}
  div,p{border:1px solid #ccc;margin:20px auto;text-align: center;}
  div{width: 500px;height: 500px;}
  p{width:200px;height:200px;line-height: 200px;}
  </style>
</head>
<body>
   <div>
    <a href="">HTML中文网!</a><br>
     <p>
       <b>欢迎来到HTML中文网!<span>123</span></b>
     </p>
     <span>123</span>
   </div>
</body>
</html>


任务

?不会了怎么办
无数据提示暂无评论哟...我要评论
网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号