jQuery之標籤操做和返回頂部、登陸驗證、全選反選、克隆示例

時間 2019-11-12

原文原文鏈接

1、樣式操做
一、JQ中的樣式類
somenode.addClass();// 添加指定的CSS類名。
somenode.removeClass();// 移除指定的CSS類名。
somenode.hasClass();// 判斷樣式存不存在
somenode.toggleClass();// 切換CSS類名，若是有就移除，若是沒有就添加。

somenode.className  獲取全部樣式類名(字符串)
somenode.classList  獲取全部樣式類名(數組)
somenode.classList.remove("cls")  刪除指定類
somenode.classList.add("cls")  添加類
somenode.classList.contains("cls")  存在返回true，不然返回false
somenode.classList.toggle("cls")  存在就刪除(返回false)，不存在則添加(返回true)

JS中的class操做




二、CSS 
somenode.css("屬性","值")  
示例：
$("p").css("color", "red"); //將全部p標籤的字體設置爲紅色 
$("p").css({"height": "300px","width":"300px"});  // 同時設置多個屬性值

somenode.style.color="red"

JS中DOM操做





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

注意： .offset()是檢索一個元素相對於文檔（document）的當前位置。 .position()是相對於父級元素的位移。 只有position不能設置偏移量。 其餘三個均可以設置： 不寫參數時：獲取值 寫參數時：設置值

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .c1 {
            position: relative;
            left: 100px;
            height: 100px;
            width: 100px;
            background-color: red;
        }
        .c2 {
            position: absolute;
            left: 100px;
            height: 100px;
            width: 100px;
            background-color: green;
        }
    </style>
</head>
<body>

<div class="c1">
    <div class="c2"></div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</body>
</html>

HTML代碼


操做示例：
// 獲取匹配元素在當前窗口的相對偏移
$(".c1").offset();  // {top: 0, left: 100}
$(".c2").offset();  // {top: 0, left: 200}

// 獲取匹配元素相對父元素的偏移
$(".c2").position();  //{top: 0, left: 100}

// 給獲取的匹配元素設置相對於當前窗口的偏移量
$(".c2").offset({top:100,left:200});




3、尺寸
somenode.height()  // 內容的高度
somenode.width()  // 內容的寬度

somenode.innerHeight()  // 內容的高度+padding
somenode.innerWidth()  // 內容的寬度+padding

somenode.outerHeight()  // 內容的高度+padding+border
somenode.outerWidth()  // 內容的寬度+padding+border




4、文本操做
一、獲取(設置)HTML代碼
somenode.html()  // 獲取匹配元素的html內容
somenode.html("內容")  // 設置匹配元素的html內容


二、獲取(設置)文本值
somenode.text()// 獲取匹配元素的內容
somenode.text("內容")// 設置匹配元素的內容

獲取內容
somenode.innerHTML;
somenode.innerText;

設置內容
somenode.innerHTML = "內容";
somenode.innerText = "內容";

對比JS

 三、value值：適用於表單的input、select、textarea
somenode.val()  // 獲取當前值
somenode.val("值")  // 設置匹配元素的值
somenode.val(["值1", "值2"])  // 設置多選的checkbox、多選select的值

somenode.value  // 獲取值
somenode.setAttribute("value","值")  // 設置值

對比JS

注意：獲取表單的text、checkbox、radio、select等值用val()，而獲取普通標籤的文本內容用text()




四、例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="d1">
    《春曉》
    <p>
        春眠不覺曉，到處聞啼鳥。夜來風雨聲，花落知多少。
    </p>
</div>


<input type="text" id="i1">
<input type="checkbox" name="hobby" value="basketball">籃球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="doublecolorball">雙色球


<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</body>
</html>

HTML代碼


操做示例：
$("#d1").text();  // 只輸出內容
$("#d1").html();  // 標籤和內容都輸出

$("#d1").text("<a href="www.baidu.com">百度</a>");  // 設置值，標籤也設置成字符串
$("#d1").html("<a href="www.baidu.com">百度</a>");  // 設置值，標籤就會造成標籤

$("#i1").val()  // 獲取文本框的內容



5、屬性操做
一、獲取文本類屬性
somenode.attr("屬性名")  // 返回匹配元素的屬性值
somenode.attr("屬性名", "值")  // 爲匹配元素設置一個屬性值
somenode.attr({k1: v1, k2:v2})  // 爲匹配元素設置多個屬性值
somenode.removeAttr("屬性名")  // 從匹配的元素中刪除一個屬性

JS屬性(attribute)操做
語法：
爲某節點增長一個屬性
somenode.setAttribute("屬性名","值");
獲取這個屬性值
somenode.getAttribute("屬性名");
刪除屬性
somenode.removeAttribute("屬性名");

對比JS



