jq入门教程
参考文档地址：

官网文档

菜鸟教程

准备工作

1：jQuery介绍：
是一个用js封装的库，专门用来方便我们操作dom节点的
$(‘#app’).html(); //获取id为app的元素的节点的内容（包括标签）

2：导入 jQuery.js 使用本地的js 或 cdn 地址都可以；

  1. https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js
  2. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

3：创建jQuery对象

  1. var aa = $('选择器');
  2. var bb = $(dom节点)；

（一）绑定事件

1：$(选择器）.on(事件类型，选择器，绑定函数)；
2：时间托管

  1. $(祖先选择器).on(事件类型, 选择器, 绑定函数);
  2. $(祖先选择器).delegate(选择器, 事件类型, 绑定函数);
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <style>
  6.        ul {border: 1px solid;}
  7.        li {background-color: gray;margin-top: 15px;}
  8.     </style>
  9. </head>
  10. <body>
  11.     <ul>
  12.         <li>1.xxxx</li>
  13.         <li>2.xxxx</li>
  14.         <li>3.xxxx</li>
  15.         <li>4.xxxx</li>
  16.         <li>5.xxxx</li>
  17.     </ul>
  19.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  20. <script> 
  22. </script>
  23. </body>
  24. </html>

3：$(document).reday(fn); 相当于window.onload

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"> 
  5. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  6. <script> 
  7.     // 在这里给button标签添加事件
  8. </script>
  9. </head>
  10. <body> 
  11.     <button>
  12.           登录
  13.     </button>
  14. </body>
  15. </html>

（二）ajax 请求

1：get 请求：https://jquery.cuishifeng.cn/jQuery.get.html
2：post 请求
3：ajax 请求

  1. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  2. <script>
  4. $.ajax({
  5.     type:'get',
  6.   url: 'http://huruqing.cn:3000/api/film/getList2',
  7.   data: {},
  8.   dataType: 'json',
  9.   success: function(res) {
  10.     console.log(res);
  11.   },
  12.   // 网络问题,地址不对等原因导致前端跟后台都没有建立成功的通信
  13.   error: function() {
  14.     alert('请求错误');
  15.   }
  16. })
  18. </script>

(三)选择器

1：$(选择器名称)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5. </head>
  6. <body>
  8.     <div id="app">app</div>
  9.     <div class="aaa">aaa</div>
  10.     <button>哈哈</button>
  12.     <ul>
  13.         <li>1</li>
  14.         <li>2</li>
  15.         <li>3</li>
  16.     </ul>
  18.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  19.     <script> 
  20.         // 选择#app元素并打印
  22.         // 选择.aaa元素并打印
  24.         // 选择ul后面的li元素并打印
  25.         $('button').on('click', function() {
  26.             alert(2222);
  27.         });
  30.         $('li').on('click', function() {
  31.             console.log(this);
  32.         })
  33.     </script>
  34. </body>
  35. </html>

ready()

  1.     <script>
  2.         $(document).ready(function() {
  3.             alert('页面加载完成');
  4.             // 需要页面加载完成 $('#app')才存在
  5.             $('#app').on('click', function() {
  6.                 alert(2222);
  7.             })
  8.         })
  9.     </script>

2:find 和 children 都用来查找后代元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5. </head>
  6. <body>
  7.     <div class="box">
  8.         <div>adsfasdf</div>
  9.         <p>sfasdf</p>
  10.         <span>asdfa</span>
  11.         <span class="aa">asdfa</span>
  12.     </div>
  15.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  16.     <script>
  17.         var $box = $('.box');
  18.         // 查找$box的后代元素,类名为.aa
  19.       $('.box').on('click', '.aa', function() {
  20.             // console.log(event.target);
  21.             console.log(this);
  22.           });
  25.           // 查找$box所有后代(子代)元素
  26.        var $children = $box.children();
  27.         console.log('$children', $children);
  29.     </script>
  30. </body>
  31. </html>

3: parents,closest 查找祖先元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6. </head>
  8. <body>
  9.     <div class="box">
  10.         <div>
  11.             <div class="aaa">
  12.                 <p>
  13.                     <span>后代元素</span>
  14.                 </p>
  15.             </div>
  16.         </div>
  18.     </div>
  21.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  22.     <script>
  23.         var $span = $('span');
  24.       // 查找span元素的所有的祖宗元素
  25.         var $parents = $span.parents();
  26.         console.log('$parents', $parents);
  28.         // 查找祖宗元素里离它最近的,类名为aaa的元素
  29.         var $aaa = $span.closest('.aaa');
  30.         console.log('$aaa', $aaa);
  31.     </script>
  32. </body>
  34. </html>

4:siblings 查找兄弟元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <style>
  7.         .active{color: red;}
  8.         li {cursor: pointer;}
  9.     </style>
  10. </head>
  12. <body>
  13.   <ul>
  14.       <li>第1个li元素</li>
  15.       <li class="active">第2个li元素</li>
  16.       <li>第3个li元素</li>
  17.       <li>第4个li元素</li>
  18.   </ul>
  20.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  21.     <script> 
  22.         var $active    = $('.active');
  23.         // 查找.active的所有兄弟元素
  24.         var $brothers = $active.siblings();
  25.         console.log('$brothers', $brothers)
  26.     </script>
  27. </body>
  28. </html>

（四）操作 html

1：$(选择器).html 相当于innerHTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <style>
  7.         .active{color: red;}
  8.         li {cursor: pointer;}
  9.     </style>
  10. </head>
  12. <body>
  13.   <div id="app">
  14.       <div>dfasdfadsf</div>
  15.       <div>dfasdfadsf</div>
  16.       <div>dfasdfadsf</div>
  17.   </div>
  18.   <ul>
  19.   </ul>
  21.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  22.     <script>  
  23.     // 获取app里面的html字符串并打印
  24.       //获取app里面的html字符窜
  25.       var     str = $('#app').html();
  26.       console.log(str)
  28.       var str3 = `<li>第1个li元素</li>
  29.         <li>第2个li元素</li>
  30.         <li>第3个li元素</li>
  31.         <li>第4个li元素</li>`;
  33.         // 把str字符串添加到ul元素里
  34.         $('ul').html(str3);
  35.     </script>
  36. </body>
  37. </html>

2:$(选择器）.text() 相当于innerText
3：$(选择器).val() 相当于input元素的.value

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <style>
  7.         .active{color: red;}
  8.         li {cursor: pointer;}
  9.     </style>
  10. </head>
  12. <body>
  13.   <div id="app">
  14.      <input id="username" type="text" value="huruqing"><br/>
  15.      <input id="phone" type="text">
  16.   </div> 
  18.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  19.     <script>  
  20.         // 读取输入框#username的值
  21.             let  usename = $('#username').val();
  22.         console.log(usename)
  24.         // 设置#phone输入框的值
  25.         $('#phone').val(1234654654);
  26.         console.log($('#phone').val())
  27.     </script>
  28. </body>
  30. </html>

$(选择器).append() 相当于appendChild

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8"> 
  5. </head>
  6. <body> 
  7.     <ul>
  8.         <li>xxx</li>
  9.         <li>xxx</li>
  10.         <li>xxx</li>
  11.     </ul>
  13.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  14.     <script>
  15.        // 在ul后面再添加一条数据
  16.         $('ul').append(`<li>那就是</li>`)
  17.     </script>
  18. </body>
  19. </html>

（五） 操作css

1：添加或移除一个类

  • $(选择器).addClass(类名) 添加class;

  • $(选择器).removeClass(类名) 移除class;

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8"> 
    5. <style>.red{color: red;}</style>
    6. </head>
    7. <body>
    8. <div id="app">asdfasdffsf</div>
    10. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    11. <script>
    12.      // 给#app添加class red 
    13.    $('#app').addClass('red');
    15.      // 给#app移除class red (3秒后移除red这个类名)
    16.    setTimeout(function(){
    17.         $('#app').remove('red')
    18.    },3000)
    20. </script>
    21. </body>
    22. </html>

  1. $(选择器).toggleClass(类名) // 有则去掉,无则加上

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8"> 
    5.  <style>.dsn{display:none;}</style>
    6. </head>
    7. <body>
    8.  <button>点击</button>
    9.  <div id="app">
    10.      <p> asdfasdfasdfasdfasdf </p>
    11.      <p> asdfasdfasdfasdfasdf </p>
    12.      <p> asdfasdfasdfasdfasdf </p>     
    13.      <p> asdfasdfasdfasdfasdf </p>
    14.  </div>
    16.  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    17.  <script> 
    18.         //本来就是点击事件toggle（）
    19.         $('button').on('click',function(){
    20.             $('#app').toggleClass('dsn')
    21.         })
    22.  </script>
    23. </body>
    24. </html>

  2. $(选择器).css() // 获取样式和设置样 ```javascript <!DOCTYPE html>

asdfasdffsf

  1. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  2. <script>
  3.     // 获取字体大小 
  4.     let font_size = $('.red').css('font-size')
  6.     // 设置样式:背景变灰色,添加边框,可以连着写 
  7.     $('.red').css('backgroung-color','skyblue');
  8.     $('.red').css('border','1px solid red')
  9.     // 链式调用
  10.     setTimeout(function(){

$(‘.red’).css(‘background-color’, ‘green’).css(‘border’, ‘2px solid red’).css(‘font-size’, ‘26px’); }) 

  2. <a name="NsPKf"></a>
  3. ## （六）操作属性
  6. 1. $(选择器).attr()  获取属性或者设置属性
  7. ```javascript
  8. <!DOCTYPE html>
  9. <html lang="en">
  11. <head>
  12.     <meta charset="UTF-8">
  13.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  14.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  15.     <title>Document</title>
  16. </head>
  18. <body>
  19.     <a href="http://www.baidu.com">百度</a>
  21.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  22.     <script>
  23.         // 获取a标签的href属性
  24.         var href = $('a').attr('href');
  25.         console.log('href', href);
  27.         // 2秒后把百度换成新浪,同时改变它的href地址
  28.         setTimgout(function(){
  29.            $('a').text('新娘')；
  30.            $('a').attr('href','dfgdfgdfg')
  32.         })
  34.     </script>
  35. </body>
  36. </html>
  1. $(选择器).removeAttr() 删除属性 ```javascript <!DOCTYPE html>

百度

  1. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  2. <script>
  3.     // 两秒后删除属性href
  4.        setTimeout(function(){
  5.      $('a').removeAttr('href')
  7. },2000)
  9. </script>

  2. 3. $(选择器).prop()  操作属性 类似attr, 当attr不管用的时候使用prop
  6. <a name="KQaBX"></a>
  7. ## （七）  效果
  9. 1. show() 显示和hide() 隐藏
  10. ```javascript
  11. <!DOCTYPE html>
  12. <html lang="en">
  14. <head>
  15.     <meta charset="UTF-8">
  16.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  17.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  18.     <title>Document</title>
  19. </head>
  21. <body>
  22.     <div>阿斯顿发的说法是对方</div>
  24.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  25.     <script>
  26.         // 2秒后隐藏div 
  27.         setTimeout(function(){
  28.       $('div').hide()
  30.     },2000)
  31.         // 1秒后显示div
  32.         setTimeout(function(){
  34.         $('div').show()
  36.         },1000)
  38.     </script>
  39. </body>
  40. </html>
  1. 滑动 ```javascript <!DOCTYPE html> 
  1. <div class="box">
  2.     <p>这是一个段落。</p>
  3.     <p>这是一个段落。</p>
  4.     <p>这是一个段落。</p>
  5.     <p>这是一个段落。</p>
  6.     <p>这是一个段落。</p>
  7.     <p>这是一个段落。</p>
  8.     <p>这是一个段落。</p>
  9. </div>
  10. <button class="btn1">上滑</button>
  11. <button class="btn2">下滑</button>
  16. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  17. </script>
  18. <script>
  19.     // 点击.box向上滑动

$(‘btn1’).on(‘click’,function(){

  1.   $('.box').slideUp();
  3. })
  4.     // 点击.box向下滑动

$(‘btn1’).on(‘click’,function(){

  1.   $('.box').slideDown();
  3. })
  4. </script>

```

  1. 淡入淡出 https://www.runoob.com/jquery/jquery-fade.html

（八） 插件

https://www.jq22.com/jq1-jq3（一个日期插件示例）

（九） zepto.js

移动版的jquey