Centos8中建立LVM精簡邏輯卷

阿新 • • 發佈：2021-12-15

jQuery介紹

jQuery是一個輕量級的、相容多瀏覽器的JavaScript庫。
jQuery使使用者能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax互動，能夠極大地簡化JavaScript程式設計。它的宗旨就是：“Write less, do more.“

jQuery的優勢

一款輕量級的JS框架。jQuery核心js檔案才幾十kb，不會影響頁面載入速度。
豐富的DOM選擇器,jQuery的選擇器用起來很方便，比如要找到某個DOM物件的相鄰元素，JS可能要寫好幾行程式碼，而jQuery一行程式碼就搞定了，再比如要將一個表格的隔行變色，jQuery也是一行程式碼搞定。
鏈式表示式。jQuery的鏈式操作可以把多個操作寫在一行程式碼裡，更加簡潔。
事件、樣式、動畫支援。jQuery還簡化了js操作css的程式碼，並且程式碼的可讀性也比js要強。
Ajax操作支援。jQuery簡化了AJAX操作，後端只需返回一個JSON格式的字串就能完成與前端的通訊。
跨瀏覽器相容。jQuery基本相容了現在主流的瀏覽器，不用再為瀏覽器的相容問題而傷透腦筋。
外掛擴充套件開發。jQuery有著豐富的第三方的外掛，例如：樹形選單、日期控制元件、圖片切換外掛、彈出視窗等等基本前端頁面上的元件都有對應外掛，並且用jQuery外掛做出來的效果很炫，並且可以根據自己需要去改寫和封裝外掛，簡單實用。

jQuery內容：

選擇器
篩選器
樣式操作
文字操作
屬性操作
文件處理
事件
動畫效果
外掛
each、data、Ajax

下載連結：jQuery官網

中文文件：jQuery AP中文文件

jQuery版本

1.x：相容IE678,使用最為廣泛的，官方只做BUG維護，功能不再新增。因此一般專案來說，使用1.x版本就可以了，最終版本：1.12.4 (2016年5月20日)
2.x：不相容IE678，很少有人使用，官方只做BUG維護，功能不再新增。如果不考慮相容低版本的瀏覽器可以使用2.x，最終版本：2.2.4 (2016年5月20日)
3.x：不相容IE678，只支援最新的瀏覽器。需要注意的是很多老的jQuery外掛不支援3.x版。目前該版本是官方主要更新維護的版本。

維護IE678是一件讓人頭疼的事情，一般我們都會額外載入一個CSS和JS單獨處理。值得慶幸的是使用這些瀏覽器的人也逐步減少，PC端使用者已經逐步被移動端使用者所取代，如果沒有特殊要求的話，一般都會選擇放棄對678的支援。

jQuery物件

