jQuery 入门教程

参考文档地址:

官网文档

菜鸟教程

准备工作

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. <body>
  2.     <div id="app">asdfasdf</div>
  4.     <script>
  5. var aa = $(选择器);   // 方法1
  7.         // 创建jQuery对象
  8.         // 方法1 $(选择器)
  9.         // var obj = {};
  10.         // var date = new Date();
  12.         var $app = $('#app');
  13.         console.log('$app', $app);
  15. var bb = $(dom节点)  // 方法2
  17.         // 方式2 $(原生dom节点)
  18.         var app = document.querySelector('#app');
  19.         console.log('app', app);
  20.         var $app = $(app);
  21.     </script>
  22. </body>

(一) 绑定事件

1. $(选择器).on(事件类型,绑定函数);

  1.  <style>
  2.         .box {
  3.             background-color: gray;
  4.             padding: 50px;
  5.         }
  6.     </style>
  7. <body>
  9.     <div class="box">
  10.         <button>按钮</button>
  11.     </div>
  13.     <ul>
  14.         <li>xxx1</li>
  15.         <li>xxx2</li>
  16.         <li>xxx3</li>
  17.     </ul>
  19.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  20.     <script>
  21.         // 给button绑定事件, 第一个参数是事件类型, 第二参数是绑定的函数(回调函数)
  22.         $('button').on('click', function() {
  23.             alert(2222);
  24.         });
  27.         $('li').on('click', function() {
  28.             console.log(this);
  29.         })
  30.     </script>
  31. </body>

2. 事件托管

  1. $(祖先选择器).on(事件类型, 选择器, 绑定函数);
  2. $(祖先选择器).delegate(选择器, 事件类型, 绑定函数);
  1. <style>
  2.         ul {
  3.             border: 1px solid;
  4.         }
  6.         li {
  7.             background-color: gray;
  8.             margin-top: 15px;
  9.         }
  10.     </style>
  11. <body>
  12.     <ul>
  13.         <li>1.xxxx</li>
  14.         <li>2.xxxx</li>
  15.         <li>3.xxxx</li>
  16.         <li>4.xxxx</li>
  17.         <li>5.xxxx</li>
  18.     </ul>
  20.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  21.     <script>
  22.         // 把li的事件托管到ul上, $(祖先选择器).on(事件类型, 选择器, 绑定函数);
  23.         $('ul').on('click', 'li', function() {
  24.             // console.log(event.target);
  25.             console.log(this);
  26.         });
  27.     </script>
  28. </body>

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

  1.  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  2.     </script>
  3.     <script>
  4.         $(document).ready(function() {
  5.             alert('页面加载完成');
  6.             // 需要页面加载完成 $('#app')才存在
  7.             $('#app').on('click', function() {
  8.                 alert(2222);
  9.             })
  10.         })
  11.     </script>
  13. <body>
  14.     <div id="app">
  15.         asdfasdfasdf
  16.     </div>
  17. </body>

(二) 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>
  3.     $.ajax({
  4.         type: 'get',
  5.         url: 'http://huruqing.cn:3000/api/film/getList2',
  6.         data: {},
  7.         dataType: 'json',
  8.         success: function(res) {
  9.             console.log(res);
  10.         },
  11.         // 网络问题,地址不对等原因导致前端跟后台都没有建立成功的通信
  12.         error: function() {
  13.             alert('请求错误');
  14.         }
  15.     })
  16. </script>

(三) 选择器

