注意：$(‘#app’).方法（） —-获取内容
    $(‘#app’).方法（’xxx’） —-设置 值
    1、绑定事件

    1. <body>
    3.     <div class="box">
    4.         <button>按钮</button>
    5.     </div>
    7.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    8.     <script>
    9.         $('.box').click(function() {
    10.             // this指向了所绑定的元素, 它是元素dom节点, 不是jquery对象
    11.             console.log(this);
    12.             // 把元素dom节点转变成jq对象
    13.             $(this).html(22222);
    14.         })
    15.     </script>
    16. </body>

    2、事件托管

    1. <body>
    2.     <ul>
    3.         <li>1.xxxx</li>
    4.         <li>2.xxxx</li>
    5.         <li>3.xxxx</li>
    6.         <li>4.xxxx</li>
    7.         <li>5.xxxx</li>
    8.     </ul>
    10.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    11.     <script>
    12.         $('ul').on('click', 'li', function() {
    13.             // console.log(this);
    14.             console.log(event.target);
    15.         })
    16.     </script>
    17. </body>

    3、find 和 children

    1. <body>
    2.     <div class="box">
    3.         <div>adsfasdf</div>
    4.         <p>sfasdf</p>
    5.         <span>asdfa</span>
    6.         <span>asdfa</span>
    7.     </div>
    10.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    11.     <script>
    12.         var $box = $('.box');
    13.         // span是元素选择器, 也可以换成其他的选择器, 比如id,class
    14.         var $p = $box.find('p');
    15.         console.log($p);
    17.         // 查找$box所有后代元素
    18.          var $children = $box.children();
    19.         console.log($children);
    21.     </script>
    22. </body>

    4、找祖先 parents 和 closest

    1. body>
    2.     <div class="box">
    3.         <div>
    4.             <div class="aaa">
    5.                 <p class="aaa">
    6.                     <span>后代元素</span>
    7.                 </p>
    8.             </div>
    9.         </div>
    11.     </div>
    14.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    15.     <script>
    16.         var $span = $('span');
    17.         // 查找所有的祖宗元素
    18.         var $parents = $span.parents();
    19.         console.log($parents);
    22.         // 查找祖宗元素里离它的类名为aaa的元素
    23.         var $closest = $span.closest('.aaa');
    24.         console.log($closest);
    25.     </script>
    26. </body>

    5、找兄弟 siblings

    1. body>
    2.     <ul>
    3.         <li>第1个li元素</li>
    4.         <li>第2个li元素</li>
    5.         <li class="spe">第3个li元素</li>
    6.         <li>第4个li元素</li>
    7.     </ul>
    9.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    10.     <script>
    11.         var $spe = $('.spe');
    12.         var $siblings = $spe.siblings();
    13.         console.log($siblings);
    14.     </script>
    15. </body>

    6、获取选定类里面的内容

    1. $('#app').html();
    2. $('#app').text();

    7、获取输入框的 值
    设置输入框的值

    1. <body>
    2.     <div id="app">
    3.         <input id="username" type="text" value="huruqing"><br/>
    4.         <input id="phone" type="text">
    5.     </div>
    7.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    8.     <script>
    9.         // 读取输入框的值
    10.         var username = $('#username').val();
    11.         console.log(username);
    13.         // 设置输入框的值
    14.         $('#phone').val('12334');
    15.     </script>
    16. </body>

    8、后面插入内容

    1. <body>
    2.     <ul style="background-color: pink;">
    3.         <li>xxx</li>
    4.         <li>xxx</li>
    5.         <li>xxx</li>
    6.     </ul>
    8.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    9.     <script>
    10.         // 在ul的孩子li后面再添加一条数据
    11.         $('ul').append('<li>nihao</li>');
    12.         // 在ul的孩子li前面再添加一条数据
    13.         $('ul').prepend('<p>hello</p>');
    14.         给ul之后添加一条数据
    15.         $('ul').after('<h2>ul之后加数据</h2>');
    16.         给ul之后添加一条数据
    17.         $('ul').before('<h2>ul之前加数据</h2>');
    18.     </script>
    19. </body>

    9、添加类 移除类

    1. <style>
    2.         .red {
    3.             color: red;
    4.         }
    5. </style>
    8. <body>
    9.     <div id="app">asdfasdffsf</div>
    11.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    12.     <script>
    13.         // 添加class    red 
    14.         $('#app').addClass('red');
    15.         // 移除class    red
    16.         setTimeout(function() {
    17.             $('#app').removeClass('red');
    18.         }, 2000);
    19.     </script>
    20. </body>

    10、toggleClass方法
    $(‘#app’).toggleClass(‘red’);表示：
    如果有red这个类就删除
    如果没有red这个类就加上 $(‘#app’).toggleClass(‘red’);

    2.     <style>
    3.         .red {
    4.             color: red;
    5.         }
    7.         .dsn {
    8.             display: none;
    9.         }
    10.     </style>
    12. <body>
    13.     <div id="app">asdfasdffsf</div>
    14.     <button id="aa">按钮</button>
    16.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    17.     <script>
    18.         setTimeout(function() {
    19.             // 开始没有就加上
    20.             $('#app').toggleClass('red');
    21.         }, 1000)
    23.         setTimeout(function() {
    24.             // 有了就移除
    25.             $('#app').toggleClass('red');
    26.         }, 2000)
    29.         $('#aa').on('click', function() {
    30.             $('#app').toggleClass('dsn');
    31.         })
    32.     </script>
    33. </body>

    11、css获取样式 $(‘#app’).css(‘font-size’);
    添加样式 $(‘#app’).css(‘color’,’pink’);
    链式添加样式 $(‘#app’).css(‘color’,’pink’).css(‘border’,’2px solid’);

    1. style>
    2.         .red {
    3.             color: red;
    4.         }
    5. </style>
    7. <body>
    8.     <div class="red" style="font-size: 20px;">asdfasdffsf</div>
    10.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    11.     <script>
    12.         // 获取字体大小 
    13.         var $font = $('.red').css('font-size');
    14.         console.log($font);
    16.         // 设置样式:背景变灰色,添加边框,可以连着写
    18.         $('.red').css('background-color', '#ececec').css('border', '2px dotted #000');
    19.     </script>
    20. </body>

    12、获取属性 attr( ‘href’);
    设置属性内容 attr(‘ href’,’http://www.baidu.com ‘);

    1. <body>
    2.     <a href="http://www.baidu.com">百度</a>
    4.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    5.     <script>
    6.         // 获取a标签的href属性
    7.         var href = $('a').attr('href');
    8.         console.log('href', href);
    10.         // 2秒后把百度换成新浪,同时改变它的href地址
    12.         setTimeout(function() {
    13.             $('a').text('新浪');
    14.             $('a').attr('href', 'http://sina.cn');
    15.         }, 2000);
    16.     </script>
    17. </body>

    13、删除属性 removeAtttr( )

    1. <body>
    2.     <a href="http://www.baidu.com">百度</a>
    4.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    5.     <script>
    6.         // 两秒后删除属性href
    8.         setTimeout(function() {
    10.             $('a').removeAttr('href');
    11.         }, 2000);
    12.     </script>
    13. </body>

    14、显示和隐藏

    1. <body>
    2.     <div>阿斯顿发的说法是对方</div>
    4.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    5.     <script>
    6.         // 2秒后隐藏div
    7.         setTimeout(function() {
    8.             $('div').hide();
    9.         }, 2000);
    11.         // 1秒后显示div
    12.         setTimeout(function() {
    13.             $('div').show();
    14.         }, 3000);
    15.     </script>
    16. </body>

    15、上滑 （slideUp） 和 下滑(slideDown)

    1. <body>
    3.     <div class="box">
    4.         <p>这是一个段落。</p>
    5.         <p>这是一个段落。</p>
    6.         <p>这是一个段落。</p>
    7.         <p>这是一个段落。</p>
    8.         <p>这是一个段落。</p>
    9.         <p>这是一个段落。</p>
    10.         <p>这是一个段落。</p>
    11.     </div>
    12.     <button class="btn1">上滑</button>
    13.     <button class="btn2">下滑</button>
    15.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    16.     </script>
    17.     <script>
    18.         // 点击.box向上滑动 
    19.         $('.btn1').on('click', function() {
    20.             $('.box').slideUp();
    21.         })
    23.         // 点击.box向下滑动
    24.         $('.btn2').on('click', function() {
    25.             $('.box').slideDown();
    26.         })
    27.     </script>
    28. </body>

    16、查件

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <link rel="stylesheet" href="./date-plugin/zane-calendar.min.css">
    9.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    10.     </script>
    11.     <script src="./date-plugin/zane-calendar.min.js"></script>
    12.     <style>.box {width: 600px;height: 600px;margin: 0 auto;padding: 50px;}</style>
    13. </head>
    15. <body>
    16.    <div class="box">
    17.     <input type="text" name="" id="date">
    18.    </div>
    20.     <script>
    21.         zaneDate({
    22.             elem: '#date'
    23.         });
    24.     </script>
    25. </body>
    27. </html>