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使用插件

巴特西

jQuery知识梳理20190818

jQuery知识梳理20190818

1. 时间绑定和解绑

2. 区别mouseover与mouseenter

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

4 . 多库共存

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

6. 自定义插件

7. 使用插件

最新文章

热门文章

巴特西

jQuery知识梳理20190818

jQuery知识梳理20190818

1. 时间绑定和解绑

2. 区别mouseover与mouseenter

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

4 . 多库共存

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

6. 自定义插件

7. 使用插件

最新文章

热门文章

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