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

目录

jQuery知识梳理20190818

1. 时间绑定和解绑

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>18_事件绑定与解绑</title>
  6. </head>
  7. <style type="text/css">
  8.   * {
  9.     margin: 0px;
  10.   }
  11.   .out {
  12.     position: absolute;
  13.     width: 200px;
  14.     height: 200px;
  15.     top: 20px;
  16.     left: 10px;
  17.     background: blue;
  18.   }
  19.   .inner {
  20.     position: absolute;
  21.     width: 100px;
  22.     height: 100px;
  23.     top: 50px;
  24.     background: red;
  25.   }
  26.   .divBtn {
  27.     position: absolute;
  28.     top: 250px;
  29.   }
  30. </style>
  31. <body style="height: 2000px;">
  32. <div class="out">
  33.   外部DIV
  34.   <div class="inner">内部div</div>
  35. </div>
  36. <div class='divBtn'>
  37.   <button id="btn1">取消绑定所有事件</button>
  38.   <button id="btn2">取消绑定mouseover事件</button>
  39.   <button id="btn3">测试事件坐标</button>
  40.   <a href="http://www.baidu.com" id="test4">百度一下</a>
  41. </div>
  43. <!--
  44. 1. 事件绑定(2种)：
  45.   * eventName(function(){})
  46.     绑定对应事件名的监听, 例如：$('#div').click(function(){});
  47.   * on(eventName, funcion(){})
  48.     通用的绑定事件监听, 例如：$('#div').on('click', function(){})
  49.   * 优缺点:
  50.     eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持
  51.     on: 编码不方便, 可以添加多个监听, 且更通用
  52. 2. 事件解绑：
  53.   * off(eventName)
  54. 3. 事件的坐标
  55.   * event.clientX, event.clientY  相对于视口的左上角
  56.   * event.pageX, event.pageY  相对于页面的左上角
  57.   * event.offsetX, event.offsetY 相对于事件元素左上角
  58. 4. 事件相关处理
  59.   * 停止事件冒泡 : event.stopPropagation()
  60.   * 阻止事件默认行为 : event.preventDefault()
  61. -->
  62. <script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
  63. <script type="text/javascript">
  64.   $(function () {
  65.     // 1.给class为out的div的点击事件绑定监听函数，打印'out clicked'(用两种方法绑定)
  66.     /*$('.out').click(function () {
  67.       console.log('out click1')
  68.     })*/
  69.     $('.out').on('click', function () {
  70.       console.log('out clicked2')
  71.     })
  73.     //2.给class为inner的div的鼠标移入和鼠标移出事件绑定监听函数
  74.     /*$('.inner')
  75.       .mouseenter(function () {
  76.         console.log('进入...')
  77.       })
  78.       .mouseleave(function () {
  79.         console.log('离开...')
  80.       })*/
  81.     $('.inner')
  82.       .on('mouseenter', function () {
  83.         console.log('进入...')
  84.       })
  85.       .on('mouseleave', function () {
  86.         console.log('离开...')
  87.       })
  88.     /*$('.inner').hover(function () {
  89.       console.log('进入...')
  90.     }, function () {
  91.       console.log('离开...')
  92.     })*/
  94.     //3. 点击btn1解除inner上的所有事件监听
  95.     $('#btn1').click(function () {
  96.       $('.inner').off()
  97.     })
  99.     //4.点击btn2解除inner上的mouseover事件
  100.     $('#btn2').click(function () {
  101.       $('.inner').off('mouseover')
  102.     })
  104.     //5. 点击btn3得到事件坐标
  105.     $('#btn3').click(function (event) { // event时间对象
  106.       console.log(event.offsetX, event.offsetY) // 原点为时间元素的左上角
  107.       console.log(event.clientX, event.clientY) // 原点为窗口的左上角
  108.       console.log(event.pageX, event.pageY) // 原点为页面的左上角
  109.     })
  111.     //6. 点击.inner区域, 外部点击监听不响应
  112.     $('.inner').click(function (event) {
  113.       console.log('click inner')
  114.       // 停止事件冒泡
  115.       event.stopPropagation()
  116.     })
  118.     //7. 点击链接, 如果当前时间是偶数不跳转
  119.     $('#test4').click(function () {
  120.       var time = Date.now(event)
  121.       alert(time)
  122.       if(time%2===0) {
  123.         // 阻止事件默认行为
  124.         event.preventDefault()
  125.       }
  126.     })
  127.   })
  128. </script>
  129. </body>
  130. </html>

