前端之JQuery第二篇

時間 2019-12-04

標籤前端 jquery 第二欄目 JQuery 简体版

原文原文鏈接

前端之jQuery第二篇

1.屬性操做

用於ID等或自定義屬性：

attr(attrName)  //返回第一個匹配元素的屬性值
attr(attrName,attrValue)  //爲全部匹配元素設置一個屬性值
attr({k1:v1,k2:v2})  //爲全部匹配元素設置多個屬性值
removeAttr()  //從每個匹配的元素中刪除一個屬性

用於checkbox和radio

prop() //獲取屬性值
removeProp()  //移除屬性

注意：在1.x及2.x版本的jQuery中使用attr對checkbox進行賦值操做時會出bug，在3.x版本的jQuery中則沒有這個問題。爲了兼容性，咱們在處理checkbox和radio的時候儘可能使用特定的prop()，不要使用attr("checked", "checked")javascript

<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
  $(":checkbox[value='1']").prop("checked", true);
  $(":radio[value='2']").prop("checked", true);
</script>  


<!--prop返回的是true或false-->

prop和attr的區別：

attr所指的屬性是HTML標籤屬性，而prop所指的是DOM對象屬性，能夠認爲attr是顯式的，而prop是隱式的。css

attr的做用範圍只限於HTML標籤內的屬性，而prop獲取的是這個DOM對象的屬性，選中返回true，沒選中返回falsehtml

2.文檔處理

添加到指定元素內部的後面

$(A).append(B)  //把B追加到A後面
$(A).appendTo(B)  //把A追加到B

添加到指定元素內部的前面

$(A).prepend(B)  //把B放到A前面
$(A).prependTo(B)  //把A放到B前面

添加到指定元素外部的後面

$(A).after(B)  //把B放到A的後面
$(A).insertAfter(B)  //把A放到B的後面

添加到指定元素外部的前面

$(A).before(B)  //把B放到A的前面
$(A).insertBefore(B)  //把A放到B的前面

移除和清空元素

remove()  //從Dom中刪除全部匹配的元素
empty()  //刪除匹配的元素集合中全部的子節點

克隆

clone()  //參數

示例前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style>
        button {
            background-color: pink;
        }
    </style>
</head>
<body>
<button>屠龍寶刀，點擊就送！</button>

<script>
    // 第一種綁定事件的方式,clone不加參數true，克隆標籤但不克隆標籤帶的事件，即點擊其餘標籤不會有克隆的效果
    // $('button').click(function () {
    //
    // })
    //
    
    //第二種，加參數true，克隆標籤而且克隆標籤帶的事件
    $('button').on('click',function () {
        $(this).clone(true).insertAfter(this);
    })

</script>
</body>
</html>

3.事件

經常使用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){})

hover懸浮事件示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p>來玩啊,老弟!</p>

<script>
    $('p').hover(
        function () {
            alert('How Much?')
    },
        function () {
            alert("歡迎老闆下次再來，記得我是4號喲!")
        }
    )
</script>
</body>
</html>

事件綁定

$('選定的標籤').on.(events [,selector],function(){})java

events:事件
selector:選擇器（可選）
function:事件處理函數

阻止後續事件執行

1.return false; //常見阻止表單提交等jquery

2.e.preventDefault();數組

示例app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form action="">
    <input type="submit">
</form>


<script>
    $('input').click(function (e) {
        alert(123);
        // 1.return false
        e.preventDefault();  //取消提交按鈕的提交功能
    });
</script>

阻止事件冒泡

事件冒泡：ide

事件會一層一層往上級彙報函數

阻止事件冒泡：

在事件函數內部加一句取消事件冒泡的代碼，注意要加上形參

$('p').click(function(e){
    alert('p');
    e.stopPropagation()
})

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>div
    <p>div>p
        <span>div>p>span</span>
    </p>
</div>
<script>
    $('div').click(function () {
        alert('div')
    });
    $('p').click(function () {
        alert('p');

    });
    $('span').click(function (e) {
        alert('span');
        e.stopPropagation()
    });
</script>
</body>
</html>

文檔加載

三種方式

第一種(瞭解)：

$(document).ready(function(){

//這裏寫js代碼
})

第二種(瞭解)：

$(function(){

//這裏寫js代碼

})

第三種：

直接在body內部最下方書寫代碼

事件委託

事件委託是經過事件冒泡的原理，利用父標籤捕獲子標籤的事件

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<button>我是23號技師，很高興爲您服務!</button>

<script>
    // 事件委託
    $('body').on('click','button',function () {
        alert(123)
    })
    //再動態建立一個button按鈕會有一樣的效果
</script>
</body>
</html>

4.動畫效果

//基本
show()
hide()
toggle()

//滑動
slideDown()
slideUp()
slideToggle()

//淡入淡出
fadeIn()
fadeOut()
fadeTo()
fadeToggle()

//自定義（瞭解）
animate()

5.補充

each

描述：一個通用的迭代函數，它能夠用來無縫迭代對象和數組。數組和相似數組的對象經過一個長度屬性（如一個函數的參數對象）來迭代數字索引，從0到length - 1。其餘對象經過其屬性名進行迭代。

$('div').each(function(){
    console.log(this)  //this至關於div這個標籤
})

注意：

在遍歷過程當中可使用return false提早結束each循環

data

在匹配的元素集合中的全部元素上存儲任意相關數據或返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值

//標籤存儲鍵值對
$('p').data('username','lucas')

//獲取存儲的鍵值對
$('p').data('username')

//刪除存儲的鍵值對
$('p').removeData('username')

//獲取鍵值對的時候若是不存在也不會報錯
$('p').data('username')

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。