一、常用事件

  1. click(function(){...})
  2. hover(function(){...})
  3. blur(function(){...})
  4. focus(function(){...})
  5. change(function(){...})
  6. keyup(function(){...})

keydown和keyup事件组合示例：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta http-equiv="content-Type" charset="UTF-8">
  5.     <meta http-equiv="x-ua-compatible" content="IE=edge">
  6.     <title>Title</title>
  7. </head>
  8. <body>
  9.  
  10. <table border="1">
  11.     <thead>
  12.     <tr>
  13.         <th>#</th>
  14.         <th>姓名</th>
  15.         <th>操作</th>
  16.     </tr>
  17.     </thead>
  18.     <tbody>
  19.     <tr>
  20.         <td><input type="checkbox"></td>
  21.         <td>Egon</td>
  22.         <td>
  23.             <select>
  24.                 <option value="1">上线</option>
  25.                 <option value="2">下线</option>
  26.                 <option value="3">停职</option>
  27.             </select>
  28.         </td>
  29.     </tr>
  30.     <tr>
  31.         <td><input type="checkbox"></td>
  32.         <td>Alex</td>
  33.         <td>
  34.             <select>
  35.                 <option value="1">上线</option>
  36.                 <option value="2">下线</option>
  37.                 <option value="3">停职</option>
  38.             </select>
  39.         </td>
  40.     </tr>
  41.     <tr>
  42.         <td><input type="checkbox"></td>
  43.         <td>Yuan</td>
  44.         <td>
  45.             <select>
  46.                 <option value="1">上线</option>
  47.                 <option value="2">下线</option>
  48.                 <option value="3">停职</option>
  49.             </select>
  50.         </td>
  51.     </tr>
  52.     <tr>
  53.         <td><input type="checkbox"></td>
  54.         <td>EvaJ</td>
  55.         <td>
  56.             <select>
  57.                 <option value="1">上线</option>
  58.                 <option value="2">下线</option>
  59.                 <option value="3">停职</option>
  60.             </select>
  61.         </td>
  62.     </tr>
  63.     <tr>
  64.         <td><input type="checkbox"></td>
  65.         <td>Gold</td>
  66.         <td>
  67.             <select>
  68.                 <option value="1">上线</option>
  69.                 <option value="2">下线</option>
  70.                 <option value="3">停职</option>
  71.             </select>
  72.         </td>
  73.     </tr>
  74.     </tbody>
  75. </table>
  76.  
  77. <script src="jquery.js"></script>
  78. <script>
  79.     var flag = false;
  80.     // shift被按下，就将全局的flag置为true
  81.     $(window).keydown(function (e) {
  82.         if (e.keyCode === 16) {
  83.             flag = true;
  84.         }
  85.     });
  86.     // shift被抬起的时候，就将全局的flag置为false
  87.     $(window).keyup(function (e) {
  88.         if (e.keyCode === 16) {
  89.             flag = false;
  90.         }
  91.     });
  92.     // 按下shift键，进入批量编辑模式
  93.     // 应该是给select标签绑定change事件
  94.     $('td>select').change(function () {
  95.         // 判断是否进入批量编辑模式
  96.         // 如何判断shift按键被按下
  97.         // 如何判断当前行被选中
  98.         var isChecked = $(this).parent().prev().prev().find(':checkbox').prop('checked');
  99.         if (flag && isChecked) {
  100.             // 1. 取到当前select选中的值
  101.             var checkedValue = $(this).val();
  102.             // 2. 找到所有被选中的行
  103.             // 3. 把选中行的select置为和我一样的值
  104.             $('tr:has(input:checked)').find('select').val(checkedValue);
  105.         }
  106.     })
  107. </script>
  108. </body>
  109. </html>

按住shift实现批量操作