2. 区别mouseover与mouseenter

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>19_事件切换</title>
  6. </head>
  7. <style type="text/css">
  8.     * {
  9.         margin: 0px;
  10.     }
  11.     .div1 {
  12.         position: absolute;
  13.         width: 200px;
  14.         height: 200px;
  15.         top: 50px;
  16.         left: 10px;
  17.         background: olive;
  18.     }
  19.     .div2 {
  20.         position: absolute;
  21.         width: 100px;
  22.         height: 100px;
  23.         top: 50px;
  24.         background: red;
  25.     }
  26.     .div3 {
  27.         position: absolute;
  28.         width: 200px;
  29.         height: 200px;
  30.         top: 50px;
  31.         left: 230px;
  32.         background: olive;
  33.     }
  34.     .div4 {
  35.         position: absolute;
  36.         width: 100px;
  37.         height: 100px;
  38.         top: 50px;
  39.         background: yellow;
  40.     }
  41.     .divText{
  42.         position: absolute;
  43.         top: 330px;
  44.         left: 10px;
  45.     }
  46. </style>
  47. <body>
  48. <div class="divText">
  49.     区分鼠标的事件
  50. </div>
  51. <div class="div1">
  52.     div1.....
  53.     <div class="div2">div2....</div>
  54. </div>
  55. <div class="div3">
  56.     div3.....
  57.     <div class="div4">div4....</div>
  58. </div>
  59. <!--
  60. 区别mouseover与mouseenter?
  61. * mouseover: 在移入子元素时也会触发, 对应mouseout
  62. * mouseenter: 只在移入当前元素时才触发, 对应mouseleave
  63. hover()使用的就是mouseenter()和mouseleave()
  64. -->
  65. <script src="js/jquery-1.10.1.js" type="text/javascript"></script>
  66. <script type="text/javascript">
  67.     $('.div1').mouseover(function () {
  68.         console.log('移入div1或其子元素')
  69.     }).mouseout(function () {
  70.         console.log('移出div1或其子元素')
  71.     })
  73.     $('.div3').mouseenter(function () {
  74.         console.log('移入div3元素')
  75.     }).mouseleave(function () {
  76.         console.log('移出div3元素')
  77.     })
  79.     $('.div3').hover(function () {
  80.         console.log('移入div33元素')
  81.         this.style.background = 'red'
  82.     }, function () {
  83.         console.log('移出div33元素')
  84.         this.style.background = 'blue'
  85.     })
  86. </script>
  87. </body>
  88. </html>

3. 时间委托（委派/代理）

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>20_事件委托2</title>
  6. </head>
  7. <body>
  8. <ul>
  9.   <li>1111</li>
  10.   <li>2222</li>
  11.   <li>3333</li>
  12.   <li>4444</li>
  13. </ul>
  14. <li>22222</li><br>
  15. <button id="btn1">添加新的li</button>
  16. <button id="btn2">删除ul上的事件委托的监听器</button>
  18. <!--
  19. 1. 事件委托（委派/代理）:
  20.   * 将多个子元素(li)的事件监听委托给父辈元素(ul)处理
  21.   * 监听回调是加在了父辈元素上
  22.   * 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
  23.   * 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
  24. 2. 事件委托的2方:
  25.   * 委托方: 业主  li
  26.   * 被委托方: 中介  ul
  27. 3. 使用事件委托的好处
  28.   * 添加新的子元素, 自动有事件响应处理
  29.   * 减少事件监听的数量: n==>1
  30. 4. jQuery的事件委托API
  31.   * 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)
  32.   * 移除事件委托: $(parentSelector).undelegate(eventName)
  33. -->
  34. <script src="js/jquery-1.10.1.js"></script>
  35. <script>
  36.   $(function () {
  37.     //事件委托
  38.     $('ul').delegate('li', 'click', function () {
  39.             console.log(this) // 点击发生事件的li
  40.       this.style.background = 'red'
  41.     })
  43.     $('#btn1').click(function () {
  44.       $('ul').append('<li>xxxxxxxxx</li>')
  45.     })
  47.     $('#btn2').click(function () {
  48.       // 移除事件委托
  49.       $('ul').undelegate()
  50.     })
  51.   })
  52. </script>
  53. </body>
  54. </html>

4 . 多库共存

如果有2个库都有$, 就存在冲突。 jQuery库可以释放$的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQuery了。

  1.  jQuery.noConflict()

5.window.onload与$(document).ready()的区别

  • window.onload：包括页面的图片加载完后才会回调(晚)， 只能有一个监听回调。
  • $(document).ready()：等同于: $(function(){})， 页面加载完就回调(早)，可以有多个监听回调。

