jQuery 事件
事件注册
- 单个事件注册
语法: $('div').click(function () { 处理的事情 })
$('div').click(function () { $(this).css('backgroundColor', 'red') }); $('div').mouseenter(function () { $(this).css('backgroundColor', 'black') })
事件处理
on 绑定事件
因为普通注册事件方法的不足,jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等,其中最好用的是: on()
- 可以绑定1个或者多个事件
$('div').on({ click: function () { pass}, mouseenter: function () { pass } })
- 如果处理的事件是相同的
$('div').on("mouseenter mouseleave", function () { $(this).toggleClass('current') })
- on 实现事件委托(委派)
$('ul').on('click', 'li', function () { alert('111') })
- on 可以动态给未来创建的元素添加事件
$('ol').on('click', 'li', function () { alert(222) }) var li = $('<li>lo的li</li>') $('ol').prepend(li)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: pink; } .current { background-color: purple; } </style> <script src="jquery.min.js"></script> </head> <body> <div></div> <ul> <li>我们都是好孩子</li> <li>我们都是好孩子</li> <li>我们都是好孩子</li> <li>我们都是好孩子</li> <li>我们都是好孩子</li> </ul> <ol> </ol> <script> $(function () { // 1. 单个事件 $('div').click(function () { $(this).css('backgroundColor', 'red') }); $('div').mouseenter(function () { $(this).css('backgroundColor', 'black') }) $('div').on({ click: function () { pass }, mouseenter: function () { pass } }) // 2. 事件处理, 可以绑定1个或者多个 $('div').on({ click: function () { $(this).css('backgroundColor', 'red') }, mouseenter: function () { $(this).css('backgroundColor', 'blue') }, mouseleave: function () { $(this).css('width', '300px') } }) // 2.1 如果处理程序相同 $('div').on("mouseenter mouseleave", function () { $(this).toggleClass('current') }) // 2.2 on可以实现事件委托(委派) $('ul').on('click', 'li', function () { alert('111') }) // 2.3 on 可以给为来动态创建的的元素绑定事件 $('ol').on('click', 'li', function () { alert(222) }) var li = $('<li>lo的li</li>') $('ol').prepend(li) }) </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } ul { list-style: none } .box { width: 600px; margin: 100px auto; border: 1px solid #000; padding: 20px; } textarea { width: 450px; height: 160px; outline: none; resize: none; } ul { width: 450px; padding-left: 80px; } ul li { line-height: 25px; border-bottom: 1px dashed #cccccc; display: none; } input { float: right; } ul li a { float: right; } </style> <script src="jquery.min.js"></script> <script> $(function () { $('.btn').on('click', function () { var li = $('<li></li>') li.html($('.txt').val() + "<a href='javascript:;'> 删除</a>") $("ul").prepend(li); li.slideDown(); // 下滑 $('.txt').val('') }) $('ul').on('click', 'a', function () { $(this).parent().slideUp(function () { // 上滑 $(this).remove(); }); }) }) </script> </head> <body> <div class="box" id="weibo"> <span>微博发布</span> <textarea name="" class="txt" cols="30" rows="10"></textarea> <button class="btn">发布</button> <ul> </ul> </div> </body> </html>
off 事件解除
- 全部解除
$('div').off()
- 解除某一项事件
$('div').off('click')
- 解除事件委托
$('ul').off('click', 'li')
- 只运行一次事件
$('p').one('click', function () {
console.log('one');
})
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: pink; } </style> <script src="jquery.min.js"></script> <script> $(function () { $('div').on({ click: function () { console.log('click'); }, mouseover: function () { console.log('mouseover'); } }) $('ul').on('click', 'li', function () { console.log('li'); }) // 1. off div身上的全部程序解绑 $('div').off() // 1.1 off 解除某一项事件 $('div').off('click') // 1.3 off 解除事件委托 $('ul').off('click', 'li') // 2. one() 但是它只能触发事件一次 $('p').one('click', function () { console.log('one'); }) }) </script> </head> <body> <div></div> <ul> <li>我们都是好孩子</li> <li>我们都是好孩子</li> <li>我们都是好孩子</li> </ul> <p>我是屁</p> </body> </html>
自动触发事件
jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ;
- 元素.事件()
$('div').click()
- 元素.trigger("事件")
$('div').trigger('click')
- 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("input").triggerHandler("focus");
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: pink; } </style> <script src="jquery.min.js"></script> <script> $(function () { $('div').on('click', function () { alert(111) }) // 自动触发事件 // 1. 元素.事件() $('div').click() // 2. 元素.trigger("事件") // $('div').trigger('click') // $('input').trigger('focus') // 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为 // $('div').triggerHandler('click') // $("input").on("focus", function () { // $(this).val("你好吗"); // }); $("input").triggerHandler("focus"); }) </script> </head> <body> <div></div> <input type="text"> </body> </html>
事件对象
语法:
e 就是事件对象
$('div').on('click', function (e) {
pass
)}
- e.stopPropagation() // 阻止事件冒泡
- e.preventDefault() // 阻止默认行为
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: pink; } </style> <script src="jquery.min.js"></script> <script> $(function () { $(document).on('click', function () { console.log('点击了document'); }) $('div').on('click', function (e) { console.log('点击了DIV'); // console.log(e); e.stopPropagation() // 阻止事件冒泡 e.preventDefault() // 阻止默认行为 }) }) </script> </head> <body> <div></div> </body> </html>
对象拷贝
$.extend([deep], target, obj1, [objN])
- deep: true为深拷贝, false为浅拷贝
- target: 要拷贝的目标对象
- obj1: 待拷贝的第一个对象的对象
- objN:待拷贝的第N对象的对象
- 浅拷贝:拷贝的是内存引用,修改目标对象会影响被拷贝对象
- 深拷贝:是完全克隆,不会影响被拷贝对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="jquery.min.js"></script> <script> $(function () { // 1 // var targetObj = {}; // var obj = { // id: 1, // name: "andy" // }; // $.extend(targetObj, obj); // console.log(targetObj); // 2 // var targetObj = { // id: 0 // }; // var obj = { // id: 1, // name: "andy" // }; // $.extend(targetObj, obj); // // 会覆盖targetObj 里面原来的数据 // console.log(targetObj); // 3 var targetObj = { id: 0, msg: { sex: '男' } }; var obj = { id: 1, name: "andy", msg: { age: 18 } }; // 浅拷贝 $.extend(targetObj, obj); console.log(targetObj); // 会覆盖targetObj 里面原来的数据, 包括 msg 里面的数据 msg: {age: 20} targetObj.msg.age = 20; // 浅拷贝添加 msg.age = 20 console.log(targetObj); // msg: {age: 20} console.log(obj); // 被拷贝对象也会改变 msg: {age: 20} // 深拷贝 $.extend(true, targetObj, obj); console.log(targetObj); // 完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起 targetObj.msg.age = 20; console.log(targetObj); // msg :{sex: "男", age: 20} console.log(obj); // {age: 18} 被拷贝对象不变 }) </script> </head> <body> </body> </html>
插件
懒加载
懒加载只需引入html 和 js操作 即可,此插件不涉及css。
- 引入js
<script src="js/EasyLazyload.min.js"></script> <script> lazyLoadInit({ showTime: 1100, onLoadBackEnd: function(i, e) { console.log("onLoadBackEnd:" + i); }, onLoadBackStart: function(i, e) { console.log("onLoadBackStart:" + i); } }); </script>
- 引入html
<img data-lazy-src="upload/floor-1-3.png" alt="">
相关资料: https://github.com/1515806183/html-code/tree/master/jQuery-03