jQuery的基本使用及选择器和筛选器

回顾

事件

鼠标
click
dblclick
contextmenu
mouseenter
mouseleave
mousemove
mousedown
mouseup

键盘
keydown
keyup
keypress

表单
submit
reset
blur   失去焦点
focus 获取焦点
change 绑定在select
select  
input 事实改变 兼容性

文档事件
load  
unload
beforeunload

图片事件
load
abort
error

其他事件
scroll
resize
ele.on事件 = function(){}
ele.addEventListener('事件名', function(){}, true/false)
Event对象
clientX
clientY
keyCode
button
target 具体触发事件的元素
stopPropagation() 阻止事件冒泡
preventDefault() 阻止默认动作

 

BOM

window  
window.innerWidth
window.inenrHeight

history
length
back()
forward()
go()

screen


location
href
protocol
host
hostname
port
pathname
search
hash

navigator
userAgent

 

DOM

文档对象模型

 

 

 

jQuery

1. jQuery 的介绍

2. jQuery的基本使用

2.2 文档就绪事件

$(document).ready(function(){
   code...
})

//上面的简写 我们通常都用的简写
//表示所有元素都加载完毕才执行jquery操作
$(function(){
   
})

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>jQuery的基本使用</title>
 6 </head>
 7 <body>
 8     <div id="box">HELLO 小丽丽</div>
 9 
10     <script src="../jquery-3.3.1.js"></script>
11     <script>
12         //jqury 
13         //等到 html的元素加载完毕
14         $(document).ready(function(){
15             //获取页面中的元素 连贯操作
16             $("#box").css('width', '200px')
17                      .css('height', '200px')
18                      .css('border', '1px solid red')
19                      .css('background-color', 'green');
20 
21 
22             //原生js  
23             var box = document.querySelector('#box');
24             console.log(box);
25         });
26 
27         //元素加载完毕 再触发
28         $(document).ready(function(){
29             console.log("OK");
30         });
31 
32 
33         //ready的简写
34         $(function(){
35             console.log('ready简写 ok')
36         })
37         
38     </script>
39 </body>
40 </html>
jQuery的基本使用

 

 

2.2 jQueryDOM和原生DOM

jQuery 通过 $(选择器) 获取元素,该元素对象是jqueryDOM。 与原生DOM不同
jQueryDOM是在原生DOM基础上进行的的封装,本质上是由原生DOM组成的类数组对象,可以 [索引] 得到原生DOM
$(原生DOM) 转为 jQuery DOM
jquery对象可以直接调用css方法来给对象设置属性,原生js对象不行,没有css这个方法
原生对象直接obj.style.color这样来设置。
jQuery就是由原生dom组成的类数组对象,从jQuery转成原生对象需要遍历。

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>jQuery DOM对象</title>
 6     <style>
 7         #box {
 8             width:400px;
 9             padding: 20px;
10             border: 1px solid #ccc;
11         }
12     </style>
13 </head>
14 <body>
15     <h1>jQUery 交友</h1>
16     <hr>
17 
18     <div id="box"></div>
19     <ul class="list">
20         <li>Lorem ipsum dolor sit amet.</li>
21         <li>Lorem ipsum dolor sit amet.</li>
22         <li>Lorem ipsum dolor sit amet.</li>
23         <li>Lorem ipsum dolor sit amet.</li>
24         <li>Lorem ipsum dolor sit amet.</li>
25     </ul>
26 
27 
28     <script src="../jquery-3.3.1.js"></script>
29     <script>
30         
31         $(function(){
32 
33             //获取元素对象
34             var $box = $('#box');  //返回的是jquery dom对象 jquery在原生dom的基础上进行了封装
35             var box = document.querySelector('#box');  //原生的JS dom
36 
37             console.log($box, box);
38 
39 
40             $box.css('background-color', 'pink');
41             //box.css('background-color', 'green'); // function not defined
42             box.style.backgroundColor = 'red';
43             //$box.style.height = '300px';
44 
45 
46             //jquery DOM 和 原生JS DOM 有关系
47             //原生的DOM  转为 Jquery DOM
48             $(box).css('height', '200px');
49 
50             //jquery DOM 对象 转为 原生 DOM  本质上 jquery就是由 原生dom组成的 类数组对象
51             $box[0].style.backgroundColor = 'green';
52 
53 
54         });
55 
56 
57         $(function(){
58             var lis = $('.list li');
59             lis.css('border', '1px solid pink');
60 
61         })
62     </script>
63 </body>
64 </html>
jQuery的DOM对象

 

 