hover事件示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>hover示例</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.  
  14.         .nav {
  15.             height: 40px;
  16.             width: 100%;
  17.             background-color: #3d3d3d;
  18.             position: fixed;
  19.             top: 0;
  20.         }
  21.  
  22.         .nav ul {
  23.             list-style-type: none;
  24.             line-height: 40px;
  25.         }
  26.  
  27.         .nav li {
  28.             float: left;
  29.             padding: 0 10px;
  30.             color: #999999;
  31.             position: relative;
  32.         }
  33.  
  34.         .nav li:hover {
  35.             background-color: #0f0f0f;
  36.             color: white;
  37.         }
  38.  
  39.         .clearfix:after {
  40.             content: "";
  41.             display: block;
  42.             clear: both;
  43.         }
  44.  
  45.         .son {
  46.             position: absolute;
  47.             top: 40px;
  48.             right: 0;
  49.             height: 50px;
  50.             width: 100px;
  51.             background-color: #00a9ff;
  52.             display: none;
  53.         }
  54.  
  55.         .hover .son {
  56.             display: block;
  57.         }
  58.     </style>
  59. </head>
  60. <body>
  61. <div class="nav">
  62.     <ul class="clearfix">
  63.         <li>登录</li>
  64.         <li>注册</li>
  65.         <li>购物车
  66.             <p class="son hide">
  67.                 空空如也...
  68.             </p>
  69.         </li>
  70.     </ul>
  71. </div>
  72. <script src="jquery.js"></script>
  73. <script>
  74.     $(".nav li").hover(
  75.         function () {
  76.             $(this).addClass("hover");
  77.         },
  78.         function () {
  79.             $(this).removeClass("hover");
  80.         }
  81.     );
  82. </script>
  83. </body>
  84. </html>

hover事件

实时监听input输入值变化示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="jquery.js"></script>
  7.     <script src="xyh.js"></script>
  8.     <script src="ws.js"></script>
  9.     <script>
  10.         window.onload = function () {
  11.             // input框失去焦点才触发
  12.             $('#i1').on('blur', function () {
  13.                 var value = $(this).val();
  14.                 console.log(value);
  15.             });
  16.             // input框只要值发生变化就触发
  17.             $('#i1').on('input', function () {
  18.                 var value = $(this).val();
  19.                 console.log(value);
  20.             })
  21.         }
  22.     </script>
  23. </head>
  24. <body>
  25.  
  26. <input type="text" id="i1">
  27.  
  28. </body>
  29. </html>

input值变化事件

二、事件绑定

1、动态绑定：

$('  ').on('events'  'selector',  function(){} )

  • events： 事件
  • selector: 选择器（可选的）
  • function: 事件处理函数

2、静态绑定：

$('  ').click(function(){})

$('  ').on('click',  function(){})

三、移除事件

.off(events selector, function(){})

off() 方法移除用 .on()绑定的事件处理程序。

  • events： 事件
  • selector: 选择器（可选的）
  • function: 事件处理函数

四、阻止后续事件执行

  1. return false; // 常见阻止表单提交等
  2. e.preventDefault();
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>阻止默认事件</title>
  6. </head>
  7. <body>
  8.  
  9. <form action="">
  10.     <button id="b1">点我</button>
  11. </form>
  12.  
  13. <script src="jquery-3.3.1.min.js"></script>
  14. <script>
  15.     $("#b1").click(function (e) {
  16.         alert(123);
  17.         //return false;
  18.         e.preventDefault();
  19.     });
  20. </script>
  21. </body>
  22. </html>

注意：

像click、keydown等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。

想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：

  1. $('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
  2.     $(this).addClass('hover');
  3. });
  4. $('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
  5.     $(this).removeClass('hover');
  6. });

五、阻止事件冒泡

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>阻止事件冒泡</title>
  6. </head>
  7. <body>
  8. <div>
  9.     <p>
  10.         <span>点我</span>
  11.     </p>
  12. </div>
  13. <script src="jquery-3.3.1.min.js"></script>
  14. <script>
  15.     $("span").click(function (e) {
  16.         alert("span");
  17.         e.stopPropagation();
  18.     });
  19.  
  20.     $("p").click(function () {
  21.         alert("p");
  22.     });
  23.     $("div").click(function () {
  24.         alert("div");
  25.     })
  26. </script>
  27. </body>
  28. </html>

六、页面载入

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

两种写法：

  1. $(document).ready(function(){
  2. // 在这里写你的JS代码...
  3. })

简写：

  1. $(function(){
  2. // 你在这里写你的代码
  3. })

