我的JQuery随笔

写在前面

本文是我在业务中使用到的JQuery的小记录，欢迎大家阅读分享。

• 冒泡事件 与 默认事件

冒泡事件的概念：当子元素和父元素同时绑定同一事件时，当点击子元素会触发子元素的事件和父元素的事件。那么，我们可以使用下面的方法来阻止冒泡：

stopPropagation()：如果存在父元素和子元素同时绑定同一事件，默认子元素触发时，父元素也会触发，该方法会阻止父元素的事件触发，只停留在子元素的事件当中。
stopImmediatePropagation():如果一个子元素同时绑定同一个事件时有多个方法，默认会顺序执行，该方法会阻止顺序执行，防止下面的效果覆盖掉上面的效果

默认事件的概念: 指HTML元素自带的一些事件，如点链接就会跳转页面，点击Submit按钮就会提交等等。此时可以用下面方法来取消掉这些默认的事件：

preventDefault()：取消默认的事件。

• 字符串判空

$(this).val() == "" ||  $.trim($(this).val()).length == 0
1

• 更改元素属性

 $(this).attr("disabled",false)
1

• 阻止子元素继承父元素的事件
  当出现内外层嵌套元素，并且父子元素都有点击事件时，当点击子元素会出现父元素的事件也被触发，此时可以用到以下代码来阻止子元素继承父元素的事件：

$("btn").click(function (event) {
	//event.target指向引起触发事件的元素
 	//event.currentTarget则是事件绑定的元素
    if (event.target == event.currentTarget){
        //执行父元素的事件
    }
})
1
2
3
4
5
6
7

关于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")
})
1
2
3
4
5

• 改变浏览器滚动条（页面内链接跳转）

 $to_extract_btn.click(function () {
    // 跳转至 如何提取
    let targetScrollTop = $feature_item11.offsetTop
    $("html,body").animate({
        scrollTop: targetScrollTop - 74 - 120 // 74:nav-bar 120:margin-top
    }, 500);
})
1
2
3
4
5
6
7

写在后面

本文会不断更新我在业务中遇到的JQuery问题，欢迎大家一起学习！