3. jQuery 选择器

3.1 基本选择器

同CSS3 基本选择器

class

id

tagName

*

3.2 层级选择器

同CSS3的层级选择器

空格
>
+
~

3.3 基本筛选器

:first  所有符合条件的元素中的第一个 和伪类选择器有区别,伪类选择器是父类元素和子类元素的第一个
:last 所有符合条件的元素中的最后一个
:eq() 从0开始计数
:odd   奇数
:even 偶数
:lt() 小于  
:gt() 大于
:not(选择器) 除了包含选择器的这个元素
ul.item 意思是有item选择器的ul元素,不是ul下有item选择器的元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>基本筛选器 --- jquery选择器</title>
 6     <style>
 7         ul {
 8             width: 600px;
 9             list-style:none;
10             padding:0;
11         }
12         li {
13             border: 1px solid #ccc;
14             padding: 10px;
15             margin:5px 0px;
16         }
17     </style>
18 </head>
19 <body>
20     <h1>选择器</h1>
21     <hr>
22 
23     <ul>
24         <li>Lorem ipsum dolor sit amet.</li>
25         <li>Lorem ipsum dolor sit amet.</li>
26         <li>Lorem ipsum dolor sit amet.
27             <ol>
28                 <li>Lorem ipsum dolor.</li>
29                 <li>Lorem ipsum dolor.</li>
30                 <li>Lorem ipsum dolor.</li>
31                 <li class='item'>Lorem ipsum dolor.</li>
32                 <li>Lorem ipsum dolor.</li>
33             </ol>
34         </li>
35         <li>Lorem ipsum dolor sit amet.</li>
36         <li>Lorem ipsum dolor sit amet.</li>
37         <li>Lorem ipsum dolor sit amet.</li>
38     </ul>
39 
40     <script src="../jquery-3.3.1.js"></script>
41     <script>
42         $(function(){
43 
44             //:first
45             $('li:first').css('border', '2px solid red');
46             $('li:last').css('border', '2px solid red');
47             $('li:eq(4)').css('border', '2px solid red'); //从0开始
48             /*$('li:odd').css('border', '2px solid green'); 
49             $('li:even').css('border', '2px solid yellow'); */
50             //$('li:gt(3)').css('border', '2px solid purple');
51             // $('li:lt(3)').css('border', '2px solid purple');
52             $('li:not(".item")').css('border', '2px solid blue');
53 
54 
55 
56         })
57     </script>
58 </body>
59 </html>
基本筛选器

 

 

3.4 内容选择器

:contains(text)  包含指定文字的元素 如果该元素外面有父元素,父元素必定也是包含该文字的。
:has(选择器)     包含指定子元素的元素
:empty           没有子元素也没有内容的元素
:parent           有子元素或者有内容的元素 总结的很到位 有内容或者没内容但是有子元素就可以
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>基本筛选器 --- jquery选择器</title>
 6     <style>
 7         ul {
 8             width: 600px;
 9             list-style:none;
10             padding:0;
11         }
12         li {
13             border: 1px solid #ccc;
14             padding: 10px;
15             margin:5px 0px;
16         }
17     </style>
18 </head>
19 <body>
20     <h1>选择器</h1>
21     <hr>
22 
23     <ul>
24         <li>Lorem ipsum dolor sit amet.</li>
25         <li>Lorem ipsum dolor sit amet.</li>
26         <li>Lorem ipsum dolor sit amet.
27             <ol>
28                 <li>Lorem ipsum 小丽丽 dolor.</li>
29                 <li>Lorem ipsum dolor.</li>
30                 <li>Lorem ipsum dolor.</li>
31                 <li class='item'>Lorem ipsum dolor.</li>
32                 <li>Lorem ipsum dolor.</li>
33             </ol>
34         </li>
35         <li>Lorem ipsum dolor sit amet.</li>
36         <li>Lorem ipsum dolor sit amet.</li>
37         <li>
38             <li></li>
39         </li>
40         <li>Lorem ipsum dolor sit amet.</li>
41     </ul>
42 
43     <script src="../jquery-3.3.1.js"></script>
44     <script>
45         $(function(){
46             // $("li:contains('小丽丽')").css('border', '2px solid red');
47             // $("li:has('.item')").css('border', '2px solid red');
48             // $("li:empty").css('border', '2px solid red'); //没有子元素,也不能有内容
49             $("li:parent").css('border', '2px solid red'); //有子元素 或有内容
50         })
51     </script>
52 </body>
53 </html>
内容选择器

 

 

