049_jQuery 操做標籤

時間 2019-11-13

標籤 jquery 標籤欄目 JQuery 简体版

原文原文鏈接

一，jQuery操做標籤css

1，操做 class 類html

　　1.1，操做 class 類python

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>樣式操做示例</title>
    <style> .c1 { height: 200px; width: 200px; border-radius: 50%; background-color: red;
        } .c2 { background-color: green;
        }
    </style>
</head>
<body>

<div class="c1"></div>

<script src="jquery-3.2.1.min.js"></script>
<script>
    // 找標籤
 $("div.c1").click(function () { // console.log(this); // this是DOM對象
 $(this).toggleClass("c2"); // 有就刪掉 沒有就加上
 }) </script>
</body>
</html>

樣式操做示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自定義模態框示例</title>
    <style> .cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.4); z-index: 998;
        } .modal { height: 400px; width: 600px; background-color: white; position: absolute; top: 50%; left: 50%; margin-left: -300px; margin-top: -200px; z-index: 1000;
        } .hide { display: none;
        }
    </style>
</head>
<body>
<button id="b1">屠龍寶刀,點擊就送!</button>
<div class="cover hide"></div>
<div class="modal hide">
    <form>
        <p>
            <label>用戶名: <input type="text">
            </label>
        </p>
        <p>
            <label>密碼: <input type="password">
            </label>
        </p>
        <p>
            <input type="submit" value="登陸">
            <input id="cancel" type="button" value="取消">
        </p>
    </form>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
    // 找到點擊彈出模態框的按鈕
 $("#b1").click(function () { // 把.cover和.modal顯示出來(去除掉.hide)
 $(".cover").removeClass("hide"); // 顯示背景
 $(".modal").removeClass("hide"); // 顯示模態框
 }); // 找到取消按鈕,綁定事件
 $("#cancel").click(function () { // 給背景和模態框都加上hide類
 $(".cover").addClass("hide"); $(".modal").addClass("hide"); }) </script>
</body>
</html>

自定義模態示例框

　　1.2，經過 CSSjquery

css("color","red")//DOM操做：tag.style.color="red"

　　　　示例app

$("p").css("color", "red"); //將全部p標籤的字體設置爲紅色

2，位置操做ide

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

　　.offset()方法容許咱們檢索一個元素相對於文檔（document）的當前位置。和 .position()的差異在於： .position()是相對於相對於父級元素的位移。測試

　　實例：字體

　　<1>ui

　　<2>this

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>位置相關方法</title>
    <style> * { margin: 0; padding: 0;
        } .c1, .c2, .c3{ height: 100px; width: 100px; background-color: red;
        } .c2 { position: relative; left: 200px; top: 200px; background-color: green;
        } .c3 { position: absolute; left: 100px; top: 100px; background-color: blue;
        }
    </style>
</head>
<body>

<div class="c1">我是div</div>
<div class="c2">
    <div class="c3">我是c3</div>
</div>

<script src="jquery-3.2.1.min.js"></script>
</body>
</html>

位置相關

　　<3>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>位置相關示例之返回頂部</title>
  <style> * { margin: 0;
       } .c1 { width: 100px; height: 200px; background-color: red;
    } .c2 { height: 50px; width: 50px; position: fixed; bottom: 15px; right: 15px; background-color: #2b669a;
    } .hide { display: none;
    } .c3 { height: 100px;
    }
  </style>
</head>
<body>
<button id="b1" class="btn btn-default">點我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div>

<button id="b2" class="btn btn-default c2 hide">返回頂部</button>
<script src="jquery-3.2.1.min.js"></script>
<script> $(window).scroll(function () { if ($(window).scrollTop() > 100) { $("#b2").removeClass("hide"); }else { $("#b2").addClass("hide"); } }); $("#b2").click(function () { $(window).scrollTop(0); }) </script>
</body>
</html>

返回頂部

3，尺寸

height()	//內容區域的高和寬
width()
innerHeight()	//內容區域加padding(內邊距)
innerWidth()
outerHeight()	//內容區域+padding+border(邊框)
outerWidth()

　　實例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>尺寸示例</title>
    <style> .c1 { height: 100px; width: 200px; padding: 10px; margin: 20px; background-color: red; border: 5px solid green;
        }
    </style>
