jQuery知识梳理20190818

程序员文章站 2022-11-24 08:15:15

jQuery知识梳理20190818 [TOC] 1. 时间绑定和解绑 2. 区别mouseover与mouseenter 3. 时间委托（委派/代理） 4 . 多库共存如果有2个库都有$, 就存在冲突。 jQuery库可以释放$的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQ ......

jquery知识梳理20190818

jquery知识梳理20190818

1. 时间绑定和解绑

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>18_事件绑定与解绑</title>
</head>
<style type="text/css">
  * {
    margin: 0px;
  }
  .out {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 10px;
    background: blue;
  }
  .inner {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50px;
    background: red;
  }
  .divbtn {
    position: absolute;
    top: 250px;
  }
</style>
<body style="height: 2000px;">
<div class="out">
  外部div
  <div class="inner">内部div</div>
</div>
<div class='divbtn'>
  <button id="btn1">取消绑定所有事件</button>
  <button id="btn2">取消绑定mouseover事件</button>
  <button id="btn3">测试事件坐标</button>
  <a href="http://www.baidu.com" id="test4">百度一下</a>
</div>

<!--
1. 事件绑定(2种)：
  * eventname(function(){})
    绑定对应事件名的监听, 例如：$('#div').click(function(){});
  * on(eventname, funcion(){})
    通用的绑定事件监听, 例如：$('#div').on('click', function(){})
  * 优缺点:
    eventname: 编码方便, 但只能加一个监听, 且有的事件监听不支持
    on: 编码不方便, 可以添加多个监听, 且更通用
2. 事件解绑：
  * off(eventname)
3. 事件的坐标
  * event.clientx, event.clienty  相对于视口的左上角
  * event.pagex, event.pagey  相对于页面的左上角
  * event.offsetx, event.offsety 相对于事件元素左上角
4. 事件相关处理
  * 停止事件冒泡 : event.stoppropagation()
  * 阻止事件默认行为 : event.preventdefault()
-->
<script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  $(function () {
    // 1.给class为out的div的点击事件绑定监听函数，打印'out clicked'(用两种方法绑定)
    /*$('.out').click(function () {
      console.log('out click1')
    })*/
    $('.out').on('click', function () {
      console.log('out clicked2')
    })

    //2.给class为inner的div的鼠标移入和鼠标移出事件绑定监听函数
    /*$('.inner')
      .mouseenter(function () {
        console.log('进入...')
      })
      .mouseleave(function () {
        console.log('离开...')
      })*/
    $('.inner')
      .on('mouseenter', function () {
        console.log('进入...')
      })
      .on('mouseleave', function () {
        console.log('离开...')
      })
    /*$('.inner').hover(function () {
      console.log('进入...')
    }, function () {
      console.log('离开...')
    })*/

    //3. 点击btn1解除inner上的所有事件监听
    $('#btn1').click(function () {
      $('.inner').off()
    })

    //4.点击btn2解除inner上的mouseover事件
    $('#btn2').click(function () {
      $('.inner').off('mouseover')
    })

    //5. 点击btn3得到事件坐标
    $('#btn3').click(function (event) { // event时间对象
      console.log(event.offsetx, event.offsety) // 原点为时间元素的左上角
      console.log(event.clientx, event.clienty) // 原点为窗口的左上角
      console.log(event.pagex, event.pagey) // 原点为页面的左上角
    })

    //6. 点击.inner区域, 外部点击监听不响应
    $('.inner').click(function (event) {
      console.log('click inner')
      // 停止事件冒泡
      event.stoppropagation()
    })

    //7. 点击链接, 如果当前时间是偶数不跳转
    $('#test4').click(function () {
      var time = date.now(event)
      alert(time)
      if(time%2===0) {
        // 阻止事件默认行为
        event.preventdefault()
      }
    })
  })
</script>
</body>
</html>