3.5 可见性选择器

:hidden
:visible

3.6 属性选择器

[attr]              .list img[title]
[attr=value]   img[title=hello]
[attr!=val]   不等于
[attr^=val]
[attr$=val]
[attr*=val] attr属性 包含 val
[][][]

注意
少了 ~= 和 |=

3.7 子元素选择器

:first-child
:first-of-type
:last-child
:last-of-type
:nth-child
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type

3.8 表单选择器

:input  所有的表单控件  input、select、textarea、button
:text   text表单的控件才能改变css样式
:password
:radio
:checkbox
:submit
:reset
:button
:file
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表单选择器</title>
 6 </head>
 7 <body>
 8     <input type="text" name="" id=""> <br>
 9     <input type="password" name="" id="" disabled> <br>
10 
11     <select name="" id="">
12         <option value="1">1</option>
13         <option value="1" selected>2</option>
14         <option value="1">3</option>
15         <option value="1">4</option>
16     </select>
17     
18     
19     <script src="../jquery-3.3.1.js"></script>
20     <script>
21         $(function(){
22 
23             // $(':text').css('border', '1px solid red');
24             // $(':input').css('border', '1px solid red'); //所有的表单控件
25 
26             $(':enabled').css('border', '2px solid green')
27             $(':selected').css('color', 'red'); //设置的是option
28         })
29     </script>
30 </body>
31 </html>
表单选择器

 

 

3.9 表单对象选择器

:disabled
:enabled 能够被选择的会改变样式
:checked
:selected 元素被选为默认元素

 

4 jQuery 筛选器

4.1 过滤

eq(index) 从0开始
first()
last()
filter(选择器)
not(选择器)
has(选择器) 包含指定子元素的元素
slice(start, end) 切片 从0开始
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>筛选器</title>
 6     <style>
 7         ul {
 8             width: 600px;
 9             list-style:none;
10             padding:0;
11         }
12         li {
13             border: 1px solid #ccc;
14             padding: 10px;
15             margin:5px 0px;
16         }
17     </style>
18 </head>
19 <body>
20     <h1>筛选器</h1>
21     <hr>
22 
23     <ul>
24         <li>Lorem ipsum dolor sit amet.</li>
25         <li>Lorem ipsum dolor sit amet.</li>
26         <li>Lorem ipsum dolor sit amet.
27             <ol>
28                 <li>Lorem ipsum 小丽丽 dolor.</li>
29                 <li>Lorem ipsum dolor.</li>
30                 <li>Lorem ipsum dolor.</li>
31                 <li class='item'>Lorem ipsum dolor.</li>
32                 <li>Lorem ipsum dolor.</li>
33             </ol>
34         </li>
35         <li>Lorem ipsum dolor sit amet.</li>
36         <li>Lorem ipsum dolor sit amet.</li>
37         <li></li>
38         <li>Lorem ipsum dolor sit amet.</li>
39     </ul>
40 
41     <script src="../jquery-3.3.1.js"></script>
42     <script>
43         $(function(){
44             $('li').first().css('border', '2px solid red');
45             $('li').last().css('border', '2px solid red');
46             $('li').eq(3).css('border', '2px solid red');
47             // $('li').filter('.item').css('border', '2px solid red');
48             // $('li').not('.item').css('border', '2px solid red');
49             // $('li').has('.item').css('border', '2px solid red');
50             // $('li').slice(2,6).css('border', '2px solid red');
51 
52         })
53     </script>
54 </body>
55 </html>
过滤

 

 

4.2 查找

查找 子元素
children([selector]) 子元素
find(selector)       后代元素

查找 父元素
parent([selector])
parents([selector])
parentsUntil([selector])
offsetParent()

#兄弟元素
next([selector]) 后面紧邻的兄弟元素
nextAll([selector]) 后面所有的兄弟元素
nextUntil([selector]) 后面兄弟元素 指定结束条件
prev([selector]) 前面紧邻的兄弟元素
prevAll([selector])
prevUntil([selector])
siblings([selector]) 所有的兄弟元素(除了自己)

