一、隔断事件
1、隔断后续事件:
①专门用于隔断默认的后续事件的执行:
jQ_obj.on('click', function (e) {
/*执行代码*/
e.preventDefault()
})
②可以隔断所有后续事件的执行:
jQ_obj.on('click', function () {
/*执行代码*/
return false
})
2、隔断重叠事件:
①专门用于隔断重叠事件的执行:
dad_jQ_obj.on('click', function () {
/*执行代码*/
})
jQ_obj.on('click', function (e) {
/*执行代码*/
e.stopPropagation()
})
②可以隔断所有后续事件的执行:
dad_jQ_obj.on('click', function () {
/*执行代码*/
})
jQ_obj.on('click', function () {
/*执行代码*/
return false
})
二、委托事件:HTML文件中的JS代码绑定的事件无法作用于页面动态产生的标签,若想给这些动态标签绑定事件,可以预先给一个区域事先绑定事件委托关系,声明好该区域内某些特定的标签,然后这些标签无论是原本静态存在的还是后续页面中动态产生的,都会通过委托事件的机制绑定上事件的响应效果。
1、语法书写:
jQ_obj.on('click', 'button', function () {
/*执行代码*/
})
三、页面预加载:声明的JS代码会在页面加载完毕再执行。
1、通过窗口对象声明:
window.onload = function () {
/*执行代码*/
}
2、通过DOM声明:
$(document).ready(function () {
/*执行代码*/
})
3、通过jQuery语法声明:
$(function () {
/*执行代码*/
})
4、直接在body的末端书写,或者在末端书写引用语句。
四、动画效果
1、jQ_obj.show(5000):渐大渐显。
2、jQ_obj.hide(5000):渐小渐隐,上条的反向效果。
3、jQ_obj.slideDown(5000):放卷。
4、jQ_obj.slideUp(5000):收卷,上条的反向效果。
5、jQ_obj.fadeOut(5000):渐显。
6、jQ_obj.fadeIn(5000):渐隐,上条的反向效果。
7、jQ_obj.fadeTo(5000, 0.4):渐隐或渐显至指定透明度。
五、each方法:
1、用途:通过each方法可以将jQ_obj的每个元素的索引及标签对象遍历出来放入函数体代码中执行。
2、两种表达式:
①通过jQ_obj调用each方法:
jQ_obj.each(function (index, obj) {
/*执行代码*/
})
②将jQ_obj作为参数传入each方法中:
$.each(jQ_obj, function (index, obj) {
/*执行代码*/
})
六、data方法:用data方法存入的属性不会在页面的代码中显示。
1、jQ_obj.data('other_info'):查看隐藏属性,后面填入值则是设置。
2、jQ_obj.removeData('other_info'):移除隐藏属性。