文档加载完绑定事件，并且阻止默认事件发生：

  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>
  15.  
  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>
  25.  
  26. <script src="jquery-3.2.1.min.js"></script>
  27. <script src="s7validate.js"></script>
  28. <script>
  29.     function myValidation() {
  30.         // 多次用到的jQuery对象存储到一个变量，避免重复查询文档树
  31.         var $myForm = $("#myForm");
  32.         $myForm.find(":submit").on("click", function () {
  33.             // 定义一个标志位，记录表单填写是否正常
  34.             var flag = true;
  35.             $myForm.find(":text, :password").each(function () {
  36.                 var val = $(this).val();
  37.                 if (val.length <= 0) {
  38.                     var labelName = $(this).prev("label").text();
  39.                     $(this).next("span").text(labelName + "不能为空");
  40.                     flag = false;
  41.                 }
  42.             });
  43.             // 表单填写有误就会返回false，阻止submit按钮默认的提交表单事件
  44.             return flag;
  45.         });
  46.         // input输入框获取焦点后移除之前的错误提示信息
  47.         $myForm.find("input[type!='submit']").on("focus", function () {
  48.             $(this).next(".error").text("");
  49.         })
  50.     }
  51.  
  52.     // 文档树就绪后执行
  53.     $(document).ready(function () {
  54.         myValidation();
  55.     });
  56. </script>
  57. </body>
  58. </html>

登录校验示例

七、与window.onload的区别

  • window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
  • jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）

八、事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。

示例：

表格中每一行的编辑和删除按钮都能触发相应的事件。

  1. $("table").on("click", ".delete", function () {
  2.   // 删除按钮绑定的事件
  3. })

九、动画效果

  1. // 基本
  2. show([s,[e],[fn]])
  3. hide([s,[e],[fn]])
  4. toggle([s],[e],[fn])
  5. // 滑动
  6. slideDown([s],[e],[fn])
  7. slideUp([s,[e],[fn]])
  8. slideToggle([s],[e],[fn])
  9. // 淡入淡出
  10. fadeIn([s],[e],[fn])
  11. fadeOut([s],[e],[fn])
  12. fadeTo([[s],o,[e],[fn]])
  13. fadeToggle([s,[e],[fn]])
  14. // 自定义（了解即可）
  15. animate(p,[s],[e],[fn])

自定义动画示例：

  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.         div {
  10.             position: relative;
  11.             display: inline-block;
  12.         }
  13.  
  14.         div > i {
  15.             display: inline-block;
  16.             color: red;
  17.             position: absolute;
  18.             right: -16px;
  19.             top: -5px;
  20.             opacity: 1;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.  
  26. <div id="d1">点赞</div>
  27. <script src="jquery.js"></script>
  28. <script>
  29.     $("#d1").on("click", function () {
  30.         var newI = document.createElement("i");
  31.         newI.innerText = "+1";
  32.         $(this).append(newI);
  33.         $(this).children("i").animate({
  34.             opacity: 0
  35.         }, 1000)
  36.     })
  37. </script>
  38. </body>
  39. </html>

点赞特效简单示例

十、each

jQuery.each(collection, callback(indexInArray, valueOfElement))：

描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

  1. li =[10,20,30,40]
  2. $.each(li,function(i, v){
  3. 　　console.log(i, v);//index是索引，ele是每次循环的具体元素。
  4. })

输出：

  1. 010
  2. 120
  3. 230
  4. 340

.each(function(index, Element))：

描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。

.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。

  1. // 为每一个li标签添加foo
  2. $("li").each(function(){
  3. 　　$(this).addClass("c1");
  4. });

注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：

也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：

  1. $("li").addClass("c1");  // 对所有标签做统一操作

注意：

在遍历过程中可以使用 return false提前结束each循环。

终止each循环

  1. return false；

十一、.data()

在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data(key, value):

描述：在匹配的元素上存储任意相关数据。

  1. $("div").data("k",100);  //给所有div标签都保存一个名为k，值为100

.data(key):

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name,value)或 HTML5 data-*属性设置。

  1. $("div").data("k");//返回第一个div标签中保存的"k"的值

.removeData(key):

描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

  1. $("div").removeData("k");  //移除元素上存放k对应的数据

十二、插件（了解即可）

jQuery.extend(object)

jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。