2. 区别mouseover与mouseenter

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>19_事件切换</title>
</head>
<style type="text/css">
    * {
        margin: 0px;
    }
    .div1 {
        position: absolute;
        width: 200px;
        height: 200px;
        top: 50px;
        left: 10px;
        background: olive;
    }
    .div2 {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 50px;
        background: red;
    }
    .div3 {
        position: absolute;
        width: 200px;
        height: 200px;
        top: 50px;
        left: 230px;
        background: olive;
    }
    .div4 {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 50px;
        background: yellow;
    }
    .divtext{
        position: absolute;
        top: 330px;
        left: 10px;
    }
</style>
<body>
<div class="divtext">
    区分鼠标的事件
</div>
<div class="div1">
    div1.....
    <div class="div2">div2....</div>
</div>
<div class="div3">
    div3.....
    <div class="div4">div4....</div>
</div>
<!--
区别mouseover与mouseenter?
* mouseover: 在移入子元素时也会触发, 对应mouseout
* mouseenter: 只在移入当前元素时才触发, 对应mouseleave
hover()使用的就是mouseenter()和mouseleave()
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $('.div1').mouseover(function () {
        console.log('移入div1或其子元素')
    }).mouseout(function () {
        console.log('移出div1或其子元素')
    })

    $('.div3').mouseenter(function () {
        console.log('移入div3元素')
    }).mouseleave(function () {
        console.log('移出div3元素')
    })

    $('.div3').hover(function () {
        console.log('移入div33元素')
        this.style.background = 'red'
    }, function () {
        console.log('移出div33元素')
        this.style.background = 'blue'
    })
</script>
</body>
</html>

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

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>20_事件委托2</title>
</head>
<body>
<ul>
  <li>1111</li>
  <li>2222</li>
  <li>3333</li>
  <li>4444</li>
</ul>
<li>22222</li><br>
<button id="btn1">添加新的li</button>
<button id="btn2">删除ul上的事件委托的监听器</button>

<!--
1. 事件委托（委派/代理）:
  * 将多个子元素(li)的事件监听委托给父辈元素(ul)处理
  * 监听回调是加在了父辈元素上
  * 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
  * 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
2. 事件委托的2方:
  * 委托方: 业主  li
  * 被委托方: 中介  ul
3. 使用事件委托的好处
  * 添加新的子元素, 自动有事件响应处理
  * 减少事件监听的数量: n==>1
4. jquery的事件委托api
  * 设置事件委托: $(parentselector).delegate(childrenselector, eventname, callback)
  * 移除事件委托: $(parentselector).undelegate(eventname)
-->
<script src="js/jquery-1.10.1.js"></script>
<script>
  $(function () {
    //事件委托
    $('ul').delegate('li', 'click', function () {
            console.log(this) // 点击发生事件的li
      this.style.background = 'red'
    })

    $('#btn1').click(function () {
      $('ul').append('<li>xxxxxxxxx</li>')
    })

    $('#btn2').click(function () {
      // 移除事件委托
      $('ul').undelegate()
    })
  })
</script>
</body>
</html>

4 . 多库共存

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

 jquery.noconflict()

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

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

6. 自定义插件

扩展jquery的工具方法：$.extend(obj)

jquery.extend({
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
});

扩展jquery对象的方法：$.fn.extend(object)

jquery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});

自定义文件：my_jquery_plugin.js

/*
 扩展jquery的工具方法 : $.extend(object)
   min(a, b) : 返回较小的值
   max(c, d) : 返回较大的值
   lefttrim() : 去掉字符串左边的空格
   righttrim() : 去掉字符串右边的空格
 */

//正则
/*
 ^   匹配字符串开始
 \s  匹配空格
 +   匹配一次或者多次
 $   匹配字符串的末尾
 */
//扩展$ 
$.extend({
  min: function (a, b) {
    return (a < b) ? a : b
  },
  max: function (a, b) {
    return (a > b) ? a : b
  },
  lefttrim: function (strtobetrimed) {
    return strtobetrimed.replace(/^\s+/, '')
  },
  righttrim: function (strtobetrimed) {
    return strtobetrimed.replace(/\s+$/, '')
  }
})