1. $(选择器名称)

  1. <body>
  2.     <div id="app">app</div>
  3.     <div class="aaa">aaa</div>
  5.     <button>哈哈</button>
  6.     <button>哈哈</button>
  7.     <button>哈哈</button>
  8.     <button>哈哈</button>
  9.     <button>哈哈</button>
  11.     <ul id="list1">
  12.         <li>1</li>
  13.         <li>2</li>
  14.         <li>3</li>
  15.     </ul>
  16.     <ul id="list2">
  17.         <li>1</li>
  18.         <li>2</li>
  19.         <li>3</li>
  20.     </ul>
  22.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  23.     <script>
  24.       // 选择#app元素并打印
  25.         $('#app');
  26.       // 选择.aaa元素并打印
  27.         $('.aaa');
  28.         $('button');
  30.       // 选择ul后面的li元素并打印
  31.         $('#list1 li').on('click', function() {
  32.             console.log(this);
  33.         });
  34.     </script>
  35. </body>

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

  1. <body>
  2.     <div class="box">
  3.         <div>adsfasdf</div>
  4.         <p>sfasdf</p>
  5.         <span>asdfa</span>
  6.         <div>
  7.             <span class="aa">asdfa</span>
  8.         </div>
  9.     </div>
  11.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  12.     <script>
  13.         var $box = $('.box');
  14.         // 查找$box的后代元素, 类名为aaa
  15.         var $aa = $box.find('.aa');
  16.         console.log('$aa', $aa);
  18.         // 查找$box所有子代元素
  19.         var $children = $box.children();
  20.         console.log('$children', $children);
  21.     </script>
  22. </body>

3. parents,closest 查找祖先元素

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

4. siblings 查找兄弟元素

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

(四) 操作 html

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

  1. <head>
  2.     <style>
  3.         .active {
  4.             color: red;
  5.         }
  7.         li {
  8.             cursor: pointer;
  9.         }
  10.     </style>
  11. </head>
  13. <body>
  14.     <div id="app">
  15.         <div>dfasdfadsf</div>
  16.         <div>dfasdfadsf</div>
  17.         <div>dfasdfadsf</div>
  18.     </div>
  19.     <ul>
  20.     </ul>
  22.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  23.     <script>
  24.         // 获取app里面的html字符串
  25.         var str = $('#app').html();
  26.         console.log('str1', str);
  28.         var str2 = $('#app').text();
  29.         console.log('str2', str2);
  31.         var str3 = `<li>第1个li元素</li>
  32.         <li>第2个li元素</li>
  33.         <li>第3个li元素</li>
  34.         <li>第4个li元素</li>`;
  36.         // 将str3字符串添加ul里面
  37.         $('ul').html(str3);
  38.     </script>
  39. </body>

2. $(选择器).text() 相当于innerText

  1. 同上,不再举例

3. $(选择器).val() 相当于input元素的.value

  1. <head>
  2.     <style>
  3.         .active {
  4.             color: red;
  5.         }
  7.         li {
  8.             cursor: pointer;
  9.         }
  10.     </style>
  11. </head>
  13. <body>
  14.     <div id="app">
  15.         <input id="username" type="text" value="huruqing"><br/>
  16.         <input id="phone" type="text">
  17.     </div>
  19.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  20.     <script>
  21.         // 读取输入框#username的值
  22.         var username = $('#username').val();
  23.         console.log('username', username);
  25.         // 设置#phone输入框的值
  26.         $('#phone').val(13811112222);
  27.     </script>
  28. </body>

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

  1. <body>
  2.     <ul>
  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后面再添加一条数据
  11.         $('ul').append('<li>我是新来的</li>');
  12.     </script>
  13. </body>

(五) 操作 css

1. 添加或移除一个类

  • $(选择器).addClass(类名) 添加class;
  • $(选择器).removeClass(类名) 移除class;
  1. <head>
  2.     <style>
  3.         .red {
  4.             color: red;
  5.         }
  6.     </style>
  7. </head>
  9. <body>
  10.     <div id="app" class="flex f12">asdfasdffsf</div>
  12.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  13.     <script>
  14.         // 添加class red 
  15.         $('#app').addClass('red');
  17.         // 移除class red
  18.         setTimeout(function() {
  19.             $('#app').removeClass('red');
  20.         }, 2000)
  21.     </script>

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

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <style>
  4.         .dsn {
  5.             display: none;
  6.         }
  7.     </style>
  8. </head>
  10. <body>
  11.     <button>点击</button>
  12.     <div id="app">
  13.         <p> asdfasdfasdfasdfasdf </p>
  14.         <p> asdfasdfasdfasdfasdf </p>
  15.         <p> asdfasdfasdfasdfasdf </p>
  16.         <p> asdfasdfasdfasdfasdf </p>
  17.     </div>
  19.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  20.     <script>
  21.         $('button').on('click', function() {
  22.             // 若#app没有dsn类就加上,有则移除
  23.             $('#app').toggleClass('dsn');
  24.         })
  25.     </script>
  26. </body>