示例：

  1. <script>
  2. jQuery.extend({
  3.   min:function(a, b){return a < b ? a : b;},
  4.   max:function(a, b){return a > b ? a : b;}
  5. });
  6. jQuery.min(2,3);// => 2
  7. jQuery.max(4,5);// => 5
  8. </script>

jQuery.fn.extend(object)

一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。

  1. <script>
  2.   jQuery.fn.extend({
  3.     check:function(){
  4.       return this.each(function(){this.checked =true;});
  5.     },
  6.     uncheck:function(){
  7.       return this.each(function(){this.checked =false;});
  8.     }
  9.   });
  10. // jQuery对象可以使用新添加的check()方法了。
  11. $("input[type='checkbox']").check();
  12. </script>

单独写在文件中的扩展：

  1. (function(jq){
  2.   jq.extend({
  3.     funcName:function(){
  4.     ...
  5.     },
  6.   });
  7. })(jQuery);

例子：

自定义的jQuery登录验证插件

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.         .login-form {
  10.             margin: 100px auto 0;
  11.             max-width: 330px;
  12.         }
  13.  
  14.         .login-form > div {
  15.             margin: 15px 0;
  16.         }
  17.  
  18.         .error {
  19.             color: red;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.  
  25. <div>
  26.     <form action="" class="login-form" novalidate>
  27.  
  28.         <div>
  29.             <label for="username">姓名</label>
  30.             <input id="username" type="text" name="name" required autocomplete="off">
  31.             <span class="error"></span>
  32.         </div>
  33.         <div>
  34.             <label for="passwd">密码</label>
  35.             <input id="passwd" type="password" name="password" required autocomplete="off">
  36.             <span class="error"></span>
  37.         </div>
  38.         <div>
  39.             <label for="mobile">手机</label>
  40.             <input id="mobile" type="text" name="mobile" required autocomplete="off">
  41.             <span class="error"></span>
  42.         </div>
  43.         <div>
  44.             <label for="where">来自</label>
  45.             <input id="where" type="text" name="where" autocomplete="off">
  46.             <span class="error"></span>
  47.         </div>
  48.         <div>
  49.             <input type="submit" value="登录">
  50.         </div>
  51.  
  52.     </form>
  53. </div>
  54.  
  55. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  56. <script src="validate.js"></script>
  57. <script>
  58.     $.validate();
  59. </script>
  60. </body>
  61. </html>

HTML文件

  1. "use strict";
  2. (function ($) {
  3.     function check() {
  4.         // 定义一个标志位，表示验证通过还是验证不通过
  5.         var flag = true;
  6.         var errMsg;
  7.         // 校验规则
  8.         $("form input[type!=':submit']").each(function () {
  9.             var labelName = $(this).prev().text();
  10.             var inputName = $(this).attr("name");
  11.             var inputValue = $(this).val();
  12.             if ($(this).attr("required")) {
  13.                 // 如果是必填项
  14.                 if (inputValue.length === 0) {
  15.                     // 值为空
  16.                     errMsg = labelName + "不能为空";
  17.                     $(this).next().text(errMsg);
  18.                     flag = false;
  19.                     return false;
  20.                 }
  21.                 // 如果是密码类型，我们就要判断密码的长度是否大于6位
  22.                 if (inputName === "password") {
  23.                     // 除了上面判断为不为空还要判断密码长度是否大于6位
  24.                     if (inputValue.length < 6) {
  25.                         errMsg = labelName + "必须大于6位";
  26.                         $(this).next().text(errMsg);
  27.                         flag = false;
  28.                         return false;
  29.                     }
  30.                 }
  31.                 // 如果是手机类型，我们需要判断手机的格式是否正确
  32.                 if (inputName === "mobile") {
  33.                     // 使用正则表达式校验inputValue是否为正确的手机号码
  34.                     if (!/^1[345678]\d{9}$/.test(inputValue)) {
  35.                         // 不是有效的手机号码格式
  36.                         errMsg = labelName + "格式不正确";
  37.                         $(this).next().text(errMsg);
  38.                         flag = false;
  39.                         return false;
  40.                     }
  41.                 }
  42.             }
  43.         });
  44.         return flag;
  45.     }
  46.  
  47.     function clearError(arg) {
  48.         // 清空之前的错误提示
  49.         $(arg).next().text("");
  50.     }
  51.  
  52.     // 上面都是我定义的工具函数
  53.     $.extend({
  54.         validate: function () {
  55.             $("form :submit").on("click", function () {
  56.                 return check();
  57.             });
  58.             $("form :input[type!='submit']").on("focus", function () {
  59.                 clearError(this);
  60.             });
  61.         }
  62.     });
  63. })(jQuery);

JS文件

传参版插件：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.         .login-form {
  10.             margin: 100px auto 0;
  11.             max-width: 330px;
  12.         }
  13.  
  14.         .login-form > div {
  15.             margin: 15px 0;
  16.         }
  17.  
  18.         .error {
  19.             color: red;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.  
  25. <div>
  26.     <form action="" class="login-form" novalidate>
  27.  
  28.         <div>
  29.             <label for="username">姓名</label>
  30.             <input id="username" type="text" name="name" required autocomplete="off">
  31.             <span class="error"></span>
  32.         </div>
  33.         <div>
  34.             <label for="passwd">密码</label>
  35.             <input id="passwd" type="password" name="password" required autocomplete="off">
  36.             <span class="error"></span>
  37.         </div>
  38.         <div>
  39.             <label for="mobile">手机</label>
  40.             <input id="mobile" type="text" name="mobile" required autocomplete="off">
  41.             <span class="error"></span>
  42.         </div>
  43.         <div>
  44.             <label for="where">来自</label>
  45.             <input id="where" type="text" name="where" autocomplete="off">
  46.             <span class="error"></span>
  47.         </div>
  48.         <div>
  49.             <input type="submit" value="登录">
  50.         </div>
  51.  
  52.     </form>
  53. </div>
  54.  
  55. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  56. <script src="validate3.js"></script>
  57. <script>
  58.     $.validate({
  59.         "name": {"required": true},
  60.         "password": {"required": true, "minLength": 8},
  61.         "mobile": {"required": true}
  62.     });
  63. </script>
  64. </body>
  65. </html>

HTML文件

  1. "use strict";
  2. (function ($) {
  3.     function check(arg) {
  4.         // 定义一个标志位，表示验证通过还是验证不通过
  5.         var flag = true;
  6.         var errMsg;
  7.         // 校验规则
  8.         $("form input[type!=':submit']").each(function () {
  9.             var labelName = $(this).prev().text();
  10.             var inputName = $(this).attr("name");
  11.             var inputValue = $(this).val();
  12.             if (arg[inputName].required) {
  13.                 // 如果是必填项
  14.                 if (inputValue.length === 0) {
  15.                     // 值为空
  16.                     errMsg = labelName + "不能为空";
  17.                     $(this).next().text(errMsg);
  18.                     flag = false;
  19.                     return false;
  20.                 }
  21.                 // 如果是密码类型，我们就要判断密码的长度是否大于6位
  22.                 if (inputName === "password") {
  23.                     // 除了上面判断为不为空还要判断密码长度是否大于6位
  24.                     if (inputValue.length < arg[inputName].minLength) {
  25.                         errMsg = labelName + "必须大于" + arg[inputName].minLength + "位";
  26.                         $(this).next().text(errMsg);
  27.                         flag = false;
  28.                         return false;
  29.                     }
  30.                 }
  31.                 // 如果是手机类型，我们需要判断手机的格式是否正确
  32.                 if (inputName === "mobile") {
  33.                     // 使用正则表达式校验inputValue是否为正确的手机号码
  34.                     if (!/^1[345678]\d{9}$/.test(inputValue)) {
  35.                         // 不是有效的手机号码格式
  36.                         errMsg = labelName + "格式不正确";
  37.                         $(this).next().text(errMsg);
  38.                         flag = false;
  39.                         return false;
  40.                     }
  41.                 }
  42.             }
  43.         });
  44.         return flag;
  45.     }
  46.  
  47.     function clearError(arg) {
  48.         // 清空之前的错误提示
  49.         $(arg).next().text("");
  50.     }
  51.  
  52.     // 上面都是我定义的工具函数
  53.     $.extend({
  54.         validate: function (arg) {
  55.             $("form :submit").on("click", function () {
  56.                 return check(arg);
  57.             });
  58.             $("form :input[type!='submit']").on("focus", function () {
  59.                 clearError(this);
  60.             });
  61.         }
  62.     });
  63. })(jQuery);

JS文件

前端基础之jQuery事件的更多相关文章

  1. 前端基础之:JQuery(可编辑版)

     前端基础之jquery   一 jQuery是什么? ［1］   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. ［2］   ...

  2. 进击的Python【第十六章】：Web前端基础之jQuery

    进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...

  3. 前端第四篇---前端基础之jQuery

    前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...

  4. 前端基础之JQuery - day15

    写在前面 上课第15天,打卡: 张国臂掖,以通西域: ########### # 课上简书 # ########## http://jquery.cuishifeng.cn/index.html JQ ...

  5. jQuery 基础(3) -- jQuery 事件

    jQuery 是为事件处理特别设计的.什么是事件?页面对不同访问者的响应叫做事件.事件处理程序指的是当 HTML 中发生某些事件时所调用的方法.实例:在元素上移动鼠标.选取单选按钮点击元素在事件中经常 ...

  6. Python学习（二十三）—— 前端基础之jQuery

    转载自http://www.cnblogs.com/liwenzhou/p/8178806.html 一.jQuery入门 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQue ...

  7. 前端基础 之 jQuery

    浏览目录 jQuery介绍 jQuery的优势 jQuery对象 jQuery内容 一.jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户 ...

  8. 四丶前端基础之jquery

    知识预览 一 jQuery是什么? 二 什么是jQuery对象? 三 寻找元素(选择器和筛选器) 四 操作元素(属性,css,文档处理) 扩展方法 (插件机制) 回到顶部 一 jQuery是什么? ［ ...

  9. 前端基础之jQuery

    JavaScript和jQuery的区别 JavaScript是一门编程语言,我们用它来编写客户端浏览器脚本 jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化java ...

随机推荐

  1. [Spring] 04 Denpendency Injection

    DI Dependency Injection 依赖注入:从程序代码中移除依赖关系的一种设计模式. 这样就可以更容易地管理和测试应用程序. DI使我们的程序编码 loosely coupled.松耦合 ...

  2. C语言流控制命令的总结

    C语言流控制命令的总结 基本概念: C语言中,自顶向下的的代码的流程叫做程序流. 能够改变程序流顺序的语句叫做流控制命令. 我为什么要写这篇文章 在学习C语言的过程中,经常会用到条件语句和循环语句这些 ...

  3. Maven报错Please ensure you are using JDK 1.4 or above and not a JRE解决方法!

    https://www.cnblogs.com/shihua513/p/6163682.html 在eclipse下用maven编译时,很有可能出现以下错误: Please ensure you ar ...

  4. slf4j/logback: logging日志的配置

    slf4j/logback: logging日志的配置 import依赖: import org.slf4j.Logger;import org.slf4j.LoggerFactory;private ...

  5. java ----> java.lang.NoClassDefFoundError

    环境: centos 6.10,vim,jdk1.8_u72,zookeeper-3.4.6,maven3+ 正文: 使用zk的api操作创建节点发生java.lang.NoClassDefFound ...

  6. English trip M1 - AC11 May I Help You? 我能帮到你吗？ Teacher:Lamb

    In this lesson you will learn to ask for things in shops  在本课程中,您将学习如何在商店中寻找东西 课上内容(Lesson) How are ...

  7. LeetCode--003--无重复字符的最长子串（java）

    给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 1: 输入: "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc&qu ...

  8. 通过ambari安装hadoop集群,ZT

    通过ambari安装hadoop集群,ZT http://www.cnblogs.com/cenyuhai/p/3295635.html http://www.cnblogs.com/cenyuhai ...

  9. 【模板/经典题型】树上第k大

    直接对树dfs一发,对每个节点建出主席树. 查询的时候主席树上二分,四个参数x+y-lca(x,y)-fa[lca(x,y)]. 如果要求支持动态加边的话,只需要一个启发式合并即可,每次暴力重构主席树 ...

  10. CentOS7 添加开机启动项

     centos6 加入开机启动:   vim /etc/rc.d/rc.local 注意命令不要出错,重启后生效   或者   centos 7 下: vim /lib/systemd/system/ ...