#其他
closest(selector) 从自己开始往祖先元素找,返回第一个满足条件的
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>筛选器</title>
 6     <style>
 7         ul {
 8             width: 600px;
 9             list-style:none;
10             padding:0;
11             position: relative;
12         }
13         li {
14             border: 1px solid #ccc;
15             padding: 10px;
16             margin:5px 0px;
17         }
18     </style>
19 </head>
20 <body>
21     <h1>筛选器</h1>
22     <hr>
23 
24     <ul>
25         <li>Lorem ipsum dolor sit amet.</li>
26         <li>Lorem ipsum dolor sit amet.</li>
27         <li id="myItem">Lorem ipsum dolor sit amet.
28             <ol>
29                 <li>Lorem ipsum 小丽丽 dolor.</li>
30                 <li>Lorem ipsum dolor.</li>
31                 <li>Lorem ipsum dolor.</li>
32                 <li class='item'>Lorem ipsum dolor.</li>
33                 <li>Lorem ipsum dolor.</li>
34             </ol>
35 
36             <ul>
37                 <li>lorem</li>
38                 <li>lorem</li>
39                 <li>lorem</li>
40             </ul>
41         </li>
42         <li>Lorem ipsum dolor sit amet.</li>
43         <li>Lorem ipsum dolor sit amet.</li>
44         <li></li>
45         <li>Lorem ipsum dolor sit amet.</li>
46     </ul>
47 
48     <script src="../jquery-3.3.1.js"></script>
49     <script>
50         $(function(){
51             //破坏性操作
52             //$('#myItem').css('border', '2px solid red');
53 
54             //所有的子元素
55             // $('#myItem').children().css('border', '2px solid red');
56             // $('#myItem').find('ul').css('border', '2px solid red');
57 
58 
59             //查找父元素
60             // $("#myItem").parent().css('border', '2px solid green');
61             // $("#myItem").parents().css('border', '2px solid green');  // 可以指定到具体的父元素 默认所有的祖先元素
62 
63             //$("#myItem").parentsUntil('body').css('border', '2px solid green');  //所有的祖先元素 指定一个结束位置
64             // $("#myItem").offsetParent().css('border', '2px solid green');  //最先定位的祖先元素
65 
66 
67             //查找兄弟元素
68             // $('#myItem').next().css('border', '2px solid red');
69             // $('#myItem').nextAll(':empty').css('border', '2px solid red');
70             //$('#myItem').nextUntil(':empty').css('border', '2px solid red');
71             
72             // $('#myItem').prev().css('border', '2px solid red');
73             // // $('#myItem').prevAll().css('border', '2px solid red');
74             // $('#myItem').prevUntil().css('border', '2px solid red');
75 
76             //$('#myItem').siblings(':parent').css('border', '2px solid red');
77 
78             //从自己开始 往上 找 找到第一个满足条件的
79             // $('.item').closest('ol').css('border', '2px solid red');
80         })
81     </script>
82 </body>
83 </html>
查找

 

 

 

4.3 串联

add(标签元素)  添加额外的标签元素,和之前的标签元素共享样式设置
addBack() 符合条件的元素设置完样式也会对自己本身进行设置
end()     

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>筛选器串联</title>
 6     <style>
 7         ul {
 8             list-style:none;
 9             width: 600px;
10             padding: 0px;
11         }
12         li {
13             border:1px solid #ccc;
14             padding:10px;
15             margin:5px 0px;
16         }
17         li.active {
18             background: #f5f5f5
19         }
20 
21         p {
22             padding: 20px;
23             width: 800px;
24             border: 2px dashed #ccc;
25         }
26     </style>
27 </head>
28 <body>
29     <h1>串联</h1>
30     <hr>
31 
32     <ul class="list">
33         <li>Lorem ipsum dolor sit amet.</li>
34         <li>Lorem ipsum dolor sit amet.</li>
35         <li class="active">Lorem ipsum dolor sit amet.</li>
36         <li>Lorem ipsum dolor sit amet.</li>
37         <li>Lorem ipsum dolor sit amet.</li>
38     </ul>
39 
40     <div class="article">
41         <p>Lorem ipsum dolor sit amet.</p>
42         <p>Lorem ipsum dolor sit amet.</p>
43         <p>Lorem ipsum dolor sit amet.</p>
44         <p>Lorem ipsum dolor sit amet.</p>
45         <p>Lorem ipsum dolor sit amet.</p>
46     </div>
47 
48     <script src="../jquery-3.3.1.js"></script>
49     <script>
50         $(function(){
51             // $('.list li').add('p').css('border', '2px solid red')
52             $('li.active').nextAll('li').addBack().css('border', '2px solid red')
53             $('li.active').nextAll('li').css('border', '2px solid red').end().css('background', 'pink');
54 
55 
56             console.log($('.list').contents())
57 
58         //     $('li').html('HELLO') //innerHTML
59         //     $('li').text('HELLO'); //innerText
60         })
61     </script>
62 </body>
63 </html>
串联

 

 

