jQuery筛选器
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery筛选器相关的知识，希望对你有一定的参考价值。
一、jQuery常用筛选器有以下几种：
1、下一个标签
$(document).next()
2、上一个标签
$(document).prev()
3、父亲标签
$(document).parent()
4、孩子标签
$(document).children()
5、兄弟标签
$(document).siblings()
6、子孙中查找
$(document).find(‘.i1‘) /*在子孙中查找class属性为i1的标签*/
二、具体应用
实现点击菜单栏出现当前菜单下的内容，并隐藏其它菜单下的内容：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .menu{ 8 background-color: yellow; 9 width: 200px; 10 } 11 .content{ 12 background-color: red; 13 width: 100px; 14 } 15 .hide{ 16 display: none; 17 } 18 </style> 19 </head> 20 <body> 21 <div> 22 <div> 23 <div class="menu">目录1</div> 24 <div class="content hide">内容1</div> 25 <div class="content hide">内容1</div> 26 </div> 27 <div> 28 <div class="menu">目录2</div> 29 <div class="content hide">内容2</div> 30 <div class="content hide">内容2</div> 31 </div> 32 <div> 33 <div class="menu">目录3</div> 34 <div class="content hide">内容3</div> 35 <div class="content hide">内容3</div> 36 </div> 37 </div> 38 <script src=‘jquery-3.2.1.js‘></script> 39 <script type="text/javascript"> 40 $(‘.menu‘).click(function(){ 41 $(this).siblings().removeClass(‘hide‘); 42 $(this).parent().siblings().find(‘.content‘).addClass(‘hide‘) 43 }) 44 </script> 45 </body> 46 </html>
以上是关于jQuery筛选器的主要内容，如果未能解决你的问题，请参考以下文章