jQuery物件就是通過jQuery包裝DOM物件後產生的物件。jQuery物件是 jQuery獨有的。如果一個物件是 jQuery物件，那麼它就可以使用jQuery裡的方法：例如$(“#i1”).html()。

$("#i1").html()的意思是：獲取id值為 i1的元素的html程式碼。其中 html()是jQuery裡的方法。

相當於： document.getElementById("i1").innerHTML;

雖然 jQuery物件是包裝 DOM物件後產生的，但是 jQuery物件無法使用 DOM物件的任何方法，同理 DOM物件也沒不能使用 jQuery裡的方法。

一個約定，我們在宣告一個jQuery物件變數的時候在變數名前面加上$：

var $variable = jQuery對像
var variable = DOM物件
$variable[0]//jQuery物件轉成DOM物件

拿上面那個例子舉例，jQuery物件和DOM物件的使用：

$("#i1").html();//jQuery物件可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM物件使用DOM的方法

jQuery基礎語法

$(selector).action()

查詢標籤

基本選擇器

id選擇器：

$("#id")

標籤選擇器：

$("tagName")

class選擇器：

$(".className")

配合使用：

$("div.c1")  // 找到有c1 class類的div標籤

所有元素選擇器：

$("*")

組合選擇器：

$("#id, .className, tagName")

層級選擇器：

x和y可以為任意選擇器

$("x y");// x的所有後代y（子子孫孫）
$("x > y");// x的所有兒子y（兒子）
$("x + y")// 找到所有緊挨在x後面的y
$("x ~ y")// x之後所有的兄弟y

基本篩選器：

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

例子：

$("div:has(h1)")// 找到所有後代中有h1標籤的div標籤
$("div:has(.c1)")// 找到所有後代中有c1樣式類的div標籤
$("li:not(.c1)")// 找到所有不包含c1樣式類的li標籤
$("li:not(:has(a))")// 找到所有後代中不含a標籤的li標籤

練習：

自定義模態框，使用jQuery實現彈出和隱藏功能。

<!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>
    .cover {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: darkgrey;
      z-index: 999;
    }
    .modal {
      width: 600px;
      height: 400px;
      background-color: white;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -300px;
      margin-top: -200px;
      z-index: 1000;
    }
    .hide {
      display: none;
    }
  </style>
</head>
<body>
<input type="button" value="彈" id="i0">

<div class="cover hide"></div>
<div class="modal hide">
  <label for="i1">姓名</label>
  <input id="i1" type="text">
   <label for="i2">愛好</label>
  <input id="i2" type="text">
  <input type="button" id="i3" value="關閉">
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  var tButton = $("#i0")[0];
  tButton.onclick=function () {
    var coverEle = $(".cover")[0];
    var modalEle = $(".modal")[0];

    $(coverEle).removeClass("hide");
    $(modalEle).removeClass("hide");
  };

  var cButton = $("#i3")[0];
  cButton.onclick=function () {
    var coverEle = $(".cover")[0];
    var modalEle = $(".modal")[0];

    $(coverEle).addClass("hide");
    $(modalEle).addClass("hide");
  }
</script>
</body>
</html>

jQuery版自定義模態框

屬性選擇器：

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

例子：

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox型別的input標籤
$("input[type!='text']");// 取到型別不是text的input標籤

表單篩選器：

:text
:password
:file

:radio
:checkbox

:submit
:reset
:button

例子：

$(":checkbox")  // 找到所有的checkbox

表單物件屬性:

:enabled
:disabled
:checked
:selected

例子：

找到可用的input標籤

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input標籤

找到被選中的option：

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">廣州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被選中的option

篩選器方法

下一個元素：

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

上一個元素：

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父親元素：

$("#id").parent()
$("#id").parents()  // 查詢當前元素的所有的父輩元素
$("#id").parentsUntil() // 查詢當前元素的所有的父輩元素，直到遇到匹配的那個元素為止。

兒子和兄弟元素：

$("#id").children();// 兒子們
$("#id").siblings();// 兄弟們

查詢

搜尋所有與指定表示式匹配的元素。這個函式是找出正在處理的元素的後代元素的好方法。

$("div").find("p")

等價於$("div p")

篩選

篩選出與指定表示式匹配的元素集合。這個方法用於縮小匹配的範圍。用逗號分隔多個表示式。

$("div").filter(".c1")  // 從結果集中過濾出有c1樣式類的

等價於 $("div.c1")

補充：

.first() // 獲取匹配的第一個元素
.last() // 獲取匹配的最後一個元素
.not() // 從匹配元素的集合中刪除與指定表示式匹配的元素
.has() // 保留包含特定後代的元素，去掉那些不含有指定後代的元素。
.eq() // 索引值等於指定值的元素

示例：左側選單

<!DOCTYPE html>
<html lang="en">
<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>
    .left {
      position: fixed;
      left: 0;
      top: 0;
      width: 20%;
      height: 100%;
      background-color: rgb(47, 53, 61);
    }

    .right {
      width: 80%;
      height: 100%;
    }

    .menu {
      color: white;
    }

    .title {
      text-align: center;
      padding: 10px 15px;
      border-bottom: 1px solid #23282e;
    }

    .items {
      background-color: #181c20;

    }
    .item {
      padding: 5px 10px;
      border-bottom: 1px solid #23282e;
    }

    .hide {
      display: none;
    }
  </style>
</head>
<body>

<div class="left">
  <div class="menu">
    <div class="item">
      <div class="title">選單一</div>
      <div class="items">
        <div class="item">111</div>
        <div class="item">222</div>
        <div class="item">333</div>
    </div>
    </div>
    <div class="item">
      <div class="title">選單二</div>
      <div class="items hide">
      <div class="item">111</div>
      <div class="item">222</div>
      <div class="item">333</div>
    </div>
    </div>
    <div class="item">
      <div class="title">選單三</div>
      <div class="items hide">
      <div class="item">111</div>
      <div class="item">222</div>
      <div class="item">333</div>
    </div>
    </div>
  </div>
</div>
<div class="right"></div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script>
  $(".title").click(function (){  // jQuery繫結事件
    // 隱藏所有class裡有.items的標籤
    // $(".items").addClass("hide");  //批量操作
    // $(this).next().removeClass("hide");
    
    // jQuery鏈式操作
    $(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')
  });
</script>

左側選單欄

操作標籤

樣式操作

樣式類

addClass();// 新增指定的CSS類名。
removeClass();// 移除指定的CSS類名。
hasClass();// 判斷樣式存不存在
toggleClass();// 切換CSS類名，如果有就移除，如果沒有就新增。

示例：開關燈和模態框

CSS

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

示例：

$("p").css("color", "red"); //將所有p標籤的字型設定為紅色

位置操作

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

.offset()方法允許我們檢索一個元素相對於文件（document）的當前位置。

和 .position()的差別在於： .position()是相對於相對於父級元素的位移。

示例：

<!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>
    .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>
  $("#b1").on("click", function () {
    $(".c1").offset({left: 200, top:200});
  });


  $(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
      $("#b2").removeClass("hide");
    }else {
      $("#b2").addClass("hide");
    }
  });
  $("#b2").on("click", function () {
    $(window).scrollTop(0);
  })
