写在前面
本文是我在业务中使用到的JQuery的小记录,欢迎大家阅读分享。
- 冒泡事件 与 默认事件
冒泡事件的概念:当子元素和父元素同时绑定同一事件时,当点击子元素会触发子元素的事件和父元素的事件。那么,我们可以使用下面的方法来阻止冒泡:
stopPropagation():如果存在父元素和子元素同时绑定同一事件,默认子元素触发时,父元素也会触发,该方法会阻止父元素的事件触发,只停留在子元素的事件当中。
stopImmediatePropagation():如果一个子元素同时绑定同一个事件时有多个方法,默认会顺序执行,该方法会阻止顺序执行,防止下面的效果覆盖掉上面的效果
默认事件的概念: 指HTML元素自带的一些事件,如点链接就会跳转页面,点击Submit按钮就会提交等等。此时可以用下面方法来取消掉这些默认的事件:
preventDefault():取消默认的事件。
- 字符串判空
$(this).val() == "" || $.trim($(this).val()).length == 0
- 更改元素属性
$(this).attr("disabled",false)
- 阻止子元素继承父元素的事件
当出现内外层嵌套元素,并且父子元素都有点击事件时,当点击子元素会出现父元素的事件也被触发,此时可以用到以下代码来阻止子元素继承父元素的事件:
$("btn").click(function (event) {
//event.target指向引起触发事件的元素
//event.currentTarget则是事件绑定的元素
if (event.target == event.currentTarget){
//执行父元素的事件
}
})
关于event.currentTarget和event.target可以看下面文章
https://www.jianshu.com/p/6ec636b777fb
- 实现 tab-bar 盒子
$tab_item.click(function () {
let index = $tab_item.index(this)
$(this).addClass("active").siblings().removeClass("active")
$case_box_item.eq(index).addClass("active").siblings().removeClass("active")
})
- 改变浏览器滚动条(页面内链接跳转)
$to_extract_btn.click(function () {
// 跳转至 如何提取
let targetScrollTop = $feature_item11.offsetTop
$("html,body").animate({
scrollTop: targetScrollTop - 74 - 120 // 74:nav-bar 120:margin-top
}, 500);
})
写在后面
本文会不断更新我在业务中遇到的JQuery问题,欢迎大家一起学习!