day 49

時間 2019-11-19

標籤 day 简体版

原文原文鏈接

jQuery的補充

基本篩選器

:first      // 第一個
:last       // 最後一個
:eq(index)  // 索引等於index的那個元素
:even       // 匹配全部索引值爲偶數的元素，從0開始計數
:odd        // 匹配全部索引值爲奇數的元素，從0開始計數
:gt(index)  // 匹配全部大於給定索引值的元素
:lt(index)  // 匹配全部小於給定索引值的元素
:not(元素選擇器) // 移除全部知足not條件的標籤
:has(元素選擇器) // 選取全部包含一個或多個標籤在其內的標籤(指的是從後代元素找)

屬性選擇器

[attribute]
[attribute=value]   // 屬性等於
[attribute!=value]  // 屬性不等於

表單選擇器

:text       
:password
:file
:radio
:checkbox

:submit     // 提交
:reset      // 重置
:button     // 按鈕

篩選器方法

下一個元素html

$("#id").next
$("#id")/nextAll()      // 同級別下面的全部元素
$("#id").nextUntil()    // 查找下面全部元素，直到匹配到那一個元素爲止

上一個元素jquery

$("#id"),prev
$('#id').prevALL()      // 同級別上面的所有元素
$("#id").prevUntil()    // 查找上面全部元素，直到匹配到那一個元素爲止

父親元素app

$("#id").parent()
$("#id").parents()      // 查找當前元素的全部父輩元素
$("#id").parentsUntil() // 查找當前元素的全部的父輩元素，直到遇到匹配的那個元素爲止

兒子和兄弟元素函數

$("id").children()      // 查找子元素
$("id").sibings()       // 查找兄弟元素

操做標籤

樣式操做

樣式類this

addClass():     // 添加指定的css類名
removeClass():  // 移除指定的css類名
hasClass():     // 判斷樣式存不存在
toggleClass():  // 切換css類名，若是有就刪除，若是沒有就添加

位置操做

offset()        // 獲取匹配元素在當前窗口的相對偏移或設置元素位置
position()      // 獲取匹配元素相對父元素的偏移
scrollTop()     // 獲取元素相對滾動條頂部的偏移
scrollLeft()    // 獲取元素相對滾動條左側的偏移

尺寸

height()        // 高度
width()         // 寬度
innerHeight     // 文本內容與內邊距的高度和
innerWidth      // 文本內容與內邊距的寬度和
outerHeight     // 文本內容與內邊距與邊框的高度和
outerWidth      // 文本內容與內邊距與邊框的寬度和

文本操做

HTML代碼spa

html()      // 取得第一個匹配元素的html內容
html(val)   // 設置全部匹配元素的html內容

文本值code

text()      // 取得全部匹配元素的內容
text(val)   // 設置全部匹配元素的內容

值htm

val()       // 取得第一個匹配元素的當前值
val(val)    // 設置全部匹配元素的值
val(val1, val2) // 設置多選的checkbox,多選select的值

屬性操做

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

用於checkbox和radio對象

prop        // 獲取屬性
removePorp()    // 移除屬性

==prop和attr的區別==

attr全稱attribute(屬性)

prop全稱propperty(屬性)

二者雖然都是屬性，但它們所指的屬性並不相同，attr所指的屬性是HTML標籤屬性，而prop所指的是DOM對象屬性。

總結

1.對於標籤上有的能看到的屬性和自定義屬性都用attr

2.對於返回布爾值的好比checkbox、radio、和option的是否被選中都用prop

文檔處理

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

$(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   // 把A放到B的前面

移除和清空元素

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

替換

replaceWith()
replaceAll()

克隆

clone() // 參數複製

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
    <style>
        button {
            height: 50px;
            width: 80px;
            color: violet;
            border: 3px solid yellow;
            background-color: orangered;
        }
    </style>
</head>
<body>


<button>啊~~~疼</button>

<script>
    // var btnEle = $('button')[0];
    // btnEle.onclick = function () {
    //     $(this).clone().insertAfter(this)
    //     // clone 默認不可隆事件
    // }
    // 若是要克隆事件，使用如下方式
    $("button").on("click", function () {
    $(this).clone(true).insertAfter(this);
  });
</script>

</body>
</html>

事件

經常使用事件

click(function(){...})      // 鼠標點擊
hover(function(){...})      // 懸浮
blur(function(){...})       // 失去焦點
focus(function(){...})      // 聚焦
change(function(){...})     // 改變應用域
keyup(function(){...})      // 按下按鍵時，改變文本域的顏色

事件綁定

.on(events [, selector ], function(){})

event：事件
selector：選擇器（可選）
function：事件處理函數

移除事件

.off(events [, selector ], function(){})

off()方法移除用 .on()綁定的事件處理程序

event：事件
selector：選擇器（可選）
function：事件處理函數

阻止後續事件執行

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

2.e.preventDefault();

jQuery 綁定事件的語法

jQuery綁定事件的語法
    第一種語法結構：
        $(選擇器).事件名(function(){
            // 事件代碼
        })
    第二種語法結構    用處更廣  
        $(選擇器).on('事件名',function(){
            // 事件代碼
        })
            # 實時監測input內部輸入變化
            $('input').on('input',function () {
                // 獲取用戶輸入的內容
                console.log($(this).val())
            })

阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
</head>
<body>
<div>div
    <p>p
        <span>span</span>
    </p>
</div>

<script>
    $('div').click(function (e) {
        alert('div')
    });
    $('p').click(function (e) {
        alert('p')
    });
    $('span').click(function (e) {
        alert('span');
        e.stopPropagation() // 阻止事件冒泡
    });



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

文檔加載

js中
    window.onload = function() {
    // 在這裏寫JS代碼
}

jQuery中
    $(document).ready(function() {
    // 在這裏寫jQuery代碼
})

相關標籤/搜索

每日一句

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