03 jQuery补充

jQuery补充

1. 阻止后续事件

  • 本身一个按钮绑定了一个事件，但是我们又给它绑定了一个事件。这时我们如果需要它只执行自定义事件，就需要阻止后续事件
    • 在事件最后加：
      • return fasle
      • e.preventDefault()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action="">
    <span id="d1" style="color: red"></span>
    <input type="submit" id="d2">
</form>

<script>
    $('#d2').click(function (e) {
        $('#d1').text('宝贝 你能看到我吗?')
        // 阻止标签后续事件的执行 方式1
        // return false
        // 阻止标签后续事件的执行 方式2
        // e.preventDefault()
    })
</script>

</body>
</html>

2. 阻止事件冒泡

  • 在多级标签中，我们给子标签绑定一个点击事件后，点击子标签，相当于也点击了父标签，如果父子标签都有绑定点击事件，就会将父标签的事件一起执行了。这时我们如果需要它只执行子标签中的事件，就需要阻止事件冒泡
    • 在事件最后加：
      • return false
      • e.stopPropagation()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="d1">div
        <p id="d2">div>p
            <span id="d3">span</span>
        </p>
    </div>
    <script>
        $('#d1').click(function () {
            alert('div')
        })
        $('#d2').click(function () {
            alert('p')
        })
        $('#d3').click(function (e) {
            alert('span')
            // 阻止事件冒泡的方式1
            // return false
            // 阻止事件冒泡的方式2
            // e.stopPropagation()
        })
    </script>
</body>
</html>

3. 事件委托

  • 给页面上所有的button标签绑定点击事件，但是我现在想要动态的创建一个button按钮，这时第一种绑定事件的方法创建一个按钮后并没有事件，第二种方法可行。
<script>
    // 第一种
    // 给页面上所有的button标签绑定点击事件
    // $('button').click(function () {  // 无法影响到动态创建的标签
    //     alert(123)
    // })

    // 第二种
    // 事件委托
    $('body').on('click','button',function () {
        alert(123)  // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的
    })
</script>

4. 页面加载

  • 一般情况下js代码需要写在body最下方，不写在最下方需要只用页面加载。
# 等待页面加载完毕再执行代码
window.onload = function(){
  // js代码
}

"""jQuery中等待页面加载完毕"""
# 第一种
$(document).ready(function(){
  // js代码
})
# 第二种
$(function(){
  // js代码
})
# 第三种
"""直接写在body内部最下方"""

5. 动画效果

  • jQuery 提供的一些动画效果
$('#d1').hide(5000)
$('#d1').show(5000)

$('#d1').slideUp(5000)
$('#d1').slideDown(5000)

$('#d1').fadeOut(5000)
$('#d1').fadeIn(5000)

$('#d1').fadeTo(5000,0.4)

6. each/data 方法

  • 有了each之后 就无需自己写for循环了 用它更加的方便
  • 能够让标签帮我们存储数据 并且用户肉眼看不见
# each()
# 第一种方式
$('div')
w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
# function 中 有一个参数是索引
$('div').each(function(index){console.log(index)})
VM181:1 0
VM181:1 1
VM181:1 2
VM181:1 3
VM181:1 4
VM181:1 5
VM181:1 6
VM181:1 7
VM181:1 8
VM181:1 9
# function 中 有两个参数分别是 索引，元素
$('div').each(function(index,obj){console.log(index,obj)})
VM243:1 0 <div>​1​</div>​
VM243:1 1 <div>​2​</div>​
VM243:1 2 <div>​3​</div>​
VM243:1 3 <div>​4​</div>​
VM243:1 4 <div>​5​</div>​
VM243:1 5 <div>​6​</div>​
VM243:1 6 <div>​7​</div>​
VM243:1 7 <div>​8​</div>​
VM243:1 8 <div>​9​</div>​
VM243:1 9 <div>​10​</div>​

# 第二种方式  可以循环容器[111,222,333]
$.each([111,222,333],function(index,obj){console.log(index,obj)})
VM484:1 0 111
VM484:1 1 222
VM484:1 2 333
(3) [111, 222, 333]


# data()
"""
能够让标签帮我们存储数据 并且用户肉眼看不见
"""
# 为10个div 都加上了该属性值（info'：回来吧，我原谅你了!'），但是用户肉眼看不到
$('div').data('info','回来吧，我原谅你了!')
w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]

$('div').first().data('info')
"回来吧，我原谅你了!"
$('div').last().data('info')
"回来吧，我原谅你了!"

$('div').first().removeData('info')   # 删除第一个div中的属性和属性值
w.fn.init [div#d1, prevObject: w.fn.init(10)]
posted @ 2021-09-07 14:49  超暖  阅读(37)  评论(0)    收藏  举报