当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery筛选器代码实例

jQuery筛选器代码实例

2019年03月22日  | 移动技术网IT编程  | 我要评论

jquery筛选器代码实例

<!doctype html>
<html lange="en">      <!-- 设置语音 -->
<head>
 <meta charset="uft-8"> <!-- 设置编码格式 -->
 <title>title</title>
 <style>
  .head{
   background-color:black;
   color:wheat;
  }
  .content{
   min-height:50px;
  }
  .hide{
   display:none;
  }
 </style>
</head>
<body>
 <p style="height:400px;width:200px;border 1px solid #dddddd">
  <p class="item">
   <p class="head"> one </p>
   <p id='i1' class="content hide">body</p>
  </p>
  <p class="item">
   <p class="head"> two </p>
   <p id='i1' class="content hide">body</p>
  </p>
  <p class="item">
   <p class="head"> three </p>
   <p id='i1' class="content hide">body</p>
  </p>
 </p>
 <script src="jquery-1.12.4.js"></script>
 <script>
/*选取标签 增加事件操作 这里的function是匿名函数*/
  $(".head").click(function (){
   $(this).next().removeclass('hide');
   $(this).parent().siblings().find('.content').addclass('hide');
   //$(this).next().removeclass('hide').parent().siblings().find('.content').addclass('hide');
   })
  /* 筛选器：
 $(this).next() 下一个
 $(this).prev() 上一个
 $(this).parent() 父
 $(this).children() 子
 $(this).siblings() 兄弟标签
 $(this).find('.hide') 查找相对属性
 */  
 
 //$(this).addclass() 增加属性
 //$(this).removeclass() 移除属性
 
 </script>

</body>
</html>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网