二、獲取表單裏的屬性(checkbox、select和radio的屬性)
somenode.prop("屬性名") // 獲取屬性
somenode.removeProp("屬性名") // 移除屬性

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


三、示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>

<div id="d1" title="屬性示例" name="例子">div</div>

<input type="checkbox" id="i1" checked="checked" value="a">
<input type="radio" value="b">

</body>
</html>

HTML代碼


操做示例：
$("#d1").attr("title");  // "屬性示例"
$("#d1").attr("name");  // "例子"

$("#d1").attr("name","嘿嘿嘿");
$("#d1").attr("name");  //"嘿嘿嘿"

$("#d1").removeAttr("name");

$(":checkbox[value='a']").prop("checked");  // true
$(":radio[value='b']").prop("checked", true);




四、attr和prop區別 prop和attr的區別： attr全稱attribute(屬性) prop全稱property(屬性) 雖然都是屬性，但他們所指的屬性並不相同，attr所指的屬性是HTML標籤屬性，而prop所指的是DOM對象屬性， 能夠認爲attr是顯式的，而prop是隱式的。即你選中的時候，標籤纔會有這個屬性，好比checked，當你在多選按鈕中選中了某個按鈕，
那個按鈕就自動會設置checked屬性。


好比：
<input type="checkbox" id="i1" value="1">

$("#i1").attr("checked")  // undefined
$("#i1").prop("checked")  // false

能夠看到attr獲取一個標籤內沒有的東西會獲得undefined，而prop獲取的是這個DOM對象的屬性，所以checked爲false。


若是換成下面的代碼：
<input type="checkbox" id="i1" value="1"  checked>
$("#i1").attr("checked")   // checked
$("#i1").prop("checked")  // true

這已經能夠證實attr的侷限性，它的做用範圍只限於HTML標籤內的屬性，而prop獲取的是這個DOM對象的屬性，選中返回true，沒選中返回false。

再看一下針對自定義屬性，attr和prop的區別：
<input type="checkbox" checked id="i1" value="1" me="自定義屬性">


$("#i1").attr("me")   // "自定義屬性"
$("#i1").prop("me")  // undefined
能夠看到prop不支持獲取標籤的自定義屬性。

總結 1.對於標籤上有的能看到的屬性和自定義屬性都用attr 2.對於返回布爾值的好比checkbox、radio和option的是否被選中都用prop。



6、文檔處理(jQuery中沒有建立節點的方法)
一、元素內部(A,B表明的都是節點)
添加到指定元素內部的後面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
注意：append也能夠直接追加HTML代碼
$("div").append("<button class="c1">點我</button>");