</script>
</body>
</html>

返回頂部示例

尺寸：

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

文字操作

HTML程式碼：

html()// 取得第一個匹配元素的html內容
html(val)// 設定所有匹配元素的html內容

文字值：

text()// 取得所有匹配元素的內容
text(val)// 設定所有匹配元素的內容

值：

val()// 取得第一個匹配元素的當前值
val(val)// 設定所有匹配元素的值
val([val1, val2])// 設定多選的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"])

示例：

獲取被選中的checkbox或radio的值：

<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">

可以使用：

$("input[name='gender']:checked").val()

<!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>

自定義登入校驗示例

屬性操作

用於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")。

<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和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不支援獲取標籤的自定義屬性。

總結一下：

對於標籤上有的能看到的屬性和自定義屬性都用attr
對於返回布林值的比如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(B)// 把A放到B的前面

移除和清空元素

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

例子：

點選按鈕在表格新增一行資料。

點選每一行的刪除按鈕刪除當前行資料。

替換

replaceWith()
replaceAll()

克隆

clone()// 引數

克隆示例：

<!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>

點選複製按鈕

事件

常用事件

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

keydown和keyup事件組合示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>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>Egon</td>
    <td>
      <select>
        <option value="1">上線</option>
        <option value="2">下線</option>
        <option value="3">停職</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Alex</td>
    <td>
      <select>
        <option value="1">上線</option>
        <option value="2">下線</option>
        <option value="3">停職</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Yuan</td>
    <td>
      <select>
        <option value="1">上線</option>
        <option value="2">下線</option>
        <option value="3">停職</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>EvaJ</td>
    <td>
      <select>
        <option value="1">上線</option>
        <option value="2">下線</option>
        <option value="3">停職</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Gold</td>
    <td>
      <select>
        <option value="1">上線</option>
        <option value="2">下線</option>
        <option value="3">停職</option>
      </select>
    </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.3.1.js"></script>
<script>

    var flag = false;
    // shift按鍵被按下的時候
    $(window).keydown(function (event) {
        console.log(event.keyCode);
        if (event.keyCode === 16){
            flag = true;
        }
    });
    // shift按鍵被抬起的時候
    $(window).keyup(function (event) {
        console.log(event.keyCode);
        if (event.keyCode === 16){
            flag = false;
        }
    });
    // select標籤的值發生變化的時候
    $("select").change(function (event) {
        // 如果shift按鍵被按下，就進入批量編輯模式
        // shift按鍵對應的code是16
        // 判斷當前select這一行是否被選中
        console.log($(this).parent().siblings().first().find(":checkbox"));
        var isChecked = $(this).parent().siblings().first().find(":checkbox").prop("checked");
        console.log(isChecked);
        if (flag && isChecked) {
            // 進入批量編輯模式
            // 1. 取到當前select選中的值
            var value = $(this).val();
            // 2. 給其他被選中行的select設定成和我一樣的值
            // 2.1 找到那些被選中行的select
            var $select = $("input:checked").parent().parent().find("select")
            // 2.2 給選中的select賦值
            $select.val(value);
        }
    });