</head>
<body>

<div>
    <div class="c1">div</div>
</div>
<script src="jquery-3.2.1.min.js"></script>
</body>
</html>

測試代碼

4，文本操做

　　4.1，HTML代碼

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

　　4.2，文本值

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

　　4.3，值

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

　　　　4.3.1，獲取輸入框中填寫的內容：

　　　　4.3.2，獲取符合條件的全部值

　　　　　　將獲取到的全部符合條件的經過for循環在分貝 .var()

　　　　4.3.3，設置值 checkbox select 的值

<input type="checkbox" value="basketball" name="hobby">籃球
<input type="checkbox" value="football" name="hobby">足球

<select multiple id="s1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

　　　　設置

$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])

　　　　4.3.4，自定義登陸校驗示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>文本操做之登陸驗證</title>
  <style> .error { color: red;
    }
  </style>
</head>
<body>

<form action="">
  <div>
    <label for="input-name">用戶名</label>
    <input type="text" id="input-name" name="name">
    <span class="error"></span>
  </div>
  <div>
    <label for="input-password">密碼</label>
    <input type="password" id="input-password" name="password">
    <span class="error"></span>
  </div>
  <div>
    <input type="button" id="btn" value="提交">
  </div>
</form>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script> $("#btn").click(function () { var username = $("#input-name").val(); var password = $("#input-password").val(); if (username.length === 0) { $("#input-name").siblings(".error").text("用戶名不能爲空"); } if (password.length === 0) { $("#input-password").siblings(".error").text("密碼不能爲空"); } }) </script>
</body>
</html>

自定義登陸校驗示例

5，屬性操做

　　5.1，用於ID等或自定義屬性：

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>屬性操做</title>
</head>
<body>

<img src="http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg" alt="">
<input type="button" id="b1" value="下一個">


<input checked type="checkbox" id="c1">
<input type="checkbox" id="c2">

<script src="jquery-3.2.1.min.js"></script>
<script>
    var oldURL; var newURL = "http://img01.yohoboys.com/contentimg/2017/08/12/21/012a1eab9842a752f8c4d98b8fc2777ad7.jpg" $("#b1").click(function () { var $imgEles = $("img"); // 修改img標籤的src屬性
 oldURL = $imgEles.attr("src"); $imgEles.attr("src", newURL); newURL = oldURL; }); </script>
</body>
</html>

屬性測試，5.1/5.2用

　　5.2，用於 checkbox 和 radio 的屬性操做

.prop("屬性") 	// 獲取屬性
.prop("屬性", 布爾值)// 設置值
.removeProp("屬性") // 移除屬性

　　　　特別注意：

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

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

　　5.3，prop和attr的區別：

attr 全稱 attribute(屬性)

prop 全稱 property(屬性)

　　雖然都是屬性，但他們所指的屬性並不相同，attr 所指的屬性是 HTML 標籤屬性，而 prop 所指的是 DOM 對象屬性，能夠認爲 attr 是顯式的，而 prop 是隱式的。

舉個例子

<input type="checkbox" id="i1" value="1">

針對上面的代碼

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

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

若是換成下面的代碼：

<input type="checkbox" checked id="i1" value="1">

再執行：

