Jquery

HammerZe發表於2022-02-15

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:https://www.bootcdn.cn/jquery/3.4.1/
2.選擇3.4左右版本的jQuery
3.https://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="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> # CDN

jQuery簡介

jQuery是一個輕量級的、相容多瀏覽器的JavaScript庫。
jQuery使使用者能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax互動，能夠極大地簡化JavaScript程式設計。它的宗旨就是：“Write less, do more.“
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="https://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="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版自定義模態框

表單篩選器

表單忘記了可以看俺的筆記哦：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="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>
左側選單欄

樣式操作

對比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值變化事件

事件繫結

jQuery物件.on( events,function(){})

events：事件
function: 事件處理函式

jQuery物件.events(function(){})

$('#d1').click(function(){alert('彈')})

移除事件

.off( events [, selector ][,function(){}])
off() 方法移除用 .on()繫結的事件處理程式。

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

【待續】

jQuery初探：自制jQuery
2018-11-28
jQuery
我的’jQuery’和jQuery
2019-02-14
jQuery
我的''jQuery''和jQuery
2018-01-22
jQuery
【Jquery】jquery 基本的動畫
2013-11-24
jQuery動畫
【Jquery】jquery 自定義動畫
2013-12-01
jQuery動畫
jQuery :not()
2018-02-01
jQuery
jQuery not()
2017-02-14
jQuery
jQuery is()
2017-02-14
jQuery
jQuery()
2017-02-13
jQuery
jQuery on()
2017-02-17
jQuery
JQuery模板外掛-jquery.tmpl
2021-09-09
jQuery
jquery列印頁面（jquery.jqprint）
2018-12-25
jQuery
jQuery入門（三）--- jQuery語法
2020-10-22
jQuery
jQuery 3教程(一)：jQuery介紹
2016-03-10
jQuery
jQuery之使用jQuery.fn.prop()替換jQuery.fn.attr()
2014-09-09
jQuery
JQuery基本知識彙總；JQuery常用方法；淺入瞭解JQuery
2018-12-18
jQuery
（jQuery） jQuery中的事件與動畫（上）
2016-09-12
jQuery事件動畫
jquery.fn.extend與jquery.extend
2013-11-20
jQuery
jQuery 1.10.0 和 jQuery 2.0.1 釋出
2013-05-27
jQuery
jQuery表單外掛jQuery.form
2010-11-17
jQueryORM
jQuery 3教程(二)：jQuery選擇器
2016-03-15
jQuery
jQuery心得2--jQuery案例剖析1
2013-03-18
jQuery
jQuery初探
2019-03-04
jQuery
jQuery碎片
2021-09-09
jQuery
JQuery動畫
2021-09-09
jQuery動畫
分解jQuery
2018-08-29
jQuery
jquery的on
2018-12-10
jQuery
jquery事件
2020-12-11
jQuery事件
jQuery Ajax
2020-09-15
jQuery
jQuery 事件
2022-07-21
jQuery事件
jQuery 尺寸
2022-07-29
jQuery
jQuery - AJAX
2018-06-21
jQuery
jQuery html
2018-06-21
jQueryHTML
jQuery prependTo()
2018-02-10
jQuery
jQuery finish()
2018-02-02
jQuery
jQuery clone()
2018-02-02
jQuery
jQuery detach()
2018-02-02
jQuery
jQuery empty()
2018-02-02
jQuery

Jquery

jQuery

官網下載與安裝

jQuery簡介

jQuery 內容

jQuery語法

jQuery物件

對比DOM物件和jQuery物件

物件之間的轉換

選擇器

基本選擇器

組合選擇器

屬性選擇器

基本篩選器

表單篩選器

表單物件屬性

篩選器方法

案例：選單欄

樣式操作

位置操作

案例：返回頂部

獲取尺寸

文字操作

HTML程式碼

文字值

值

屬性操作

文件處理

事件

事件繫結

移除事件

相關文章