阳光依然明亮,未来依旧可期
前言
今天的知识点多多,大家认真学习并练习呦。
一、jQuery
事件注册
- 优点:操作简单,不用担心事件覆盖等问题。
- 缺点:普通的事件注册不能做事件委托,无法实现事件解绑,需要借助其他方法。
语法
element.事件(function() {})
$('div').click(function() { 事件处理程序 })
学过 javaScript
语言的,常用的事件基本一致,具体可以参考 W3C
演示代码
<body>
<div></div>
<script src="./jQuery.js"></script>
<script>
// 注册单击事件
$('div').click(function () {
console.log('单击事件')
})
</script>
</body>
二、jQuery
事件处理
2.1 事件处理 on() 绑定事件
语法
on()
方法优势一:可以绑定多个事件,多个处理事件处理程序。
<body>
<div></div>
<script src="./jQuery.js"></script>
<script>
// 注册单击事件
$('div').click(function () {
console.log('单击事件')
})
</script>
</body>
- 如果事件处理程序相同
<body>
<div class="box"></div>
<script src="./jQuery.js"></script>
<script>
// 事件处理程序相同
$('.box').on('mouseover mouseout', function () {
console.log(1)
})
</script>
</body>
-
on()
方法优势二-
可以事件委派操作,意思是把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。
<body> <div class="box"> <div class="child"></div> </div> <script src="./jQuery.js"></script> <script> // 事件委派 $('.box').on('click', '.child', function () { console.log(1) }) </script> </body>
-
-
on()
方法优势三-
动态创建的元素,
click()
没有办法绑定事件,on()
可以给动态生成的元素绑定事件。<body> <div class="box"> <div class="child"></div> </div> <script src="./jQuery.js"></script> <script> // 事件委派 $('.box').on('click', '.child', function () { console.log(1) }) </script> </body>
-
2.2 事件处理 off() 解绑事件
解绑事件意思是当某个事件上面的逻辑,在特定需求下不需要的时候,可以把该事件上的逻辑移除。
语法
-
off()
方法可以移除通过on()
方法添加的事件处理程序。<body> <ul> <li></li> </ul> <script src="./jQuery.js"></script> <script> // 解绑 ul 元素所有事件处理程序 $('ul').off() // 解绑 ul 元素上面的点击事件 $('ul').off('click') // 解绑事件委托 $('ul').off('click', 'li') </script> </body>
-
如果有的事件只想触发一次,可以使用
one()
来绑定事件。<body> <div class="box"> <div class="child"></div> </div> <script src="./jQuery.js"></script> <script> // one() 只能触发事件一次 $('.box').one('click', function () { console.log('只触发一次') }) </script> </body>
2.3 事件处理 trigger()
自动触发事件
jQuery
为我们提供了两个自动触发事件 trigger()
和 triggerHandler()
。
语法
-
trigger()
:会触发元素的默认行为// 简写形式 element.click() // 自动触发模式 element.trigger('type')
-
triggerHandler()
:不会触发元素的默认行为// 自动触发模式 element.triggerHandler(type)
代码示例
<body>
<div class="box">
<div class="child"></div>
</div>
<script src="./jQuery.js"></script>
<script>
// 元素.事件() 会触发元素的默认行为
$('.box').click()
// 元素.trigger('事件') 会触发元素的默认行为
$('.box').trigger('click')
// 元素.triggerHandler('事件') 不会触发元素的默认行为
$('.box').triggerHandler('click')
</script>
</body>
三、jQuery
事件对象
jQuery
对 DOM 中的事件对象 event 进行了封装,兼容性更好,获取更方便,使用变化不大。事件被触发,就会有事件对象的产生。
语法
element.on(events, [selector], function(event) {})
- 阻止默认行为:
event.preventDefault()
或者 return false。 - 阻止冒泡:
event.stopPropagation()
。
<body>
<div class="box"></div>
<script src="./jQuery.js"></script>
<script>
$(document).on('click', function () {
console.log('点击了 document')
})
$('.box').on('click', function (event) {
console.log('点击了 box')
// 阻止冒泡
event.stopPropagation()
// 阻止默认行为
event.preventDefault()
})
</script>
</body>
四、jQuery
拷贝对象
语法
$.extend([deep], target, object1, [objectN])
-
参数说明
-
deep
:如果设为 true 是深拷贝,默认为 false 是浅拷贝。 -
target
:要拷贝的目标对象。 -
object1
:待拷贝到第一个对象的对象。 -
objectN
:待拷贝到第 N 个对象的对象。 -
浅拷贝目标对象引用的被拷贝的对象地址,修改目标对象会影响被拷贝对象。
-
深拷贝,前面加 true,完全克隆,修改目标对象不会影响被拷贝对象。
-
代码示例
- 浅拷贝
<script>
// 浅拷贝
var targetObj = {
id: 0,
text: {
name: 'nb'
}
}
var obj = {
id: 1,
text: {
name: 'op'
}
}
// 浅拷贝
$.extend(targetObj, obj)
// 修改 targetObj 对象的属性值
targetObj.text.name = '666'
// 控制台输出
console.log(targetObj, obj)
</script>
- 浅拷贝效果如下,可见属性值都改变了
-
深拷贝
<script> // 深拷贝 var targetObj = { id: 0, text: { name: 'nb' } } var obj = { id: 1, text: { name: 'op' } } // 深拷贝 $.extend(true, targetObj, obj) // 修改 targetObj 对象的属性值 targetObj.text.name = '666' // 控制台输出 console.log(targetObj, obj) </script>
-
深拷贝效果如下,可见只是 targetObj 对象的属性值变了。
jQuery
的知识总结就到这里了,感谢一直支持我的小伙伴,后续我们再一起学习javaScript
语言,感受一下 原生 js 语言的魅力。 😏