$("#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。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>做業需求分析</title>
</head>
<body>

<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>xx演員</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>韓涉</td>
        <td>導演</td>
    </tr>
    </tbody>
</table>

<input type="button" id="b1" value="全選">
<input type="button" id="b2" value="反選">
<input type="button" id="b3" value="取消">

<script src="jquery-3.2.1.min.js"></script>
<script>
    // 點擊全選,表格中全部的checkbox都選中
    // 1. 找checkbox
    // 2. 所有選中 --> prop("checked", true);

    // 點擊取消
    // 1. 找checkbox
    // 2. 所有取消選中 --> prop("checked", false);


    // 反選
    // 1. 找到全部的checkbox
    // 2. 判斷
    // 2.1 原來沒選中的,要選中
    // 2.2 原來選中的,要取消選中
</script>
</body>
</html>

任務實現全選，反選

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>做業需求分析</title>
</head>
<body>

<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>xx演員</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>韓涉</td>
        <td>導演</td>
    </tr>
    </tbody>
</table>

<input type="button" id="b1" value="全選">
<input type="button" id="b2" value="反選">
<input type="button" id="b3" value="取消">

<script src="jquery-3.2.1.min.js"></script>
<script>
    // 點擊全選,表格中全部的checkbox都選中
    // 1. 找checkbox
    // 2. 所有選中 --> prop("checked", true);
 $("#b1").click(function () { $(":checkbox").prop("checked", true); }); // 點擊取消
    // 1. 找checkbox
    // 2. 所有取消選中 --> prop("checked", false);
 $("#b3").click(function () { $(":checkbox").prop("checked", false); }); // 反選
    // 1. 找到全部的checkbox
    // 2. 判斷
    // 2.1 原來沒選中的,要選中
    // 2.2 原來選中的,要取消選中
 $("#b2").click(function () { // 找到全部的checkbox,把它們保存在一個名叫 $checkboxEles 的變量中,方便後面使用
           var $checkboxEles = $(":checkbox"); // 遍歷全部的checkbox,根據每個checkbox的狀態作不一樣的操做
           for (var i=0;i<$checkboxEles.length;i++){ // 把每個checkbox包成jQuery對象
               var $tmp = $($checkboxEles[i]); // 若是 checkbox是選中的
               if ($tmp.prop("checked")){ // 取消選中
 $tmp.prop("checked", false); }else { // 不然就選中
 $tmp.prop("checked", true); } } }); </script>
</body>
</html>

答案

6，文檔操做

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

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

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

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

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

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

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

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

　　6.5，移除和清空元素

$(A).remove()// 從DOM中刪除全部匹配的元素。
$(A).empty()// 刪除匹配的元素集合中全部內容。

　　　　例子：

　　　　　　點擊按鈕在表格添加一行數據

　　　　　　點擊每一行的刪除按鈕刪除當前行數據

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>點擊在表格最後添加一條記錄</title>
</head>
<body>
<table border="1" id="t1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>愛好</th>
        <th>操做</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>小強</td>
        <td>吃冰激凌</td>
        <td>
            <button class="delete">刪除</button>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>二哥</td>
        <td>Girl</td>
        <td>
            <button class="delete">刪除</button>
        </td>
    </tr>

    </tbody>
</table>

<button id="b1">添加一行數據</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
    // 綁定事件
 $("#b1").click(function () { // 生成要添加的tr標籤及數據
        var trEle = document.createElement("tr"); $(trEle).html("<td>3</td>" +
            "<td>小東北</td>" +
            "<td>社會搖</td>" +
            "<td><button class='delete'>刪除</button></td>"); // 把生成的tr插入到表格中
 $("#t1").find("tbody").append(trEle); }); // 每一行的=刪除按鈕綁定事件
 $(".delete").click(function () { $(this).parent().parent().remove(); }); </script>
</body>
</html>

在表格的最後添加一條記錄

　　6.6，替換

var imgEle = document.createElement("img")
$("a").replaceWith(imgEle)	//用 imgEle 替換全部的a標籤
$(imgEle).replaceAll("a")	//用 imgEle 替換全部的a標籤

　　6.7，克隆

$(A).clone() //克隆標籤自己
$(A).clone(true) //克隆標籤自己 和 綁定的事件

注意：克隆的時候若是標籤設置的有 id 克隆的標籤也是一樣的，因此克隆時儘可能不要加 id 而是設置一個類

　　　　示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>克隆</title>
  <style> #b1 { background-color: deeppink; padding: 5px; color: white; margin: 5px;
    } #b2 { background-color: dodgerblue; padding: 5px; color: white; margin: 5px;
    }
  </style>
</head>
<body>

<button id="b1">屠龍寶刀，點擊就送</button>
<hr>
<button id="b2">屠龍寶刀，點擊就送</button>

<script src="jquery-3.2.1.min.js"></script>
<script>
  // clone方法不加參數true，克隆標籤但不克隆標籤帶的事件
 $("#b1").on("click", function () { $(this).clone().insertAfter(this); }); // clone方法加參數true，克隆標籤而且克隆標籤帶的事件
 $("#b2").on("click", function () { $(this).clone(true).insertAfter(this); }); </script>
</body>
</html>

點擊複製按鈕

相關標籤/搜索

每日一句

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