3. $(选择器).css() // 获取样式和设置样

  1. <head>
  2.     <style>
  3.         .red {
  4.             color: red;
  5.             font-size: 20px;
  6.         }
  7.     </style>
  8. </head>
  10. <body>
  11.     <div class="red">asdfasdffsf</div>
  13.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  14.     <script>
  15.         // 获取字体大小 
  16.         var size = $('.red').css('font-size');
  17.         console.log('font-size', size);
  19.         // 设置样式:背景变灰色,添加边框,可以连着写
  20.         $('.red').css('background-color', 'gray');
  21.         $('.red').css('border', '2px solid blue');
  23.         // 链式调用
  24.         setTimeout(function() {
  25.             $('.red').css('background-color', 'green').css('border', '2px solid red').css('font-size', '26px');
  26.         }, 2000)
  27.     </script>

(六) 操作属性

1. $(选择器).attr() 获取属性或者设置属性

  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地址
  11.         setTimeout(function() {
  12.             $('a').text('新浪');
  13.             $('a').attr('href', 'http://sina.com');
  14.         }, 2000)
  15.     </script>
  16. </body>

2. $(选择器).removeAttr() 删除属性

  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
  7.         setTimeout(function() {
  8.             $('a').removeAttr('href');
  9.         }, 2000)
  10.     </script>
  11. </body>

3. $(选择器).prop() 操作属性 类似attr, 当attr不管用的时候使用prop

  1. <body>
  2.     <input type="radio" checked>
  4.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  5.     <script>
  6.         var flag = $('input').attr('checked');
  7.     </script>
  8. </body>

(七) 效果

1. show() 显示和hide() 隐藏

  1. <body>
  2.     <div class="box">
  3.         <p>sadfasdfasdfasdfasdfasdf</p>
  4.         <p>sadfasdfasdfasdfasdfasdf</p>
  5.         <p>sadfasdfasdfasdfasdfasdf</p>
  6.         <p>sadfasdfasdfasdfasdfasdf</p>
  7.         <p>sadfasdfasdfasdfasdfasdf</p>
  8.     </div>
  10.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  11.     <script>
  12.         // 2秒后隐藏div 
  13.         setTimeout(function() {
  14.             $('.box').hide();
  15.         }, 2000);
  17.         // 1秒后显示div
  18.         setTimeout(function() {
  19.             $('.box').show();
  20.         }, 3000)
  21.     </script>

2. 滑动 上 slideUp() 下 slideDown()

  1. <body>
  2.     <div class="box">
  3.         <p>这是一个段落。</p>
  4.         <p>这是一个段落。</p>
  5.         <p>这是一个段落。</p>
  6.         <p>这是一个段落。</p>
  7.         <p>这是一个段落。</p>
  8.         <p>这是一个段落。</p>
  9.         <p>这是一个段落。</p>
  10.     </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.         // 点击.btn1向上滑动 
  19.         $('.btn1').on('click', function() {
  20.             $('.box').slideUp();
  21.         })
  23.         // 点击.btn2向下滑动
  24.         $('.btn2').on('click', function() {
  25.             $('.box').slideDown();
  26.         })
  27.     </script>
  28. </body>

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

(八) 插件

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

  1. <head>
  2.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  3.     </script>
  4.     <script src="./date-plugin/zane-calendar.min.js"></script>
  5.     <style>
  6.         .box {
  7.             width: 600px;
  8.             height: 600px;
  9.             margin: 0 auto;
  10.             padding: 50px;
  11.         }
  12.     </style>
  13. </head>
  15. <body>
  16.     <input type="text" name="" id="date">
  18.     <script>
  19.         zaneDate({
  20.             elem: '#date'
  21.         });
  22.     </script>
  23. </body>

(十) zepto.js

移动版的jquey

(十一) underscore.js 和 loadash js 库

(十二) 重写计算器

  1. 引入jQuery.js
  2. 实现点击数字, 数字显示在输入框 
    1. (1) 绑定事件: 使用事件托管

(十三) 重写todoList

  1. 自定义属性
    ```

    xxxx

// 获取自定义属性 $(‘p’).data(‘index’); ```