• 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             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              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              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              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              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              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              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              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              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-0px;
 31             overflow: hidden;
 32             transition:all .5s;
 33 
 34         }
 35         .nav ul.active {
 36             height: 125px;
 37             border- 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              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>
    手风琴菜单
  • 相关阅读:
    在Eclipse中写第一个hibernate小例子
    [转载]mysql 学习笔记
    hibernate.cfg.xml 配置（摘录）
    j2ee笔试题目
    J2EE综合—Struts常见错误的全面汇总
    在Eclipse中写第一个hibernate小例子
    j2ee笔试题目
    hibernate.cfg.xml 配置（摘录）
    [转载]mysql 学习笔记
    J2EE综合—Struts常见错误的全面汇总
  • 原文地址：https://www.cnblogs.com/Roc-Atlantis/p/9482781.html
Copyright © 2020-2023  润新知