03 jQuery補充

阿新 • • 發佈：2021-09-07

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)]

再堅持一下下，會越來越優秀