jQuery淘选器

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淘选器

一、jQuery常用筛选器有以下几种：

二、具体应用

相关推荐