添加到指定元素內部的前面
$(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的前面


三、刪除
移除和清空元素
$(A).remove()  // 從DOM中刪除全部匹配的元素(全部都刪除HTML，連帶標籤也刪除)
$(A).empty()  // 刪除匹配的元素集合中全部的子節點(只刪除內容Text，不刪除標籤)

<div id="d1">
    嘿嘿嘿
</div>

$("#d1").remove();   // 把div標籤和嘿嘿嘿都刪除了
$("#d1").empty();   // 只刪除嘿嘿嘿，div標籤沒有刪除了

注意：JS中操做節點都是基於父節點操做的
1.添加節點(子節點)
追加一個子節點（做爲最後的子節點）
somenode.appendChild(newnode)；


把增長的節點放到某個節點的前邊。
somenode.insertBefore(newnode,某個節點);


示例1：
//建立節點
var pEle = document.createElement("p");

//先找一個父節點
var dEle = document.getElementById("d");

//把子節點追加到父節點
dEle.appendChild(pEle);



示例2：
//建立節點
var pEle = document.createElement("p");

//先找一個父節點
var dEle = document.getElementById("d");

//父節點裏面的某個節點
var d1 = document.getElementById('d1');

//把子節點放到d1這個節點前面
dEle.insertBefore(pEle,d1);




2.刪除節點
語法：
得到要刪除的元素，經過父元素調用該方法刪除
somenode.removeChild(要刪除的節點)

示例：
//先找一個父節點
var dEle = document.getElementById("d");

//找到父節點裏面想要刪除的子節點
var d1 = document.getElementById('d1');

//刪除子節點
dEle.removeChild(d1);


3.替換節點
語法：
somenode.replaceChild(newnode, 某個節點);

示例：
//建立節點
var pEle = document.createElement("p");

//先找一個父節點
var dEle = document.getElementById("d");

//父節點裏面的某個節點
var d1 = document.getElementById('d1');

//用新建的節點替換d1
dEle.replaceChild(pEle,d1);

對比JS




四、替換
$(A).replaceWith($(B))
$(B).replaceAll($(A))


示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="d1"></div>

<hr>

<div id="d2">
    <p>嘿嘿嘿！</p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</body>
</html>

HTML代碼


操做示例：
var aEle = document.createElement('a');
aEle.innerText = "百度";
aEle.href = "www.baidu.com";
$("p").replaceWith(aEle);  // 用新建的a節點替換全部的p標籤


var aEle = document.createElement('a');
aEle.innerText = "百度";
aEle.href = "www.baidu.com";
$(aEle).replaceAll($("p"));  // 用新建的a節點替換全部的p標籤




五、克隆
$(A).clone() // 不加參數true，克隆標籤但不克隆標籤帶的事件
$(A).clone(true) // 加參數true，克隆標籤且克隆標籤帶的事件





7、示例
一、返回頂部

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>返回頂部示例</title>
    <style type="text/css">
        .content {
            height: 3000px;
        }

        .btn {
            height: 50px;
            width: 50px;
            position: fixed;
            right:15px;
            bottom:15px;
        }

        .hide {
            display:none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body>
<div class="content">
    <p>渡遠荊門外，來從楚國遊。</p>
    <p>山隨平野盡，江入大荒流。</p>
    <p>月下飛天鏡，雲生結海樓。</p>
    <p>仍憐故鄉水，萬里送行舟。</p>
</div>

<div id="b1" class="btn hide">
    <button type="button" id="b2" style="background-color: blueviolet">返回頂部</button>
</div>

<script type="text/javascript">
    // window是DOM對象，因此用$()把它轉成JQ對象，scroll是滾動事件的關鍵字
    $(window).scroll(function () {
        if ($(window).scrollTop() > 100) {
            $("#b1").removeClass('hide');
        }else{
            $("#b1").addClass('hide');
        }
    });

    $("#b2").on("click",function () {
        $(window).scrollTop(0);
    })

</script>

</body>
</html>

返回頂部按鈕



二、登陸驗證

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登陸示例</title>
</head>
<body>
<form action="">
    <p>
        <label>用戶名
            <input type="text" name="username">
        </label>
        <span style="color: red;"></span>
    </p>
    
    <p>
        <label>密碼
            <input type="password" name="password">
        </label>
        <span style="color: red;"></span>
    </p>
    
    <p>
        <button id="login" type="button">登錄</button>
    </p>

</form>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script type="text/javascript">
    // 給登錄按鈕，綁定點擊事件
    $("#login").click(function () {
        // 1. 找到全部須要判斷的input輸入框
        var $inputEles = $("label>input");
        // 2. for循環依次作判斷input是否爲空
        for (var i=0;i<$inputEles.length;i++){
            var $inputEle = $($inputEles[i]);  // $(DOM對象) --> jQuery對象
            if(!$inputEle.val().trim()){
                // 獲取label的值
                var tem = $inputEle.parent().text().trim();
                $inputEle.parent().next().text(tem+"不能爲空");
            }

        }
    });


    // 給獲取用戶輸入的input框綁定事件
    var $inputEles = $("label>input");
    for (var j=0;j<$inputEles.length;j++){
        $inputEles[j].onfocus = function () {
            $(this).parent().next().text('');
        }
    }
    
    
</script>

</body>
</html>

登陸驗證



三、全選反選取消

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>全選反選取消</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<button type="button" id="all">全選</button>
<button type="button" id="reverse">反選</button>
<button type="button" id="cancel">取消</button>

<table border="1">
    <thead>
        <tr>
            <th>#</th>
            <th>姓名</th>
            <th>愛好</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox"></td>
            <td>小明</td>
            <td>看美女</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>小紅</td>
            <td>化妝</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>小花</td>
            <td>跳舞</td>
        </tr>
    </tbody>

</table>
<script type="text/javascript">
    // jQuery綁定事件方法
    // 全選，把全部checkbox的checked設置爲true
    $("#all").click(function(){
        $(":checkbox").prop("checked",true);
    });

    // 取消，把全部checkbox的checked設置爲false
    $("#cancel").on("click",function(){
       $(":checkbox").prop("checked",false);
    });

    // 反選，先查看checkbox的狀態，再把狀態設置爲相反的
    $("#reverse").click(function () {
       var $checkbox = $(":checkbox");
       for (var i=0;i<$checkbox.length;i++){
           // 獲取狀態
           var static = $($checkbox[i]).prop("checked");
           // 狀態設置爲反
           $($checkbox[i]).prop("checked",!static);
       }
    });

</script>

</body>
</html>

全選反選取消



四、克隆

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>克隆示例</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<button type="button" class="copy">想要複製本身嗎，點擊吧</button>
<script type="text/javascript">
    $(".copy").click(function () {
        $(this).clone(true).insertAfter(this);
    })
</script>
</body>
</html>

克隆

相關標籤/搜索

每日一句

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