jQuery

目錄

jQuery

img

jQuery封裝了JS程式碼，使JS的編寫更加簡單，類似python的模組，在前端中叫「類庫」，同時也兼容多個瀏覽器，提供了更多的功能，寫的更少，功能卻更多(write less do more)

官網下載與安裝

看到下載安裝的小夥伴不要害怕，jQuery的下載與安裝及其簡單，安裝的同時不影響你開法拉利，下面一個小demo你就明白~

# 本地版
'''
1. 打開第一個jQuery官網
2.點擊Downloading jQuery
3.Download the compressed, production jQuery 3.6.0推薦下載壓縮版本，載入比較快
4.通過點擊打開，複製裡面的內容保存到JS文件中
5.通過script標籤的src引入文件
'''

# CDN版（CDN：Content Delivery Network，內容分發網路）
'''
如果能保持電腦一直有網路，可以選擇這個版本
1.打開bootcdn://www.bootcdn.cn/jquery/3.4.1/
2.選擇3.4左右版本的jQuery
3.//cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js
4.3中給大家放好URL了，複製
5.通過script標籤引入

'''

# 最終引入
<script src="jQuery/jQuery3.4.js"></script> # 本地
<script src="//cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> # CDN

jQuery簡介

  1. jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。
  2. jQuery使用戶能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，能夠極大地簡化JavaScript編程。它的宗旨就是：「Write less, do more.「
  3. jQuery 很容易學習。

前面總結了JS相關知識的文章，對元素進行添加，修改，獲取···操作很繁瑣，程式碼多，但是jQuery 庫可以通過一行簡單的標記被添加到網頁中

jQuery 內容

  • 選擇器
  • 篩選器
  • 樣式操作
  • 文本操作
  • 屬性操作
  • 文檔處理
  • 事件
  • 動畫效果
  • 插件
  • each、data、Ajax

jQuery語法

$符號事jQuery中的重要標識

//在JS中可以通過獲取先獲取標籤，然後去使用對應的方法，在jQuery中一樣，可以先篩選元素（標籤），然後再對該元素做出動態操作
  • 格式：$(selector).action()
  • selector：通過選擇器獲取元素
  • action：獲取元素後的動作行為

jQuery對象

JS中DOM獲取到的元素是DOM對象，那麼在jQuery中獲取到的元素屬於jQuery對象，兩者之間方法有差別，雖然 jQuery對象是包裝 DOM對象後產生的，但是 jQuery對象無法使用 DOM對象的任何方法，同理 DOM對象也沒不能使用 jQuery里的方法

對比DOM對象和jQuery對象

  • DOM對象：var variable = DOM對象
  • jQuery對象：var $variable = jQuery對象
    • 聲明jQuery對象變數時候前面加『$』
//獲取id值為d1的元素的html
jQuery: $("#d1").html()
DOM:    document.getElementById("d1").innerHTML

對象之間的轉換

  • DOM轉jQuery：$(DOM對象)
  • jQuery轉DOM：jQuery對象[索引]

Demo

var dEle = document.getElementById("d1").innerHTML
$(dEle)				//DOM轉jQuery
$("#d1")[0]			//jQuery轉DOM

選擇器

基本選擇器

CSS選擇器關鍵字 jQuery 說明
tagName $('tagName') 標籤選擇器
. $('.className') 類選擇器
# $('#id') id選擇器
* $('*') 通用選擇器

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery/jQuery3.4.js"></script>
    <script src="//cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p id="1" class="class1">1</p>
<p id="2" class="class2">2</p>
<div id="3" class="class3">3</div>
</body>
</html>

標籤選擇器

//獲取p標籤
$('p')  
//獲取div標籤
$('div')

id選擇器

//獲取id為1的元素
$('#1')

類選擇器

//獲取類名為class3的元素
$('.class3')

通用選擇器

//獲取所有元素
$('*')
//k.fn.init(11) [html, head, meta, title, script, script, body, p#1.class1, p#2.class2, div#3.class3, script, prevObject: k.fn.init(1)]

組合選擇器

a和b可以是任意選擇器

CSS選擇器關鍵字 jQuery 說明
空格 $(a b) 後代選擇器
> $(a>b) 兒子選擇器
+ $(a+b) 相鄰選擇器（緊挨著）
~ $(a~b) 弟弟選擇器（不需要緊挨著）

ps：相鄰和弟弟選擇器都是同級別的

demo

<div id="d1" class="d1">div1
<p id="p1" class="p1" >div里的p
    <br>
    <span id="s1" class="s1">div里的p中的span</span>
</p>
</div>
<div class="d2" id="d2">div2</div>

後代選擇器

//查找id='d1'，div元素的後代span元素
$('#d1 span' )

兒子選擇器

//查找div元素class=d1的兒子id=p1
$('.d1 #p1')

相鄰選擇器

//查找id=d1的div元素的相鄰元素
$('#d1+div')

弟弟選擇器

//查找id=d1的div元素的弟弟元素div
$('#d1~#d2')

屬性選擇器

CSS 屬性選擇器通過已經存在的屬性名或屬性值匹配元素;

jQuery也可以通過屬性選擇器來進行操作；

