经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
前端jQurey
来源：cnblogs　　作者：626　　时间：2019/9/19 9:11:51　　对本文有异议

目录

1.楔子

需求一：有html标签关系如下，请找到所有的含有a标签的li标签

  1.     <div>
  2.         <ul>
  3.             <li class="city">北京</li>
  4.             <li class="city"><a href="">上海</a></li>
  5.             <li class="city">天津</li>
  6.         </ul>
  7.     </div>

原生js实现

  1. <script>
  2.     var objs = document.getElementsByClassName('city')
  3.     for(var i=0;i< objs.length;i++){
  4.         arry_a = objs[i].getElementsByTagName('a')
  5.         if(arry_a.length>0){
  6.             console.log(objs[i]
  7.             )
  8.         }
  9.     }
  10. </script>

jqeury实现

  1. $('li').has('a')

需求二：将上面的li标签实现隔行换色效果

原生js实现

  1.     var objs = document.getElementsByClassName('city')
  2.     for(var i=0;i< objs.length;i++){
  3.         if(i%2==0){
  4.             objs[i].style.backgroundColor = 'lightblue'
  5.         }else{
  6.             objs[i].style.backgroundColor = 'lightyellow'
  7.         }
  8.     }

jquery实现

  1.     $('li:odd').css('background-color','lightblue')
  2.     $('li:even').css('background-color','lightyellow')

需求三：点击按钮，显示页面中的三个div，并给div添加文本内容

  1.     <!--样式-->
  2.     <style type="text/css">
  3.         div{
  4.             width: 100px;
  5.             height: 100px;
  6.             background-color: green;
  7.             margin-top: 20px;
  8.             display: none;
  9.         }
  10.     </style>
  12.     <!--body标签-->    
  13.     <button>操作</button>
  14.     <div></div>
  15.     <div></div>
  16.     <div></div>

原生js实现

  1. <script>
  2.     var oBtn = document.getElementsByTagName('button')[0];
  3.     var divArr = document.getElementsByTagName('div');
  4.     oBtn.onclick = function () {
  5.         for (var i = 0; i < divArr.length; i++) {
  6.             divArr[i].style.display = "block";
  7.             divArr[i].innerHTML = "赵云";
  8.         }
  9.     }
  10. </script>

jquery实现

  1.     <script src="jquery3.4.1.js"></script>
  2.     <script>
  3.             var oBtn = $('button'); //根据标签名获取元素
  4.             var oDiv = $('div'); //根据标签名获取元素
  5.             oBtn.click(function(){
  6.                 oDiv.show(2000).html('赵云');//显示盒子，设置内容
  7.             })
  8.     </script>

尽管，你现在啥也不知道，你就知道用上了jquery咱们写代码节省了很多操作，便利了很多就OK了～～～

2.jqeury介绍

2.1为什么要使用jQuery

2.2jQuery 的两大特点

  • 链式编程：比如.show()和.html()可以连写成.show().html()。
  • 隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。

2.3什么是 jQuery

jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。

js库是把我们常用的复杂功能封装到简单的方法中，我们用的时候，将库直接引入然后调用方法即可。

初期，主要学习如何使用jQuery操作DOM，其实就是学习jQuery封装好的那些功能API。

这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。

3.jQuery的使用

3.1使用 jQuery 的基本步骤

下载 ：jQuery有两个文件，一个是jquery-3.4.1.js(未压缩版)，一个是jquery-3.4.1.min.js(压缩版,推荐项目上线时使用)

关于jQuery的相关资料：

注意：导包的代码一定要放在js代码的最上面。

3.2jQuery 的入口函数和 $ 符号

3.2.1入口函数（重要）

原生 js 的入口函数指的是：window.onload = function() {}

  1. //原生 js 的入口函数。页面上所有内容加载完毕，才执行。
  2. //不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。
  3. window.onload = function () {
  4. alert(1);
  5. }

jQuery的入口函数，有以下几种写法：

写法一：文档加载完毕，图片不加载的时候，就可以执行这个函数。

  1. $(document).ready(function () {
  2.            alert(1);
  3.        })

写法二：文档加载完毕，图片不加载的时候，就可以执行这个函数。（写法一的简洁版）

  1. $(function () {
  2.            alert(1);
  3.        });

写法三：文档加载完毕，图片也加载完毕的时候，在执行这个函数。

  1. $(window).ready(function () {
  2.            alert(1);
  3.        })

jQuery入口函数与js入口函数的区别：

区别一：书写个数不同：

  • Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。
  • jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。

区别二：执行时机不同：

  • Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
  • jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

文档加载的顺序：从上往下，边解析边执行。

3.2.2jQuery的 $ 符号

jQuery 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。

jQuery占用了我们两个变量：$ 和 jQuery。当我们在代码中打印它们俩的时候：

  1. <script src="jquery-3.3.1.js"></script>
  2. <script>
  3.         console.log($);
  4.         console.log(jQuery);
  5.         console.log($===jQuery);
  6. </script>

从打印结果可以看出，$ 代表的就是 jQuery。

4.js中的DOM对象 和 jQuery对象比较（重点，难点）

4.1二者的区别

通过 jQuery 获取的元素是一个jq对象数组，其中包含着原生JS中的DOM对象

针对下面这样一个div结构：

  1. <div></div>
  2. <div id="app"></div>
  3. <div class="box"></div>
  4. <div class="box"></div>
  5. <div></div>

通过原生 js 获取这些元素节点的方式是：

  1.     var myBox = document.getElementById("app");           //通过 id 获取单个元素
  2.     var boxArr = document.getElementsByClassName("box");  //通过 class 获取的是伪数组
  3.     var divArr = document.getElementsByTagName("div");    //通过标签获取的是伪数组

通过 jQuery 获取这些元素节点的方式是：（获取的都是数组）

  1.    //获取的是数组，里面包含着原生 JS 中的DOM对象。
  2. 　　console.log($('#app'));
  3. 　　console.log($('.box'));
  4. 　　console.log($('div'));

总结：jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法

4.2二者的相互转换

DOM 对象 转为 jQuery对象：

  1. $(js对象);

jQuery对象 转为 DOM 对象：

  1.   jquery对象[index];      //方式1（推荐）
  2.   jquery对象.get(index);  //方式2

jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能。如：

  1. $('div')[1].style.backgroundColor = 'yellow';
  2. $('div')[3].style.backgroundColor = 'green';

5.jQuery查找标签

5.1基本选择器

  1. $("#id")         //id选择器
  2. $("tagName")     //标签选择器
  3. $(".className")  //class选择器
  4. $("*")           //通用选择器
  6. $("div.c1")      // 交集选择器 找到有含有c1类的div标签
  7. $("#id, .className, tagName") //并集选择器