</script>
</body>
</html>

按住shift實現批量操作

hover事件示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>蒼茫的天涯是我的哎，綿綿的青山腳下一片海！</p>

<script src="jQuery-3.3.1.js">
</script>
<script>
    $('p').hover(
        function () {
            alert('來啦，老弟')
        },
        function () {
            alert('慢走哦～')
        }
    )
</script>
</body>
</html>

hover事件

實時監聽input輸入值變化示例：

<!DOCTYPE html>
<html lang="en">
<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>實時監聽input輸入值變化</title>
</head>
<body>
<input type="text" id="i1">

<script src="jquery-3.2.1.min.js"></script>
<script>
  /*
  * oninput是HTML5的標準事件
  * 能夠檢測textarea,input:text,input:password和input:search這幾個元素的內容變化，
  * 在內容修改後立即被觸發，不像onchange事件需要失去焦點才觸發
  * oninput事件在IE9以下版本不支援，需要使用IE特有的onpropertychange事件替代
  * 使用jQuery庫的話直接使用on同時繫結這兩個事件即可。
  * */
  $("#i1").on("input propertychange", function () {
    alert($(this).val());
  })
</script>
</body>
</html>

input值變化事件

事件繫結

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

events：事件
selector: 選擇器（可選的）
function: 事件處理函式

移除事件

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

off() 方法移除用.on()繫結的事件處理程式。

events：事件
selector: 選擇器（可選的）
function: 事件處理函式

阻止後續事件執行

returnfalse;// 常見阻止表單提交等
e.preventDefault();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止預設事件</title>
</head>
<body>

<form action="">
    <button id="b1">點我</button>
</form>

<script src="jquery-3.3.1.min.js"></script>
<script>
    $("#b1").click(function (e) {
        alert(123);
        //return false;
        e.preventDefault();
    });
</script>
</body>
</html>

注意：

像click、keydown等DOM中定義的事件，我們都可以使用`.on()`方法來繫結事件，但是`hover`這種jQuery中定義的事件就不能用`.on()`方法來綁定了。

想使用事件委託的方式繫結hover事件處理函式，可以參照如下程式碼分兩步繫結事件：