6. 自定义插件

  • 扩展jQuery的工具方法：$.extend(obj)
  1. jQuery.extend({
  2.   min: function(a, b) { return a < b ? a : b; },
  3.   max: function(a, b) { return a > b ? a : b; }
  4. });
  • 扩展jQuery对象的方法：$.fn.extend(object)
  1. jQuery.fn.extend({
  2.   check: function() {
  3.     return this.each(function() { this.checked = true; });
  4.   },
  5.   uncheck: function() {
  6.     return this.each(function() { this.checked = false; });
  7.   }
  8. });
  • 自定义文件：my_jQuery_plugin.js
  1. /*
  2.  扩展jQuery的工具方法 : $.extend(object)
  3.    min(a, b) : 返回较小的值
  4.    max(c, d) : 返回较大的值
  5.    leftTrim() : 去掉字符串左边的空格
  6.    rightTrim() : 去掉字符串右边的空格
  7.  */
  9. //正则
  10. /*
  11.  ^   匹配字符串开始
  12.  \s  匹配空格
  13.  +   匹配一次或者多次
  14.  $   匹配字符串的末尾
  15.  */
  16. //扩展$ 
  17. $.extend({
  18.   min: function (a, b) {
  19.     return (a < b) ? a : b
  20.   },
  21.   max: function (a, b) {
  22.     return (a > b) ? a : b
  23.   },
  24.   leftTrim: function (strToBeTrimed) {
  25.     return strToBeTrimed.replace(/^\s+/, '')
  26.   },
  27.   rightTrim: function (strToBeTrimed) {
  28.     return strToBeTrimed.replace(/\s+$/, '')
  29.   }
  30. })
  32. //扩展 $('#id').XXXXX
  33. //$.fn.extend(object)
  34. // checkAll() : 全选
  35. // unCheckAll() : 全不选
  36. // reverseCheck() : 全反选
  37. $.fn.extend({
  38.   checkAll: function () {
  39.     // console.log('checkAll')
  40.     this.prop('checked', true)
  41.   },
  42.   unCheckAll: function () {
  43.     this.prop('checked', false)
  44.   },
  45.   reverseCheck: function () {
  46.     this.each(function () {
  47.       this.checked = !this.checked
  48.     })
  49.   }
  50. })
  • 使用自定义插件
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>25_扩展插件</title>
  6.   <style type="text/css">
  7.     * {
  8.       margin: 0px;
  9.     }
  10.     .div1 {
  11.       position: absolute;
  12.       width: 100px;
  13.       height: 100px;
  14.       top: 50px;
  15.       left: 10px;
  16.       background: red;
  17.     }
  18.   </style>
  19. </head>
  20. <body>
  21. <input type="checkbox" name="items" value="足球"/>足球
  22. <input type="checkbox" name="items" value="篮球"/>篮球
  23. <input type="checkbox" name="items" value="羽毛球"/>羽毛球
  24. <input type="checkbox" name="items" value="乒乓球"/>乒乓球
  25. <br/>
  26. <input type="button" id="checkedAllBtn" value="全　选"/>
  27. <input type="button" id="checkedNoBtn" value="全不选"/>
  28. <input type="button" id="reverseCheckedBtn" value="反选"/>
  29. <!--
  30. 1. 扩展jQuery的工具方法
  31.   $.extend(object)
  32. 2. 扩展jQuery对象的方法
  33.   $.fn.extend(object)
  34. -->
  35. <script src="js/jquery-1.10.1.js" type="text/javascript"></script>
  36. <script src="js/my_jQuery_plugin.js" type="text/javascript"></script>
  37. <script type="text/javascript">
  38.   /*
  39.    需求：
  40.    1. 给 $ 添加4个工具方法:
  41.      * min(a, b) : 返回较小的值
  42.      * max(c, d) : 返回较大的值
  43.      * leftTrim() : 去掉字符串左边的空格
  44.      * rightTrim() : 去掉字符串右边的空格
  45.    2. 给jQuery对象 添加3个功能方法:
  46.      * checkAll() : 全选
  47.      * unCheckAll() : 全不选
  48.      * reverseCheck() : 全反选
  49.    */
  50.   // 得到最大最小值
  51.   var a = 1
  52.   var b = 2
  53.   var result_min = $.min(a, b)
  54.   var result_max = $.max(a, b)
  55.   console.log(result_min)
  56.   console.log(result_max)
  58.   // 左trim 右trim
  59.   var str = '   悟空    '
  60.   console.log('|' + str + '|')
  61.   var resultStrLeft = $.leftTrim(str)
  62.   console.log('|' + resultStrLeft + '|')
  63.   var resultStrRight = $.rightTrim(str)
  64.   console.log('|' + resultStrRight + '|')
  66.   //全选
  67.   $('#checkedAllBtn').click(function () {
  68.     $(':checkbox').checkAll()
  69.   })
  70.   //全不选
  71.   $('#checkedNoBtn').click(function () {
  72.     $(':checkbox').unCheckAll()
  73.   })
  74.   //反选
  75.   $('#reverseCheckedBtn').click(function () {
  76.     $(':checkbox').reverseCheck()
  77.   })
  78. </script>
  79. </body>
  80. </html>

7. 使用插件

  • 插件是基于jQuery编写的扩展库。jQuery官网上有很多插件：http://plugins.jquery.com/。
  • 常见插件：
    • 表单校验插件：jquery-validation
    • jquery UI
    • 日期插件：laydate
  • 根据文档和demo使用插件

原文链接：http://www.cnblogs.com/itzhouq/p/jQuery2.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号