jquery选择器示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div{
  8.             float: left;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <div></div>
  14.     <div id="box"></div>
  15.     <div class="box"></div>
  16.     <div class="box"></div>
  17.     <div></div>
  18.     <script type="text/javascript" src="jquery3.4.1.js"></script>
  19.     <script type="text/javascript">
  20.         //入口函数
  21.         $(function(){
  22.             //三种方式获取jquery对象
  23.             var jqBox1 = $("#box");
  24.                    var jqBox2 = $(".box");
  25.             var jqBox3 = $('div');
  26.             //操作标签选择器
  27.             jqBox3.css('width', '100');
  28.             jqBox3.css('height', 100);
  29.             jqBox3.css('background-color', 'red');
  30.             jqBox3.css('margin-top', 10);
  31.             //操作类选择器(隐式迭代，不用一个一个设置)
  32.                     jqBox2.css("background", "green");
  33.                     jqBox2.text('哈哈哈')
  35.                     //操作id选择器
  36.                     jqBox1.css("background", "yellow");
  38.         })
  39.     </script>
  41. </body>
  42. </html>

5.1.1层级选择器

  1. $("x y");// x的所有后代y（子子孙孙）
  2. $("x > y");// x的所有儿子y（儿子）
  3. $("x + y")// 找到所有紧挨在x后面的y
  4. $("x ~ y")// x之后所有的兄弟y
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script src="jquery-3.3.1.js"></script>
  7.     <script>
  8.         $(function () {
  9.             //获取ul中的li设置为粉色
  10.             //后代：儿孙重孙曾孙玄孙....
  11.             var jqLi = $("ul li");
  12.             jqLi.css("margin", 5);
  13.             jqLi.css("background", "pink");
  15.             //子代：亲儿子
  16.             var jqOtherLi = $("ul>li");
  17.             jqOtherLi.css("background", "red");
  18.         });
  19.     </script>
  20. </head>
  21. <body>
  22. <ul>
  23.     <li>111</li>
  24.     <li>222</li>
  25.     <li>333</li>
  26.     <ol>
  27.         <li>aaa</li>
  28.         <li>bbb</li>
  29.         <li>ccc</li>
  30.     </ol>
  31. </ul>
  32. </body>
  33. </html>

5.1.2属性选择器

  1. $('[href]')       //找所有含href属性的标签
  2. $('a[href]')      //找所有含href属性的a标签
  3. $('a[title="luffy"]') //找所有title属性是luffy的a标签
  4. $('a[title="baidu"]') //找所有title属性不是百度的a标签
  5. $('a[href^="https"]') //找所有href属性以https开头的a标签
  6. $('a[href$="html"]')  //找所有href属性以html结尾的a标签
  7. $('a[href*="i"]')  //找所有href属性中含有i的a标签
  8. $('a[href][title="luffy"]') //找所有含有href属性且title属性=luffy的a标签 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.          <div id="box">
  9.             <h2 class="title">属性元素器</h2>
  10.             <!--<p class="p1">我是一个段落</p>-->
  11.             <ul>
  12.                 <li id="li1">分手应该体面</li>
  13.                 <li class="what" id="li2">分手应该体面</li>
  14.                 <li class="what">分手应该体面</li>
  15.                 <li class="heihei">分手应该体面</li>
  16.             </ul>
  17.             <form action="" method="post">
  19.                 <input name="username" type='text' value="1" checked="checked" />
  20.                 <input name="username1111" type='text' value="1" />
  21.                 <input name="username2222" type='text' value="1" />
  22.                 <input name="username3333" type='text' value="1" />
  23.                 <button class="btn-default">按钮1</button>
  24.                 <button class="btn-info">按钮1</button>
  25.                 <button class="btn-success">按钮1</button>
  26.                 <button class="btn-danger">按钮1</button>
  27.             </form>
  28.         </div>
  29.     </body>
  30.     <script src="jquery-3.2.1.js"></script>
  31.     <script type="text/javascript">
  32.         
  33.         $(function(){
  34.             //标签名[属性名] 查找所有含有id属性的该标签名的元素
  35.             $('li[id]').css('color','red');
  36.             
  37.             //匹配给定的属性是what值得元素
  38.             $('li[class=what]').css('font-size','30px');
  39.             //[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
  40.             $('li[class!=what]').css('font-size','50px');
  41.             
  42.             //匹配给定的属性是以某些值开始的元素
  43.             $('input[name^=username]').css('background','gray');
  44.             //匹配给定的属性是以某些值结尾的元素
  45.             $('input[name$=222]').css('background','greenyellow');
  46.             
  47.             //匹配给定的属性是以包含某些值的元素
  48.             $('button[class*=btn]').css('background','red');
  49.         })
  50.     
  51.     </script>
  52. </html>

5.2筛选器

5.2.1基本筛选器

  1. :first // 第一个
  2. :last // 最后一个
  3. :eq(index)// 索引等于index的那个元素
  4. :even // 匹配所有索引值为偶数的元素，从 0 开始计数
  5. :odd // 匹配所有索引值为奇数的元素，从 0 开始计数
  6. :gt(index)// 匹配所有大于给定索引值的元素
  7. :lt(index)// 匹配所有小于给定索引值的元素
  8. :not(元素选择器)// 移除所有满足not条件的标签
  9. :has(元素选择器)// 根据含有某个后代筛选
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>基本过滤选择器</title>
  6.     </head>
  7.     <body>
  8.         <ul>
  9.             <li>哈哈哈哈，基本过滤选择器</li>
  10.             <li>嘿嘿嘿</li>
  11.             <li>天王盖地虎</li>
  12.             <li>小鸡炖蘑菇</li>
  13.             
  14.         </ul>
  15.     </body>
  16.     <script src="jquery-3.3.1.js"></script>
  17.     <script type="text/javascript">
  18.         
  19.         $(function(){
  20.             //获取第一个 :first ,获取最后一个 :last
  21.             
  22.             //奇数
  23.             $('li:odd').css('color','red');
  24.             //偶数
  25.             $('li:even').css('color','green');
  26.             
  27.             //选中索引值为1的元素 *
  28.             $('li:eq(1)').css('font-size','30px');
  29.             
  30.             //大于索引值1
  31.             $('li:gt(1)').css('font-size','50px');
  32.             
  33.             //小于索引值1
  34.             $('li:lt(1)').css('font-size','12px');    
  35.             
  36.         })    
  37.     </script>
  38. </html>

5.2.2表单筛选器

  1. type筛选器:text
  2. :password
  3. :file
  4. :radio
  5. :checkbox
  6. :submit
  7. :reset
  8. :button
  1. 其他属性筛选器
  2. :enabled
  3. :disabled
  4. :checked
  5. :selected

5.3筛选器方法

  1. //找兄弟
  2. $("#id").siblings();// 兄弟们，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选
  4. //找弟弟
  5. $("#id").next()
  6. $("#id").nextAll()
  7. $("#id").nextUntil("#i2") //直到找到id为i2的标签就结束查找，不包含它
  9. //找哥哥
  10. $("#id").prev()
  11. $("#id").prevAll()
  12. $("#id").prevUntil("#i2")
  1. //找祖辈
  2. $("#id").parent()
  3. $("#id").parents()  // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
  4. $("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。
  5. //找儿子
  6. $("#id").children();// 儿子们
  1. //过滤$("div").first() // 获取匹配的第一个元素
  2. $("div").last() // 获取匹配的最后一个元素
  3. $("div").eq(n) // 索引值等于指定值的元素，n是索引
  4. $("div").not() // 从匹配元素的集合中删除与指定表达式匹配的元素
  5. $("div").find("p") //后代选择器，在所有div标签中找后代的p标签
  6. $("div").filter(".c1")  // 交集选择器，从结果集中过滤出有c1样式类的
  7. $("div").has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.          <div id="box">
  9.             <p class="p1">
  10.                 <span>我是第一个span标签</span>
  11.                 <span>我是第二个span标签</span>
  12.                 <span>我是第三个span标签</span>
  13.             </p>
  14.             <button>按钮</button>
  15.         </div>
  16.         <ul>
  17.             <li class="list">2</li>
  18.             <li>3</li>
  19.             <li>4</li>
  20.             <li>5</li>
  21.         </ul>
  22.     </body>
  23.     <script src="jquery-3.2.1.js"></script>
  24.     <script type="text/javascript">
  25.         
  26.         //获取第n个元素 数值从0开始
  27.         $('span').eq(1).css('color','#FF0000');
  28.         
  29.         //获取第一个元素 :first :last    点语法  ：get方法 和set方法
  30.         $('span').last().css('color','greenyellow');
  31.         $('span').first().css('color','greenyellow');
  32.         
  33.         //查找span标签的父元素（亲的）
  34.         $('span').parent('.p1').css({"width":'200px','height':'200px',"background":'red'});
  35.         
  36.         //选择所有的兄弟元素（不包括自己）
  37.                   $('.list').siblings('li').css('color','red');
  38.              
  39.                 //查找所有的后代元素
  40.                    $('div').find('button').css('background','yellow');
  42.                 //不写参数代表获取所有子元素。
  43.                    $('ul').children().css("background", "green");
  44.                    $('ul').children("li").css("margin-top", 10);
  45.     </script>
  46. </html>

6.jQuery操作标签

6.1标签内文本操作

html 标签元素中所有的内容

  1. //获取值：获取选中标签元素中所有的内容
  2. $('#box').html();  
  4. //设置值：设置该元素的所有内容 会替换掉 标签中原来的内容
  5. $('#box').html('<a href="https://www.baidu.com">百度一下</a>');

text 标签元素的文本内容

  1. //获取值：获取选中标签元素中的文本内容
  2. $('#box').text();
  4. //设置值：设置该所有的文本内容
  5. $('#box').text('<a href="https://www.baidu.com">百度一下</a>');

text()方法接收的值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中

6.2文档标签操作

之前js中咱们学习了js的DOM操作,也就是所谓的增删改查DOM操作。通过js的DOM的操作，大家也能发现，大量的繁琐代码实现我们想要的效果。那么jQuery的文档操作的API提供了便利的方法供我们操作我们的文档。

看一个之前我们js操作DOM的例子：

  1. var oUl = document.getElementsByTagName('ul')[0];
  2. var oLi = document.createElement('li');
  3. oLi.innerHTML = '赵云';
  4. oUl.appendChild(oLi);

6.2.1插入标签

append和appendTo

  1. //追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素
  2. 父元素.append(子元素)
  3. //追加到某元素，子元素添加到父元素
  4. 子元素.appendTo(父元素)
  1. //append
  2. var oli = document.createElement('li');
  3. oli.innerHTML = '哈哈哈';
  4. $('ul').append('<li>1233</li>');
  5. $('ul').append(oli);
  6. $('ul').append($('#app'));
  8. //appendTo
  9. $('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active')

如果追加的jquery对象原本在文档树中，那么这些元素将从原位置上消失。简言之，就是移动操作。

prepend和prependTo

  1. // 前置添加， 添加到父元素的第一个位置
  2. 父元素.prepend(子元素)；
  4. // 前置添加， 添加到父元素的第一个位置
  5. 子元素.prependTo(父元素)；
  7. // prepand
  8. $('ul').prepend('<li>我是第一个</li>')
  10. // prependTo
  11. $('<a href="#">路飞学诚</a>').prependTo('ul')

after和insertAfter

  1. // 在匹配的元素之后插入内容 
  2. 兄弟元素.after(要插入的兄弟元素)；
  3. 要插入的兄弟元素.inserAfter(兄弟元素)；
  5. $('ul').after('<h4>我是一个h3标题</h4>')
  6. $('<h5>我是一个h2标题</h5>').insertAfter('ul')

before和insertBefore

  1. // 在匹配的元素之前插入内容
  2. 兄弟元素.before(要插入的兄弟元素)；
  3. 要插入的兄弟元素.inserBefore(兄弟元素)；
  4.  
  5. //示例
  6. $('ul').before('<h3>我是一个h3标题</h3>')
  7. $('<h2>我是一个h2标题</h2>').insertBefore('ul')

6.2.2删除标签 remove、detach和empty

  1. //删除节点后，事件也会删除（简言之，删除了整个标签）
  2. $(selector).remove(); 
  4. // 删除节点后，事件会保留
  5. $(selector).detach(); 
  7. // 清空选中元素中的所有后代节点
  8. $(selector).empty(); 
  1. // remove
  2. $('ul').remove();
  4. // detach
  5. var $btn = $('button').detach()
  6. $('ul').append($btn) //此时按钮能追加到ul中
  8. //empty
  9. $('ul').empty() //清空掉ul中的子元素，保留ul

6.2.3修改标签 replaceWith和replaceAll

  1. // selector被替换：将所有匹配的元素替换成指定的string、js对象、jquery对象。
  2. $(selector).replaceWith(content);
  4. // selector被替换：将所有的匹配的元素替换成p标签。
  5. $('<p>哈哈哈</p>')replaceAll(selector);
  6. // replaceWith 
  7. $('h5').replaceWith('<a href="#">hello world</a>') //将所有的h5标题替换为a标签
  8. $('h5').replaceWith($('#app')); //将所有h5标题标签替换成id为app的dom元素
  10. // replaceAll
  11. $('<br/><hr/><button>按钮</button>').replaceAll('h4')

6.2.4克隆标签 clone

  1. // 克隆匹配的DOM元素
  2. $(选择器).clone();
  3. $('button').click(function() {
  5.  // 1.clone()：克隆匹配的DOM元素
  6.  // 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
  7.   $(this).clone(true).insertAfter(this);
  8. })

6.3属性操作

6.3.1attr() 设置属性值、者获取属性值

  1. //获取值：attr()设置一个属性值的时候 只是获取值
  2. $('div').attr('id')
  3. $('div').attr('class')
  6. //设置值
  7. $('div').attr('class','box') //设置一个值
  8. $('div').attr({name:'hahaha',class:'happy'}) //设置多个值

6.3.2removeAttr() 移除属性

  1. //删除单个属性
  2. $('#box').removeAttr('name');
  3. $('#box').removeAttr('class');
  5. //删除多个属性
  6. $('#box').removeAttr('name class');

6.3.3prop()

  1. // 查看属性
  2. $(selector).prop(property)
  4. // 设置属性
  5. $(selector).prop(property,value)
  7. // 设置多个属性
  8. $(selector).prop({property:value, property:value,...})
  1. $('input').attr('checked')
  2. "checked"
  4. $('input').prop('checked') // true
  6. $('input').prop('cheched',false)  //设置取消选中

表格全选、反选示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. <button id="all">全选</button>
  10. <button id="reverse">反选</button>
  11. <button id="cancel">取消</button>
  12. <table border="1">
  13.    <thead>
  14.     <tr>
  15.         <th>#</th>
  16.         <th>姓名</th>
  17.         <th>爱好</th>
  18.     </tr>
  19.    </thead>
  20.     <tbody>
  21.     <tr>
  22.         <td><input type="checkbox"></td>
  23.         <td>金老板</td>
  24.         <td>开车</td>
  25.     </tr>
  26.     <tr>
  27.         <td><input type="checkbox"></td>
  28.         <td>alex</td>
  29.         <td>抽烟、喝酒、烫头</td>
  30.     </tr>
  31.     <tr>
  32.         <td><input type="checkbox"></td>
  33.         <td>苑昊（苑局）</td>
  34.         <td>不洗头、不翻车、不要脸</td>
  35.     </tr>
  36.     </tbody>
  37. </table>
  39. <script src="jquery3.4.1.js"></script>
  40. <script>
  41.     // 点击全选按钮 选中所有的checkbox
  42.     // DOM绑定事件方法
  43.     // $("#all")[0].onclick = function(){}
  44.     // jQuery绑定事件方法
  45.     $("#all").click(function () {
  46.         $(":checkbox").prop('checked', true);
  47.     });
  48.     // 取消
  49.     $("#cancel").on("click", function () {
  50.          $(":checkbox").prop('checked', false);
  51.     });
  52.     // 反选
  53.     $("#reverse").click(function () {
  54.         // 1. 找到所有选中的checkbox取消选中
  55.         // $("input:checked").prop('checked', false);
  56.         // // 2. 找到没有选中的checkbox选中
  57.         // $("input:not(:checked)").prop('checked', true);
  58.         //你会发现上面这么写，不行，为什么呢？因为你做了第一步操作之后，再做第二步操作的时候，所有标签就已经全部取消选中了，所以第二步就把所有标签选中了
  60.         // 方法1. for循环所有的checkbox,挨个判断原来选中就取消选中，原来没选中就选中
  61.         var $checkbox = $(":checkbox");
  62.         for (var i=0;i<$checkbox.length;i++){
  63.             // 获取原来的选中与否的状态
  64.             var status = $($checkbox[i]).prop('checked');
  65.             $($checkbox[i]).prop('checked', !status);
  66.         }
  67.         // 方法2. 先用变量把标签原来的状态保存下来
  68.     //     var $unchecked =  $("input:not(:checked)");
  69.     //     var $checked = $("input:checked");
  70.     //
  71.     //     $unchecked.prop('checked', true);
  72.     //     $checked.prop('checked', false);
  73.     })
  75. </script>
  76. </body>
  77. </html>

6.4class类属性

6.4.1addClass添加类名

  1. // 为每个匹配的元素添加指定的类名。
  2. $('div').addClass("box");//追加一个
  3. $('div').addClass("box box2");//追加多个

6.4.2removeClass移除类名

  1. // 从所有匹配的元素中删除全部或者指定的类。
  2. $('div').removeClass('box')；//移除box类
  3. $('div').removeClass();//移除全部的类
  1. var tag  = false;
  2. $('span').click(function(){
  3.     if(tag){
  4.         $('span').removeClass('active')
  5.         tag=false;
  6.     }else{
  7.         $('span').addClass('active')
  8.         tag=true;
  9.     }    
  10. })

通过添加删除类，来实现元素的显示隐藏

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         .active{
  8.             color: red;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.      <ul>
  14.          <li class="item">张三</li>
  15.          <li class="item">李四</li>
  16.          <li class="item">王五</li>
  17.      </ul>
  18.      <script type="text/javascript" src="jquery-3.3.1.js"></script>
  19.      <script type="text/javascript">
  20.          $(function(){
  22.              $('ul li').click(function(){
  23.                  // this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象
  24.                  $(this).addClass('active').siblings('li').removeClass('active');
  25.              })
  26.          })
  27.      </script>
  28. </body>
  29. </html>

6.4.3toggleClass类的切换

  1. // 如果存在（不存在）就删除（添加）一个类。
  2. $('div').toggleClass('box')
  4. $('span').click(function(){
  5.     //动态的切换class类名为active
  6.     $(this).toggleClass('active')
  7. })

6.5val 表单控件value属性

  1. // 获取值：用于表单控件中获取值，比如input textarea select等等
  2. $(selector).val()
  4. // 设置值：
  5. $('input').val('设置了表单控件中的值')；
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <form action="">
  9.             <input type="radio" name="sex"  value="112" />男
  10.             <!-- 设置cheked属性表示选中当前选项 -->
  11.             <input type="radio" name="sex"  value="11" checked="" />女
  12.             <input type="radio" name="sex"  value="11" />gay
  14.             <input type="checkbox" value="a" checked=""/>吃饭
  15.             <input type="checkbox" value="b" />睡觉
  16.             <input type="checkbox" value="c" checked=""/>打豆豆
  18.     <!-- 下拉列表 option标签内设置selected属性 表示选中当前 -->
  19.             <select name="timespan" id="timespan" class="Wdate"   >
  20.                 <option value="1">8:00-8:30</option>
  21.                 <option value="2" selected="">8:30-9:00</option>
  22.                 <option value="3">9:00-9:30</option>
  23.             </select>
  24.             <input type="text" name="" id="" value="111" />
  25.     </form>
  27. </body>
  28. <script type="text/javascript" src="jquery3.4.1.js"></script>
  29.     <script type="text/javascript">
  31.         $(function(){
  32.             // 一、获取值
  33.                 //1.获取单选框被选中的value值
  34.                 console.log($('input[type=radio]:checked').val())
  36.                 //2.复选框被选中的value,获取的是第一个被选中的值
  37.                 console.log($('input[type=checkbox]:checked').val())
  39.                 //3.下拉列表被选中的值
  41.                 var obj = $("#timespan option:selected");
  42.                 // 获取被选中的值
  43.                 var  time  = obj.val();
  44.                 console.log(time);
  45.                 // 获取文本
  46.                 var  time_text  = obj.text();
  47.                 console.log("val:"+time+" text"+ time_text );
  49.                 //4.获取文本框的value值
  50.                 console.log($("input[type=text]").val())//获取文本框中的值
  52.                 // 二.设置值
  53.                 //1.设置单选按钮和多选按钮被选中项
  54.                 $('input[type=radio]').val(['112']);
  55.                 $('input[type=checkbox]').val(['a','b']);
  58.                 //2.设置下拉列表框的选中值，必须使用select
  59.                 /*因为option只能设置单个值，当给select标签设置multiple。
  60.                 那么我们设置多个值,就没有办法了，但是使用select设置单个值和多个值都可以
  61.                 */
  62.                 $('select').val(['3','2'])
  65.                 //3.设置文本框的value值
  66.                 $('input[type=text]').val('试试就试试')
  67.         })
  69.     </script>
  70. </html>

6.6css样式

  1. // css(直接修改css的属性来修改样式)
  2. $("div").css('color'); //获取
  4. $("p").css("color", "red"); //设置
  5. $("p").css({"color":"red","background-color":"yello"}); // 设置多个

6.7盒子样式属性

6.7.1内容 : 宽度(width)和高度(height)

  1. // 宽度
  2. .width() //获取宽度 返回匹配元素中第一个元素的宽，一个没有单位的数值
  3. .width( value ) //设置宽度
  5. //高度
  6. .height() //获取高度 返回匹配元素中第一个元素的高，一个没有单位的数值
  7. .height( value ) //设置高度

6.7.2内容+padding : 宽度(innerWidth)和高度(innerHeight)

  1. // 内部宽
  2. .innerWidth() // 获取
  3. .innerWidth(value);//设置
  5. // 内部高
  6. .innerHeight() // 获取
  7. .innerHeight(value); //设置

6.7.3内容+padding+border : 宽度(outerWidth)和高度(outerHeight)

  1. // 外部宽
  2.  .outerWidth() //获取第一个匹配元素 ：内容+padding+border的宽
  3.  .outerWidth(true) //获取第一个匹配元素：内容+padding+border+margin的宽
  5.  .outerWidth(value) //设置多个，调整的是“内容”的宽
  7. //外部高
  8.  .outerHeight() //第一个匹配元素：获取内容+padding+border的高
  9.  .outerHeight(true) //第一个匹配元素：获取内容+padding+border+margin的高
  11.  .outerHeight( value ) //设置多个，调整的是“内容”的高

6.8滚动条距离属性

  1. // 水平方向
  2. .scrollLeft()      //获取
  3. .scrollLeft( value )//设置
  5. // 垂直方向
  6. .scrollTop() //获取
  7. .scrollTop( value ) //设置

7.jQuery动画效果

jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。

7.1显示动画

方式一：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实现的。

  1. $("div").show();

方式二：通过控制元素的宽高、透明度、display属性，逐渐显示，例如：3秒后显示完毕。

  1. $('div').show(3000);

方式三：和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。

  1. $("div").show("slow");
  1. // slow 慢：600ms
  2. // normal 正常：400ms
  3. // fast 快：200ms

方式四：动画执行完后，立即执行回调函数。

  1. //show(毫秒值，回调函数;
  2. $("div").show(5000,function () {
  3.     alert("动画执行完毕！");
  4. });

总结：上面的四种方式几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。

7.2隐藏动画

方式参照上面的show()方法的方式。如下：

  1. $(selector).hide();
  3. $(selector).hide(1000); 
  5. $(selector).hide("slow");
  7. $(selector).hide(1000, function(){});

练习 ： 实现点击按钮显示盒子，再点击按钮隐藏盒子

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             #box{
  8.                 width: 200px;
  9.                 height: 200px;
  10.                 background-color: green;
  11.                 border: 1px solid red;
  12.                 display: none;
  13.             }
  14.         </style>
  15.     </head>
  16.     <body>
  17.         <div id="box">        
  18.         </div>
  19.         <button id="btn">隐藏</button>    
  20.     </body>
  21.     <script src="jquery-3.3.1.js"></script>
  22.     
  23.     <script type="text/javascript">
  24.         
  25.         //jquery 提供了一些方法 show() hide() 控制元素显示隐藏
  26.         var isShow = true;
  27.         $('#btn').click(function(){
  28.             if(isShow){
  29.                 $('#box').show('slow',function(){
  30.                     $(this).text('盒子出来了');            
  31.                     $('#btn').text('显示');
  32.                     isShow = false;
  33.                 })
  34.             }else{
  35.                 $('#box').hide(2000,function(){
  36.                     $(this).text('');    
  37.                     $('#btn').text('隐藏');
  38.                     isShow = true;
  39.                 })
  40.             }
  41.         })
  42.         
  43.     </script>
  44. </html>

7.3开关式显示隐藏动画

  1. $('#box').toggle(3000,function(){});

显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()

  1. $('#btn').click(function(){
  2.     $('#box').toggle(3000,function(){
  3.         $(this).text('盒子出来了');    
  4.         if ($('#btn').text()=='隐藏') {
  5.             $('#btn').text('显示');    
  6.         }else{
  7.             $('#btn').text('隐藏');    
  8.         }
  9.     });
  10. })

7.4滑入和滑出

7.4.1滑入动画效果：（类似于生活中的卷帘门）:下拉动画，显示元素。

  1. $(selector).slideDown(speed, 回调函数);

注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）

7.4.2滑出动画效果： 上拉动画，隐藏元素。

  1. $(selector).slideUp(speed, 回调函数);

7.4.3滑入滑出切换动画效果：

  1. $(selector).slideToggle(speed, 回调函数);
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {
  8.             width: 300px;
  9.             height: 300px;
  10.             display: none;
  11.             background-color: green;
  12.         }
  13.     </style>
  15.     <script src="jquery-3.3.1.js"></script>
  16.     <script>
  17.         $(function () {
  18.             //点击按钮后产生动画
  19.             $("button:eq(0)").click(function () {
  21.                 //滑入动画： slideDown(毫秒值，回调函数[显示完毕执行什么]);
  22.                 $("div").slideDown(2000, function () {
  23.                     alert("动画执行完毕！");
  24.                 });
  25.             })
  27.             //滑出动画
  28.             $("button:eq(1)").click(function () {
  30.                 //滑出动画：slideUp(毫秒值，回调函数[显示完毕后执行什么]);
  31.                 $("div").slideUp(2000, function () {
  32.                     alert("动画执行完毕！");
  33.                 });
  34.             })
  36.             $("button:eq(2)").click(function () {
  37.                 //滑入滑出切换（同样有四种用法）
  38.                 $("div").slideToggle(1000);
  39.             })
  40.         })
  41.     </script>
  42. </head>
  43. <body>
  44. <button>滑入</button>
  45. <button>滑出</button>
  46. <button>切换</button>
  47. <div></div>
  49. </body>
  50. </html>

7.5淡入淡出动画

淡入动画效果：让元素以淡淡的进入视线的方式展示出来

  1. $(selector).fadeIn(speed, callback);

淡出动画效果：让元素以渐渐消失的方式隐藏起来

  1. $(selector).fadeOut(1000);

淡入淡出切换动画效果：通过改变透明度，切换匹配元素的显示或隐藏状态

  1. $(selector).fadeToggle('fast', callback);

参数的含义同show()方法。

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {
  8.             width: 300px;
  9.             height: 300px;
  10.             display: none;
  11.             /*透明度*/
  12.             opacity: 0.5;
  13.             background-color: red;
  14.         }
  15.     </style>
  17.     <script src="jquery-3.3.1.js"></script>
  18.     <script>
  19.         $(function () {
  20.             //点击按钮后产生动画
  21.             $("button:eq(0)").click(function () {
  23. //                //淡入动画用法1:   fadeIn();   不加参数
  24.                 $("div").fadeIn();
  26. //                //淡入动画用法2:   fadeIn(2000);   毫秒值
  27. //                $("div").fadeIn(2000);
  28. //                //通过控制  透明度和display
  30.                 //淡入动画用法3:   fadeIn(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
  31. //                $("div").fadeIn("slow");
  32. //                $("div").fadeIn("fast");
  33. //                $("div").fadeIn("normal");
  35.                 //淡入动画用法4:   fadeIn(毫秒值，回调函数[显示完毕执行什么]);
  36. //                $("div").fadeIn(5000,function () {
  37. //                    alert("动画执行完毕！");
  38. //                });
  39.             })
  41.             //滑出动画
  42.             $("button:eq(1)").click(function () {
  43. //                //滑出动画用法1:   fadeOut();   不加参数
  44.                $("div").fadeOut();
  46. //                //滑出动画用法2:   fadeOut(2000);   毫秒值
  47. //                $("div").fadeOut(2000);  //通过这个方法实现的：display: none;
  48. //                //通过控制  透明度和display
  50.                 //滑出动画用法3:   fadeOut(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
  51. //                $("div").fadeOut("slow");
  52. //                $("div").fadeOut("fast");
  53. //                $("div").fadeOut("normal");
  55.                 //滑出动画用法1:   fadeOut(毫秒值，回调函数[显示完毕执行什么]);
  56. //                $("div").fadeOut(2000,function () {
  57. //                    alert("动画执行完毕！");
  58. //                });
  59.             })
  61.             $("button:eq(2)").click(function () {
  62.                 //滑入滑出切换
  63.                 //同样有四种用法
  64.                 $("div").fadeToggle(1000);
  65.             })
  67.             $("button:eq(3)").click(function () {
  68.                 //改透明度
  69.                 //同样有四种用法
  70.                 $("div").fadeTo(1000, 0.5, function () {
  71.                     alert(1);
  72.                 });
  73.             })
  74.         })
  75.     </script>
  76. </head>
  77. <body>
  78. <button>淡入</button>
  79. <button>淡出</button>
  80. <button>切换</button>
  81. <button>改透明度为0.5</button>
  82. <div></div>
  84. </body>
  85. </html>

7.6自定义动画

7.6.1语法：

  1. $(selector).animate({params}, speed, callback);

7.6.2作用：执行一组CSS属性的自定义动画。

  • 第一个参数表示：要执行动画的CSS属性（必选）
  • 第二个参数表示：执行动画时长（可选）
  • 第三个参数表示：动画执行完后，立即执行的回调函数（可选）
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {
  8.             position: absolute;
  9.             left: 20px;
  10.             top: 30px;
  11.             width: 100px;
  12.             height: 100px;
  13.             background-color: green;
  14.         }
  15.     </style>
  16.     <script src="jquery-3.3.1.js"></script>
  17.     <script>
  18.         jQuery(function () {
  19.             $("button").click(function () {
  20.                 var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
  21.                 var json2 = {
  22.                     "width": 100,
  23.                     "height": 100,
  24.                     "left": 100,
  25.                     "top": 100,
  26.                     "border-radius": 100,
  27.                     "background-color": "red"
  28.                 };
  30.                 //自定义动画
  31.                 $("div").animate(json, 1000, function () {
  32.                     $("div").animate(json2, 1000, function () {
  33.                         alert("动画执行完毕！");
  34.                     });
  35.                 });
  37.             })
  38.         })
  39.     </script>
  40. </head>
  41. <body>
  42. <button>自定义动画</button>
  43. <div></div>
  44. </body>
  45. </html>

7.7停止动画

  1. $(selector).stop(true, false);
  1. //第一个参数：
  2. true：后续动画不执行。
  3. false：后续动画会执行。
  5. //第二个参数：
  6. true：立即执行完成当前动画。
  7. false：立即停止当前动画。

参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。

鼠标悬停，弹出下拉菜单

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  12.         ul {
  13.             list-style: none;
  14.         }
  16.         .wrap {
  17.             width: 330px;
  18.             height: 30px;
  19.             margin: 100px auto 0;
  20.             padding-left: 10px;
  21.             background-color: pink;
  22.         }
  24.         .wrap li {
  25.             background-color: green;
  26.         }
  28.         .wrap > ul > li {
  29.             float: left;
  30.             margin-right: 10px;
  31.             position: relative;
  32.         }
  34.         .wrap a {
  35.             display: block;
  36.             height: 30px;
  37.             width: 100px;
  38.             text-decoration: none;
  39.             color: #000;
  40.             line-height: 30px;
  41.             text-align: center;
  42.         }
  44.         .wrap li ul {
  45.             position: absolute;
  46.             top: 30px;
  47.             display: none;
  48.         }
  49.     </style>
  50.     <script src="jquery-3.3.1.js"></script>
  51.     <script>
  52.         //入口函数
  53.         $(document).ready(function () {
  54.             //需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。
  55.             var jqli = $(".wrap>ul>li");
  57.             //绑定事件
  58.             jqli.mouseenter(function () {
  59.                 $(this).children("ul").stop().slideDown(1000);
  60.             });
  62.             //绑定事件(移开隐藏)
  63.             jqli.mouseleave(function () {
  64.                 $(this).children("ul").stop().slideUp(1000);
  65.             });
  66.         });
  67.     </script>
  69. </head>
  70. <body>
  71. <div class="wrap">
  72.     <ul>
  73.         <li>
  74.             <a href="javascript:void(0);">一级菜单1</a>
  75.             <ul>
  76.                 <li><a href="javascript:void(0);">二级菜单2</a></li>
  77.                 <li><a href="javascript:void(0);">二级菜单3</a></li>
  78.                 <li><a href="javascript:void(0);">二级菜单4</a></li>
  79.             </ul>
  80.         </li>
  81.         <li>
  82.             <a href="javascript:void(0);">二级菜单1</a>
  83.             <ul>
  84.                 <li><a href="javascript:void(0);">二级菜单2</a></li>
  85.                 <li><a href="javascript:void(0);">二级菜单3</a></li>
  86.                 <li><a href="javascript:void(0);">二级菜单4</a></li>
  87.             </ul>
  88.         </li>
  89.         <li>
  90.             <a href="javascript:void(0);">三级菜单1</a>
  91.             <ul>
  92.                 <li><a href="javascript:void(0);">三级菜单2</a></li>
  93.                 <li><a href="javascript:void(0);">三级菜单3</a></li>
  94.                 <li><a href="javascript:void(0);">三级菜单4</a></li>
  95.             </ul>
  96.         </li>
  97.     </ul>
  98. </div>
  99. </body>
  100. </html>

上方代码中，关键的地方在于，用了stop函数，再执行动画前，先停掉之前的动画。

8.jQuery的事件操作

8.1绑定事件

  1. bind(type,data,fn)

描述：为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。

  1. type (String) : 事件类型
  3. data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
  5. fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数

当每个p标签被点击的时候，弹出其文本

  1. $("p").bind("click", function(){
  2.   alert( $(this).text() );
  3. });

你可以在事件处理之前传递一些附加的数据

  1. function handler(event) {
  2. //event.data 可以获取bind()方法的第二个参数的数据
  3.   alert(event.data.foo);
  4. }
  5. $("p").bind("click", {foo: "bar"}, handler)

常见事件

  1. click(function(){...})
  2. hover(function(){...})
  3. blur(function(){...})
  4. focus(function(){...})
  5. change(function(){...}) //内容发生变化，input，select等
  6. keyup(function(){...})  
  7. mouseover/mouseout
  8. mouseenter/mouseleave
  9. mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象

通过返回false来取消默认的行为并阻止事件起泡

  1. $("form").bind("submit", function() { return false; })

或通过event.preventDefault() 方法阻止事件起泡

  1. $("form").bind("submit", function(event){
  2.   event.stopPropagation();
  3. });

8.2解绑事件

  1. unbind(type,fn);

描述：bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

　　如果没有参数，则删除所有绑定的事件。

　　如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

  1. type (String) : (可选) 事件类型
  2. fn(Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数

示例：把所有段落的所有事件取消绑定

  1. $("p").unbind()

将段落的click事件取消绑定

$("p").unbind( "click" )

8.3补充 一次性事件

  1. one(type,data,fn)

描述：为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同

  1. type (String) : 事件类型
  2. data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
  3. fn (Function) : 绑定到每个匹配元素的事件上面的处理函数

示例：当所有段落被第一次点击的时候，显示所有其文本。

  1. $("p").one("click", function(){
  2. //只有第一次点击的时候才会触发，再次点击不会触发了
  3.   alert( $(this).text() );
  4. });

8.4事件委托（事件代理）

通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。
举个列子：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

原理：利用冒泡的原理，把事件加到父级上，触发执行效果。

作用：

1.性能要好
2.针对新创建的元素，直接可以拥有事件

事件源 :

　　跟this作用一样(他不用看指向问题，谁操作的就是谁),event对象下的

使用情景：

　　?为DOM中的很多元素绑定相同事件；
　　?为DOM中尚不存在的元素绑定事件；

  1. <body>
  2.         <ul>
  3.             <li class="luffy">路飞</li>
  4.             <li>路飞</li>
  5.             <li>路飞</li>
  6.             
  7.         </ul>
  8. </body>
  9. <script src="jquery-3.2.1.js"></script>
  10. <script type="text/javascript">
  11. $(document).ready(function(){
  12.     
  13.     //通过on()方法
  14.      $('ul').on('click','#namei,.luffy',function(){
  15.         console.log(this);
  16.        })
  17.             
  18.    //未来追加的元素 
  19.     $('ul').append('<a id="namei">娜美</a>')
  21. }
  22. </script>

语法：在选定的元素上绑定一个或多个事件处理函数

  1. on(type,selector,data,fn);
  1. events( String) : 一个或多个空格分隔的事件类型
  2. selector( String) : 一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素
  3. data: 当一个事件被触发时，要传递给事件处理函数的event.data。
  4. fn:回调函数

9.示例

表单验证

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="x-ua-compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <title>登录注册示例</title>
  8.   <style>
  9.     .error {
  10.       color: red;
  11.     }
  12.   </style>
  13. </head>
  14. <body>
  16. <form id="myForm">
  17.   <label for="name">姓名</label>
  18.   <input type="text" id="name">
  19.   <span class="error"></span>
  20.   <label for="passwd">密码</label>
  21.   <input type="password" id="passwd">
  22.   <span class="error"></span>
  23.   <input type="submit" id="modal-submit" value="登录">
  24. </form>
  26. <script src="jquery3.4.1.js"></script>
  27. <script>
  28.   function myValidation() {
  29.     // 多次用到的jQuery对象存储到一个变量，避免重复查询文档树
  30.     var $myForm = $("#myForm");
  31.     $myForm.find(":submit").on("click", function () {
  32.       // 定义一个标志位，记录表单填写是否正常
  33.       var flag = true;
  34.       $myForm.find(":text, :password").each(function () {
  35.         var val = $(this).val();
  36.         if (val.length <= 0 ){
  37.           var labelName = $(this).prev("label").text();
  38.           $(this).next("span").text(labelName + "不能为空");
  39.           flag = false;
  40.         }
  41.       });
  42.       return flag;
  43.     });
  44.     // input输入框获取焦点后移除之前的错误提示信息
  45.     $myForm.find("input[type!='submit']").on("blur", function () {
  46.       $(this).next(".error").text("");
  47.     })
  48.   }
  49.   myValidation()
  50. </script>
  51. </body>
  52. </html>

表格操作

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .cover {
  8.             position: fixed;
  9.             top: 0;
  10.             right: 0;
  11.             bottom: 0;
  12.             left: 0;
  13.             background-color: rgba(0, 0, 0, 0.3);
  14.             z-index: 99;
  15.         }
  17.         .modal {
  18.             width: 300px;
  19.             height: 200px;
  20.             background-color: white;
  21.             position: absolute;
  22.             top: 50%;
  23.             left: 50%;
  24.             margin-top: -100px;
  25.             margin-left: -150px;
  26.             z-index: 1000;
  27.         }
  28.         .hide {
  29.             display: none;
  30.         }
  31.     </style>
  32.     <script src="jquery3.4.1.js"></script>
  33. </head>
  34. <body>
  36. <button id="add">新增</button>
  37. <table border="1">
  38.     <thead>
  39.     <tr>
  40.         <th>#</th>
  41.         <th>姓名</th>
  42.         <th>爱好</th>
  43.         <th>操作</th>
  44.     </tr>
  45.     </thead>
  46.     <tbody>
  47.     <tr>
  48.         <td><input type="checkbox"></td>
  49.         <td>金老板</td>
  50.         <td>开车</td>
  51.         <td>
  52.             <button class="fire">开除</button>
  53.         </td>
  54.     </tr>
  55.     <tr>
  56.         <td><input type="checkbox"></td>
  57.         <td>alex</td>
  58.         <td>抽烟、喝酒、烫头</td>
  59.         <td>
  60.             <button class="fire">开除</button>
  61.         </td>
  62.     </tr>
  63.     <tr>
  64.         <td><input type="checkbox"></td>
  65.         <td>苑昊（苑局）</td>
  66.         <td>不洗头、不翻车、不要脸</td>
  67.         <td>
  68.             <button class="fire">开除</button>
  69.         </td>
  70.     </tr>
  71.     </tbody>
  72. </table>
  74. <div class="cover hide"></div>
  75. <div class="modal hide">
  76.     <div>
  77.         <label>姓名：
  78.             <input type="text" id="name">
  79.         </label>
  80.     </div>
  81.     <div>
  82.         <label>爱好：
  83.             <input type="text" id="hobby">
  84.         </label>
  85.     </div>
  86.     <button id="cancel" type="button">取消</button>
  87.     <button id="submit" type="button">提交</button>
  89. </div>
  91. <script>
  92.     // 定义一个清空输入框并且隐藏模态框的方法
  93.     function hideModal(){
  94.          // 1. 清空input的值
  95.         $("#name,#hobby").val('');
  96.         // 2. 隐藏起来
  97.         $(".cover,.modal").addClass('hide');
  98.     }
  99.     // 开除按钮的功能
  100.     $("table").on('click', '.fire', function () { //我们先去学冒泡事件、事件委托然后再回来学这个例子，事件里面都是用的匿名函数，这里用on是因为我们要将新添加进来的每行里面的button标签能够继承这个点击删除的事件
  101.         // 点击开除按钮要做的事儿————把当前行移除掉
  102.         //this  --> 触发当前点击事件的DOM对象
  103.         $(this).parent().parent().remove();  // 链式操作
  104.     });
  105.     // 新增按钮的功能
  106.     $("#add").click(function () {
  107.         // 点击新增按钮要做的事儿
  108.         // 1. 移除cover和modal的hide样式
  109.         $(".cover,.modal").removeClass('hide');
  110.     });
  111.     // 点击modal中的cancel按钮
  112.     $("#cancel").click(function () {
  113.        hideModal();
  114.     });
  116.     // 点击modal中的submit按钮
  117.     $("#submit").click(function () {
  118.         // 1. 获取用户输入的值
  119.         var name = $("#name").val();
  120.         var hobby = $("#hobby").val();
  121.         // 2. 隐藏模态框，清空输入框
  122.         hideModal();
  123.         // 3. 创建一个tr标签，把数据塞进去
  124.         var trEle = document.createElement("tr");
  125.         $(trEle).append('<td><input type="checkbox"></td>');
  126.         $(trEle).append('<td>' + name + '</td>');
  127.         var tdTmp = document.createElement('td');
  128.         tdTmp.innerText = hobby;
  129.         $(trEle).append(tdTmp);
  130.         $(trEle).append('<td><button class="fire">开除</button></td>')
  131.         // 4. 把上一步的tr追加到表格的tbody后面
  132.         $('tbody').append(trEle);
  133.     });
  134. 　　//先用下面这种方式写，你会发现一些问题，我们新添加的每一行数据里面的那个button标签点击删除的时候没有效果
  135.     // 点击modal中的submit按钮
  136.     // $("#submit").on('click', function () { #这个和直接$('submit').click(function ...)是一样的
  137.     //     // 1. 获取用户输入的值
  138.     //     var name = $("#name").val();
  139.     //     var hobby = $("#hobby").val();
  140.     //     // 2. 隐藏模态框，清空输入框
  141.     //     hideModal();
  142.     //     // 3. 创建一个tr标签，把数据塞进去
  143.     //     var trEle = document.createElement("tr");
  144.     //     $(trEle).append('<td><input type="checkbox"></td>');
  145.     //     $(trEle).append('<td>' + name + '</td>');
  146.     //     var tdTmp = document.createElement('td');
  147.     //     tdTmp.innerText = hobby;
  148.     //     $(trEle).append(tdTmp);
  149.     //     $(trEle).append('<td><button class="fire">开除</button></td>')
  150.     //     // 4. 把上一步的tr追加到表格的tbody后面
  151.     //     $('tbody').append(trEle);
  152.     // })
  154. </script>
  155. </body>
  156. </html>

原文链接：http://www.cnblogs.com/fengqiang626/p/11544088.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号