$('ul').on('mouseenter', 'li', function() {//繫結滑鼠進入事件
    $(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//繫結滑鼠劃出事件
    $(this).removeClass('hover');
});

阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
</head>
<body>
<div>
    <p>
        <span>點我</span>
    </p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $("span").click(function (e) {
        alert("span");
        e.stopPropagation();
    });

    $("p").click(function () {
        alert("p");
    });
    $("div").click(function () {
        alert("div");
    })
</script>
</body>
</html>

頁面載入

當DOM載入就緒可以查詢及操縱時繫結一個要執行的函式。這是事件模組中最重要的一個函式，因為它可以極大地提高web應用程式的響應速度。

兩種寫法：

$(document).ready(function(){
// 在這裡寫你的JS程式碼...
})

簡寫：

$(function(){
// 你在這裡寫你的程式碼
})

文件載入完繫結事件，並且阻止預設事件發生：

<!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 id="myForm">
  <label for="name">姓名</label>
  <input type="text" id="name">
  <span class="error"></span>
  <label for="passwd">密碼</label>
  <input type="password" id="passwd">
  <span class="error"></span>
  <input type="submit" id="modal-submit" value="登入">
</form>

<script src="jquery-3.2.1.min.js"></script>
<script src="s7validate.js"></script>
<script>
  function myValidation() {
    // 多次用到的jQuery物件儲存到一個變數，避免重複查詢文件樹
    var $myForm = $("#myForm");
    $myForm.find(":submit").on("click", function () {
      // 定義一個標誌位，記錄表單填寫是否正常
      var flag = true;
      $myForm.find(":text, :password").each(function () {
        var val = $(this).val();
        if (val.length <= 0 ){
          var labelName = $(this).prev("label").text();
          $(this).next("span").text(labelName + "不能為空");
          flag = false;
        }
      });
      // 表單填寫有誤就會返回false，阻止submit按鈕預設的提交表單事件
      return flag;
    });
    // input輸入框獲取焦點後移除之前的錯誤提示資訊
    $myForm.find("input[type!='submit']").on("focus", function () {
      $(this).next(".error").text("");
    })
  }
  // 文件樹就緒後執行
  $(document).ready(function () {
    myValidation();
  });
</script>
</body>
</html>

登入校驗示例

與window.onload的區別

window.onload()函式有覆蓋現象，必須等待著圖片資源載入完成之後才能呼叫
jQuery的這個入口函式沒有函式覆蓋現象，文件載入完成之後就可以呼叫（建議使用此函式）

事件委託

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

示例：

表格中每一行的編輯和刪除按鈕都能觸發相應的事件。

$("table").on("click", ".delete", function () {
  // 刪除按鈕繫結的事件
})

動畫效果

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑動
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定義（瞭解即可）
animate(p,[s],[e],[fn])

自定義動畫示例：

<!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>
    div {
      position: relative;
      display: inline-block;
    }
    div>i {
      display: inline-block;
      color: red;
      position: absolute;
      right: -16px;
      top: -5px;
      opacity: 1;
    }
  </style>
</head>
<body>

<div id="d1">點贊</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
  $("#d1").on("click", function () {
    var newI = document.createElement("i");
    newI.innerText = "+1";
    $(this).append(newI);
    $(this).children("i").animate({
      opacity: 0
    }, 1000)
  })
</script>
</body>
</html>

點贊特效簡單示例

補充

each

jQuery.each(collection, callback(indexInArray, valueOfElement))：

描述：一個通用的迭代函式，它可以用來無縫迭代物件和陣列。陣列和類似陣列的物件通過一個長度屬性（如一個函式的引數物件）來迭代數字索引，從0到length - 1。其他物件通過其屬性名進行迭代。

li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//index是索引，ele是每次迴圈的具體元素。
})

輸出：

.each(function(index, Element))：

描述：遍歷一個jQuery物件，為每個匹配元素執行一個函式。

.each() 方法用來迭代jQuery物件中的每一個DOM元素。每次回撥函式執行時，會傳遞當前迴圈次數作為引數(從0開始計數)。由於回撥函式是在當前DOM元素為上下文的語境中觸發的，所以關鍵字 this 總是指向這個元素。

// 為每一個li標籤新增foo
$("li").each(function(){
  $(this).addClass("c1");
});

注意: jQuery的方法返回一個jQuery物件，遍歷jQuery集合中的元素 - 被稱為隱式迭代的過程。當這種情況發生時，它通常不需要顯式地迴圈的 .each()方法：

也就是說，上面的例子沒有必要使用each()方法，直接像下面這樣寫就可以了：

$("li").addClass("c1");  // 對所有標籤做統一操作

注意：

在遍歷過程中可以使用 returnfalse提前結束each迴圈。

終止each迴圈

return false；

伏筆...

.data()

在匹配的元素集合中的所有元素上儲存任意相關資料或返回匹配的元素集合中的第一個元素的給定名稱的資料儲存的值。

.data(key, value):

描述：在匹配的元素上儲存任意相關資料。

$("div").data("k",100);//給所有div標籤都儲存一個名為k，值為100

.data(key):

描述: 返回匹配的元素集合中的第一個元素的給定名稱的資料儲存的值—通過 .data(name, value)或 HTML5 data-*屬性設定。

$("div").data("k");//返回第一個div標籤中儲存的"k"的值

.removeData(key):

描述：移除存放在元素上的資料，不加key引數表示移除所有儲存的資料。

$("div").removeData("k");  //移除元素上存放k對應的資料

示例：

模態框編輯的資料回填表格

外掛(瞭解即可)

jQuery.extend(object)

jQuery的名稱空間下新增新的功能。多用於外掛開發者向 jQuery 中新增新函式時使用。

示例：