附上jQuery操作菜单实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>菜单实例</title>
 6     <style>
 7         ul {
 8             padding:0;
 9             margin:0;
10             list-style: none;
11         }
12         .nav {
13             width: 120px;
14         }
15         .nav h2 {
16             margin:0;
17             font-size: 16px;
18             font-weight: normal;
19             padding: 0px 20px;
20             height: 40px;
21             line-height: 40px;
22             border:1px solid #999;
23             border-bottom:none;
24             background: #369;
25             cursor: pointer;
26         }
27         .nav ul {
28             border:1px solid #999;
29             display: none;
30         }
31         .nav li a{
32             color:#333;
33             font-size: 14px;
34             text-align: center;
35             text-decoration: none;
36             display: block;
37             padding: 0px 20px;
38             height: 30px;
39             line-height: 30px;
40             border-bottom:1px solid #999;
41         }
42         .nav li:last-child a {
43             border-bottom:none;
44         }
45     </style>
46 </head>
47 <body>
48     <h1>后台管理</h1>
49     <hr>
50 
51     <div class="nav">
52         <h2>用户管理</h2>
53         <ul>
54             <li><a href="#">用户列表</a></li>
55             <li><a href="#">用户添加</a></li>
56             <li><a href="#">用户删除</a></li>
57             <li><a href="#">用户修改</a></li>
58         </ul>
59 
60         <h2>订单管理</h2>
61         <ul>
62             <li><a href="#">订单列表</a></li>
63             <li><a href="#">订单添加</a></li>
64             <li><a href="#">订单删除</a></li>
65             <li><a href="#">订单修改</a></li>
66         </ul>
67 
68 
69         <h2>商品管理</h2>
70         <ul>
71             <li><a href="#">用户列表</a></li>
72             <li><a href="#">用户添加</a></li>
73             <li><a href="#">用户删除</a></li>
74             <li><a href="#">用户修改</a></li>
75         </ul>
76 
77         <h2>评论管理</h2>
78         <ul>
79             <li><a href="#">用户列表</a></li>
80             <li><a href="#">用户添加</a></li>
81             <li><a href="#">用户删除</a></li>
82             <li><a href="#">用户修改</a></li>
83         </ul>
84     </div>
85 
86     <script src="../jquery-3.3.1.js"></script>
87     <script>
88         $(function(){
89             $('.nav h2').on('click', function(){
90                 //$(this).next('ul').toggle();
91                 $(this).next('ul').slideToggle();
92             })
93         })
94     </script>
95 </body>
96 </html>
slideToggle

 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>菜单实例</title>
  6     <style>
  7         ul {
  8             padding:0;
  9             margin:0;
 10             list-style: none;
 11         }
 12         .nav {
 13             width: 120px;
 14         }
 15         .nav h2 {
 16             margin:0;
 17             font-size: 16px;
 18             font-weight: normal;
 19             padding: 0px 20px;
 20             height: 40px;
 21             line-height: 40px;
 22             border:1px solid #999;
 23             border-bottom:none;
 24             background: #369;
 25             cursor: pointer;
 26         }
 27         .nav ul {
 28             border:1px solid #999;
 29             height: 0px;
 30             border-width:0px;
 31             overflow: hidden;
 32             transition:all .5s;
 33 
 34         }
 35         .nav ul.active {
 36             height: 125px;
 37             border-width: 1px;
 38         }
 39         .nav li a{
 40             color:#333;
 41             font-size: 14px;
 42             text-align: center;
 43             text-decoration: none;
 44             display: block;
 45             padding: 0px 20px;
 46             height: 30px;
 47             line-height: 30px;
 48             border-bottom:1px solid #999;
 49         }
 50         .nav li:last-child a {
 51             border-bottom:none;
 52         }
 53     </style>
 54 </head>
 55 <body>
 56     <h1>后台管理</h1>
 57     <hr>
 58 
 59     <div class="nav">
 60         <h2>用户管理</h2>
 61         <ul>
 62             <li><a href="#">用户列表</a></li>
 63             <li><a href="#">用户添加</a></li>
 64             <li><a href="#">用户删除</a></li>
 65             <li><a href="#">用户修改</a></li>
 66         </ul>
 67 
 68         <h2>订单管理</h2>
 69         <ul>
 70             <li><a href="#">订单列表</a></li>
 71             <li><a href="#">订单添加</a></li>
 72             <li><a href="#">订单删除</a></li>
 73             <li><a href="#">订单修改</a></li>
 74         </ul>
 75 
 76 
 77         <h2>商品管理</h2>
 78         <ul>
 79             <li><a href="#">用户列表</a></li>
 80             <li><a href="#">用户添加</a></li>
 81             <li><a href="#">用户删除</a></li>
 82             <li><a href="#">用户修改</a></li>
 83         </ul>
 84 
 85         <h2>评论管理</h2>
 86         <ul>
 87             <li><a href="#">用户列表</a></li>
 88             <li><a href="#">用户添加</a></li>
 89             <li><a href="#">用户删除</a></li>
 90             <li><a href="#">用户修改</a></li>
 91         </ul>
 92     </div>
 93 
 94     <script src="../jquery-3.3.1.js"></script>
 95     <script>
 96         $(function(){
 97             $('.nav h2').on('click', function(){
 98                 $(this).next('ul').toggleClass('active')
 99             })
100         })
101     </script>
102 </body>
103 </html>
css3实现下拉菜单

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>菜单实例</title>
 6     <style>
 7         ul {
 8             padding:0;
 9             margin:0;
10             list-style: none;
11         }
12         .nav {
13             width: 120px;
14         }
15         .nav h2 {
16             margin:0;
17             font-size: 16px;
18             font-weight: normal;
19             padding: 0px 20px;
20             height: 40px;
21             line-height: 40px;
22             border:1px solid #999;
23             border-bottom:none;
24             background: #369;
25             cursor: pointer;
26         }
27         .nav ul {
28             border:1px solid #999;
29             display: none;
30         }
31         .nav li a{
32             color:#333;
33             font-size: 14px;
34             text-align: center;
35             text-decoration: none;
36             display: block;
37             padding: 0px 20px;
38             height: 30px;
39             line-height: 30px;
40             border-bottom:1px solid #999;
41         }
42         .nav li:last-child a {
43             border-bottom:none;
44         }
45     </style>
46 </head>
47 <body>
48     <h1>后台管理</h1>
49     <hr>
50 
51     <div class="nav">
52         <h2>用户管理</h2>
53         <ul>
54             <li><a href="#">用户列表</a></li>
55             <li><a href="#">用户添加</a></li>
56             <li><a href="#">用户删除</a></li>
57             <li><a href="#">用户修改</a></li>
58         </ul>
59 
60         <h2>订单管理</h2>
61         <ul>
62             <li><a href="#">订单列表</a></li>
63             <li><a href="#">订单添加</a></li>
64             <li><a href="#">订单删除</a></li>
65             <li><a href="#">订单修改</a></li>
66         </ul>
67 
68 
69         <h2>商品管理</h2>
70         <ul>
71             <li><a href="#">用户列表</a></li>
72             <li><a href="#">用户添加</a></li>
73             <li><a href="#">用户删除</a></li>
74             <li><a href="#">用户修改</a></li>
75         </ul>
76 
77         <h2>评论管理</h2>
78         <ul>
79             <li><a href="#">用户列表</a></li>
80             <li><a href="#">用户添加</a></li>
81             <li><a href="#">用户删除</a></li>
82             <li><a href="#">用户修改</a></li>
83         </ul>
84     </div>
85 
86     <script src="../jquery-3.3.1.js"></script>
87     <script>
88         $(function(){
89             $('.nav ul:first').show();
90             $('.nav h2').on('click', function(){
91                 $(this).next('ul').slideDown().siblings('ul').slideUp();
92             })
93         })
94     </script>
95 </body>
96 </html>
手风琴菜单

 

posted @ 2018-08-15 17:31  Roc_Atlantis  阅读(893)  评论(0编辑  收藏  举报