//扩展 $('#id').xxxxx
//$.fn.extend(object)
// checkall() : 全选
// uncheckall() : 全不选
// reversecheck() : 全反选
$.fn.extend({
  checkall: function () {
    // console.log('checkall')
    this.prop('checked', true)
  },
  uncheckall: function () {
    this.prop('checked', false)
  },
  reversecheck: function () {
    this.each(function () {
      this.checked = !this.checked
    })
  }
})

使用自定义插件

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>25_扩展插件</title>
  <style type="text/css">
    * {
      margin: 0px;
    }
    .div1 {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 50px;
      left: 10px;
      background: red;
    }
  </style>
</head>
<body>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br/>
<input type="button" id="checkedallbtn" value="全　选"/>
<input type="button" id="checkednobtn" value="全不选"/>
<input type="button" id="reversecheckedbtn" value="反选"/>
<!--
1. 扩展jquery的工具方法
  $.extend(object)
2. 扩展jquery对象的方法
  $.fn.extend(object)
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script src="js/my_jquery_plugin.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
   需求：
   1. 给 $ 添加4个工具方法:
     * min(a, b) : 返回较小的值
     * max(c, d) : 返回较大的值
     * lefttrim() : 去掉字符串左边的空格
     * righttrim() : 去掉字符串右边的空格
   2. 给jquery对象 添加3个功能方法:
     * checkall() : 全选
     * uncheckall() : 全不选
     * reversecheck() : 全反选
   */
  // 得到最大最小值
  var a = 1
  var b = 2
  var result_min = $.min(a, b)
  var result_max = $.max(a, b)
  console.log(result_min)
  console.log(result_max)

  // 左trim 右trim
  var str = '   悟空    '
  console.log('|' + str + '|')
  var resultstrleft = $.lefttrim(str)
  console.log('|' + resultstrleft + '|')
  var resultstrright = $.righttrim(str)
  console.log('|' + resultstrright + '|')

  //全选
  $('#checkedallbtn').click(function () {
    $(':checkbox').checkall()
  })
  //全不选
  $('#checkednobtn').click(function () {
    $(':checkbox').uncheckall()
  })
  //反选
  $('#reversecheckedbtn').click(function () {
    $(':checkbox').reversecheck()
  })
</script>
</body>
</html>

7. 使用插件

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

上一篇： C#使用DropDownList绑定添加新数据的方法汇总

下一篇：详解JavaScript的AngularJS框架中的作用域与数据绑定

jQuery知识梳理20190818

jquery知识梳理20190818

1. 时间绑定和解绑

2. 区别mouseover与mouseenter

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

4 . 多库共存

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

6. 自定义插件

7. 使用插件

jquery编程开发常用知识学习总结（超级详细）

关于MongoDB 固定集合（capped collection）的知识梳理

jQuery中Form相关知识汇总

Java String类相关知识梳理（含字符串常量池（String Pool）知识）

MySQL 基础知识梳理学习（七）----sync_binlog

JavaScript开发中jQuery常用知识点整理

操作系统知识点梳理

Oracle知识梳理（三）操作篇：SQL基础操作汇总

Java知识点梳理——读写分离

前端笔记知识点整合之jQuery（一）加载函数的区别&对象&操作HTML/CSS&动画&选择器

jQuery知识梳理20190818

jquery知识梳理20190818

1. 时间绑定和解绑

2. 区别mouseover与mouseenter

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

4 . 多库共存

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

6. 自定义插件

7. 使用插件

jquery编程开发常用知识学习总结（超级详细）

关于MongoDB 固定集合（capped collection）的知识梳理

jQuery中Form相关知识汇总

Java String类相关知识梳理（含字符串常量池（String Pool）知识）

MySQL 基础知识梳理学习（七）----sync_binlog

JavaScript开发中jQuery常用知识点整理

操作系统知识点梳理

Oracle知识梳理（三）操作篇：SQL基础操作汇总

Java知识点梳理——读写分离

前端笔记知识点整合之jQuery（一）加载函数的区别&对象&操作HTML/CSS&动画&选择器

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