<script>
jQuery.extend({
  min:function(a, b){return a < b ? a : b;},
  max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
</script>

jQuery.fn.extend(object)

一個物件的內容合併到jQuery的原型，以提供新的jQuery例項方法。

<script>
  jQuery.fn.extend({
    check:function(){
      return this.each(function(){this.checked =true;});
    },
    uncheck:function(){
      return this.each(function(){this.checked =false;});
    }
  });
// jQuery物件可以使用新新增的check()方法了。
$("input[type='checkbox']").check();
</script>

單獨寫在檔案中的擴充套件：

(function(jq){
  jq.extend({
    funcName:function(){
    ...
    },
  });
})(jQuery);

例子：

自定義的jQuery登入驗證外掛

<!DOCTYPE html>
<html lang="en">
<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>
    .login-form {
      margin: 100px auto 0;
      max-width: 330px;
    }
    .login-form > div {
      margin: 15px 0;
    }
    .error {
      color: red;
    }
  </style>
</head>
<body>


<div>
  <form action="" class="login-form" novalidate>

    <div>
      <label for="username">姓名</label>
      <input id="username" type="text" name="name" required autocomplete="off">
      <span class="error"></span>
    </div>
    <div>
      <label for="passwd">密碼</label>
      <input id="passwd" type="password" name="password" required autocomplete="off">
      <span class="error"></span>
    </div>
    <div>
      <label for="mobile">手機</label>
      <input id="mobile" type="text" name="mobile" required autocomplete="off">
      <span class="error"></span>
    </div>
    <div>
      <label for="where">來自</label>
      <input id="where" type="text" name="where" autocomplete="off">
      <span class="error"></span>
    </div>
    <div>
      <input type="submit" value="登入">
    </div>

  </form>
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="validate.js"></script>
<script>
  $.validate();
</script>
</body>
</html>

HTML檔案

"use strict";
(function ($) {
  function check() {
    // 定義一個標誌位，表示驗證通過還是驗證不通過
    var flag = true;
    var errMsg;
    // 校驗規則
    $("form input[type!=':submit']").each(function () {
      var labelName = $(this).prev().text();
      var inputName = $(this).attr("name");
      var inputValue = $(this).val();
      if ($(this).attr("required")) {
        // 如果是必填項
        if (inputValue.length === 0) {
          // 值為空
          errMsg = labelName + "不能為空";
          $(this).next().text(errMsg);
          flag = false;
          return false;
        }
        // 如果是密碼型別，我們就要判斷密碼的長度是否大於6位
        if (inputName === "password") {
          // 除了上面判斷為不為空還要判斷密碼長度是否大於6位
          if (inputValue.length < 6) {
            errMsg = labelName + "必須大於6位";
            $(this).next().text(errMsg);
            flag = false;
            return false;
          }
        }
        // 如果是手機型別，我們需要判斷手機的格式是否正確
        if (inputName === "mobile") {
          // 使用正則表示式校驗inputValue是否為正確的手機號碼
          if (!/^1[345678]\d{9}$/.test(inputValue)) {
            // 不是有效的手機號碼格式
            errMsg = labelName + "格式不正確";
            $(this).next().text(errMsg);
            flag = false;
            return false;
          }
        }
      }
    });
    return flag;
  }

  function clearError(arg) {
    // 清空之前的錯誤提示
    $(arg).next().text("");
  }
  // 上面都是我定義的工具函式
  $.extend({
    validate: function () {
      $("form :submit").on("click", function () {
      return check();
    });
    $("form :input[type!='submit']").on("focus", function () {
      clearError(this);
    });
    }
  });
})(jQuery);

JS檔案

傳參版外掛：

Centos8中建立LVM精簡邏輯卷

jQuery介紹

jQuery的優勢

jQuery內容：

jQuery版本

jQuery物件

jQuery基礎語法

查詢標籤

基本選擇器

層級選擇器：

基本篩選器：

屬性選擇器：

表單篩選器：

篩選器方法

操作標籤

樣式操作

位置操作

尺寸：

文字操作

屬性操作

文件處理

事件

常用事件

事件繫結

移除事件

阻止後續事件執行

阻止事件冒泡

頁面載入

與window.onload的區別

事件委託

動畫效果

補充

each

.data()

外掛(瞭解即可)

相關推薦