CSS選擇器關鍵字 jQuery 說明
[attr] [attr] 帶有以 attr 命名的屬性的元素
[attr=value] [attr=value] 表示帶有以 attr 命名的屬性，且屬性值為 value 的元素
[attr!=value] [attr!=value] 表示帶有以 attr 命名的屬性，且屬性值不為 value 的元素

選擇器不會可以看：(CSS快速入門（一） – HammerZe – 部落格園 (cnblogs.com))

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

基本篩選器

可以對選擇器獲取到的元素進一步篩選

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

ps:可以寫括弧內，也可以點出來

demo code

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li class='l9'>9</li>
</ul>

demo

//first
$('ul li:first()')
$('ul li:first()')[0].innerText //1
//last
$('ul li:last()')
$('ul li').last()
//eq
$('ul li:eq(1)')
//even
$('ul li:even()')
//odd
$('ul li:odd()')
//gt
$('ul li:gt(2)')
//lt
$('ul li:lt(2)')
//not
$('ul li:not(.l9)')
//has
$('ul li:has(.l9)')

練習，自定義模態框，實現彈出隱藏功能

<!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="//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版自定義模態框

表單篩選器

表單忘記了可以看俺的筆記哦：HTML表單 – HammerZe – 部落格園 (cnblogs.com)

:text      //普通文本
:password    //密文密碼
:file        //上傳文件
:radio       //選擇
:checkbox    //多選

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

可以針對錶單進行篩選

'''通過屬性選擇器可以通過屬性值來獲得元素，在表單篩選器中對此進行了簡寫'''
# 屬性篩選器獲取type=text的input元素
$('input[type=text]')

#表單篩選器獲取
$(':text')


# 表單篩選器的特例
$(':checked')  # 找checked屬性的input標籤會連同option默認的selected一起找到，但是找selected屬性的option標籤不會輸出input標籤

表單對象屬性

:enabled  //可用的
:disabled  //失效的
:checked  //勾選的（input標籤）
:selected  //選擇好的（option標籤）

篩選器方法

方法 說明
first() 獲取匹配的第一個元素
last() 獲取匹配的最後一個元素
not() 從匹配元素的集合中刪除與指定表達式匹配的元素
has() 保留包含特定後代的元素，去掉那些不含有指定後代的元素。
next() 下一個元素
nextAll() 下面所有元素
nextUntil(“元素選擇器”) 直到下面選擇器獲取的元素
prev() 上一個元素
prevAll() 上面所有元素
prevUntil(“元素選擇器”) 直到上面選擇器獲取的元素
parent() 父元素
parents() 所有父元素
parentsUntil(「元素選擇器」) 查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止
children() 該元素的子元素
siblings() 該元素的兄弟元素
find(『元素選擇器』) 查找該元素的後代元素
filter(『元素選擇器』) 篩選出與指定表達式匹配的元素集合。這個方法用於縮小匹配的範圍。用逗號分隔多個表達式

demo

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

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

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

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

//find  等價於$("div p")
$("div").find("p")

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

案例：菜單欄

<!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="//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>
左側菜單欄

樣式操作

對比DOM

DOM jQuery 說明
add(class1, class2, …) addClass() 添加指定的CSS類名
remove(class1, class2, …) removeClass() 移除指定的CSS類名
contains(class) hasClass() 判斷樣式存不存在
toggle(class, true|false) toggleClass() 切換CSS類名，如果有就移除，如果沒有就添加。 
$("p").css("color", "red"); //將所有p標籤的字體設置為紅色

位置操作

DOM操作

方法 說明
open() 打開一個新的瀏覽器窗口
alert() 顯示警告窗口
close() 關閉當前瀏覽器窗口
scrollTo() 可把內容滑動到指定坐標
scrollBy() 可將內容滑動指定的距離（相對於當前位置）
innerWidth 返回窗口的網頁顯示區域寬度
innerHeight 返回窗口的網頁顯示區域高度

jQuery

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

ps:.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()

//案例
$(window).height()
236
$(window).width()
1229

文本操作

方法括弧內沒有值就獲取，有值就設置

HTML程式碼

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

文本值

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

值

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

demo code

<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的元素的值修，元素修改，效果勾選籃球足球
$("[name='hobby']").val(['basketball', 'football']);
//設置id為s1的值，效果選擇1和2
$("#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()

屬性操作

用於ID等或自定義屬性：

attr(attrName)// 返回第一個匹配元素的屬性值      DOM:setAttribute(name,value)
attr(attrName, attrValue)// 為所有匹配元素設置一個屬性值
attr({k1: v1, k2:v2})// 為所有匹配元素設置多個屬性值
removeAttr()// 從每一個匹配的元素中刪除一個屬性

用於checkbox和radio

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

示例

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

總結：

  • 對於標籤上有的能看到的屬性和自定義屬性都用attr
  • 對於返回布爾值的比如checkbox、radio和option的是否被選中都用prop
  • 通俗理解為：attr適用於屬性為靜態的情況(不經常修改動態變化的)，而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: 事件處理函數

【待續】

Tags:

VirMach 便宜 VPS

QNews

QNews