jQuery簡介

時間 2019-11-13

標籤 jquery 簡介欄目 JQuery 简体版

原文原文鏈接

核心知識點：css

1.jQuery是什麼（一個輕量級的、兼容多瀏覽器的JavaScript庫）html

2.jQuery的優勢（輕量級、豐富的DOM選擇器、鏈式表達式、動畫樣式事件支持、兼容多瀏覽器、支持擴展開發）前端

3.引入jQuery的兩種方式jquery

　　a.本地文件<script src="jquery-3.2.1.min.js"></script>正則表達式

　　b.CDN方式<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>編程

4.選擇器後端

　　a.基本選擇器{$("#id")、$(".className")、$(".tagName")、$("*")、$("[#id],[className],[tagName]")}數組

　　b.層級選擇器{x y子子孫孫、X>y兒子選擇器、x+y毗鄰選擇器、x~y弟弟選擇器}瀏覽器

　　c.屬性選擇器{=、!=}app

5.篩選器

　　a.基本篩選器{例：first、last、even、odd、gt(index)、lt(index)、not()、has()、eq(index)、}

　　b.篩選器的方法（next() prev() parent()）

6.樣式操做

　　a.樣式類{removeClass() hasClass() toggleClass()}

　　b.css

　　c.位置{offset、position}

　　d.尺寸{}

7.文本操做

　　a.HTML代碼操做{html()、html(val)}

　　b.文本值{text()、text(val)}

　　c.值{val()、val(val)、val([val1,val2])}

8.屬性操做

　　a.用於ID或自定義屬性{attr(attrName)、arrt(attrName,attrValue)、removeAttr() }

　　b.用於checkbox和radio{prop()、removeProp()}

9.文檔處理(append() appendTo() prepend() prependTo() after() insertAfter() before() insertBefore() remove() clone() replaceWith() replaceAll() empty())

10.事件

　　a.常見事件（blur fours keydown keyup change ready）

　　b.事件綁定.on(events [,selector,] function)

　　c.事件移除.off(events [,selector,] function)

　　d.事件加$(document).ready(function(){})

　　e.阻止後續事件進行return false

11.動畫

　　a.基本 hide() show() toggle()

　　b.滑動slideDown() slideUp() slideToggle()

　　c.淡入淡出 fadeIn() fadeOut() fadeTo() fade Toggle ()

　　d.自定義animate()

12.each：遍歷

　　a.$.each(conection,function(){})

　　b.$().each(function(){})

13.data：數據存儲

　　a.$(selector).data(key,value)

　　b.$(selecter).data(kay)

　　c.$(selecter).removeData(key)

14.插件

　　a.jQuery.extend(object)

　　b.jQuery.fn.extend(object)

1、概論

1.jQuery介紹

（1）jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫；

（2）jQuery使用戶可以更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，可以極大地簡化JavaScript編程。

它的總之就是：「Write less，do more。」

2.jQuery的優點

（1）一款輕量級的JS框架。jQuery核心js文件才幾十KB，不會影響頁面加載速度。

（2）豐富的DOM選擇器，jQuery的選擇器用起來很方便。

　　好比要找到某個DOM對象的相鄰元素，JS可能要寫好幾行代碼，而jQuery一行代碼就搞定。

（3）鏈式表達式。jQuery的鏈式操做能夠把多個操做寫在一行代碼裏，更加簡潔。

（4）事件、樣式、動畫支持。jQuery還簡化了is操做css的代碼，而且代碼的可讀性也比js要強。

（5）Ajax操做支持。jQuery簡化了Ajax操做，後端只須要返回一個JSON格式的字符串就能完成與前端的通訊。

（6）跨瀏覽器兼容。jQuery基本兼容瞭如今主流的瀏覽器，不用再爲瀏覽器的兼容問題而傷透腦筋。

（7）插件擴展開發。jQuery有着豐富的第三方的插件，例如：樹形菜單、日期控件、等基本前端頁面上的組件都有對應插件，而且用jQuery插件作出來的效果很炫，而且能夠根據本身的需求去改寫和封裝插件，簡單實用。

3.jQuery對象

jQuery對象就是經過jQuery包裝DOM對象後產生的對象。

jQuery對象是jQuery獨有的。若是一個對象是jQuery對象，那麼它就可使用jQuery裏面的方法：

例如$("#i1").html()。$("#i1").html()的意思是：獲取id值爲i1的元素的html代碼。其中html（）是jQury裏的方法。至關於：document.getElementById("i1").innerHTML；

雖然jQuery對象是包裝DOM對象後產生的，可是jQuery對象沒法使用DOM對象的任何方法，同理DOM對象也不能使用jQuery裏的方法。

2、基礎知識

1.選擇器

基本選擇器
命令	功能
$("#id")	ID選擇器
$(".className")	類選擇器
$("tagName")	標籤選擇器
$("*")	全部選擇器
$("[#id\|.className\|tagName],id\|.className\|tagName]...")	組合選擇器

<!--HTML文件-->
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
</head>
<body>
    <div id="i1">id爲i1</div>
    <div class="c1">c1</div>
    <div class="c1">c1</div>
    <input type="text" value="我是你的哥">
    <p>p</p>
    <p>第二個p</p>
    <ul type="disc">
        <li>第一項</li>
        <li>第二項</li>
    </ul>
<script src="jquery-3.2.1.min.js"></script>

<!--示例-->
$("#i1")
[div#i1]0: div#i1length: 1__proto__: Object(0)

$(".c1")
(2) [div.c1, div.c1, prevObject: r.fn.init(1)]

$("p")
(2) [p, p, prevObject: r.fn.init(1)]

$("*")
(16) [html, head, meta, title, meta, body, div#i1, div.c1, div.c1, input, p, p, ul, li, li, script, prevObject: r.fn.init(1)]

$("#i1,p,.c1")
(5) [div#i1, div.c1, div.c1, p, p, prevObject: r.fn.init(1)]

基本選擇器示例

**層級選擇器**
命令	功能
$("x y")	後代選擇器，子子孫孫
$("x>y")	兒子選擇器
$("x+y")	毗鄰選擇器
$("x~y")	弟弟選擇器

<!--文本-->
<div id="d1">
    <p>d1的兒子p</p>
    <div id="d2">
        <p class="c1">d1的孫子p1</p>
        <p class="c2">d1的孫子p2</p>
        <p>d1的孫子p3</p>
    </div>
</div>
<!--示例-->
$("#d1 p")
(4) [p, p.c1, p.c2, p, prevObject: r.fn.init(1)]

$("#d1>p")
[p, prevObject: r.fn.init(1)]

$(".c1>p")
[prevObject: r.fn.init(1)]

$(".c1~p")
(2) [p.c2, p, prevObject: r.fn.init(1)]

層級選擇器示例

**屬性選擇器**
命令	功能
[attribute=value]	屬性等於
[attribute!=value]	屬性不等於

<!--文本-->
<input type="text">
<input type="checkbox">
<input type="button" value="確認">
<!--示例-->
$("input[type='text']")
[input, prevObject: r.fn.init(1)]

$("input[type='checkbox']")
[input, prevObject: r.fn.init(1)]

$("input[type!='checkbox']")
(2) [input, input, prevObject: r.fn.init(1)]

屬性選擇器

補充：表單的屬性（input text password radio checkbox submit image reset button file）;

　　表單對象的屬性（enabled disabled chacked selected）

2.篩選器

**基本篩選器**
命令	功能
:first	第一個
:eq(index)	索引等於index的那個元素
:last	最後一個
:even	匹配全部索引值爲偶數的元素，從0開始計數
:odd	匹配全部索引值爲奇數的元素，從0開始計數
:gt(index)	匹配全部大於給定索引值的元素
:lt(index)	匹配全部小於給定索引值得元素
:not(選擇器)	移除全部知足not條件的標籤
:has(選擇器)	選取全部包含一個或多個標籤在其內的標籤（指的是從後代元素找）

<!--文本-->
<input type="text" class="c1">
<input type="checkbox" class="c2">
<input type="button" value="確認" class="c3">

<!--示例-->
$("input")
(3) [input.c1, input.c2, input.c3, prevObject: r.fn.init(1)]0: input.c11: input.c22: input.c3length: 3prevObject: [document]__proto__: Object(0)

$("input:first")
[input.c1, prevObject: r.fn.init(1)]

$("input:eq(2)")
[input.c3, prevObject: r.fn.init(1)]

$("input:last")
[input.c3, prevObject: r.fn.init(1)]

$("input:even")
(2) [input.c1, input.c3, prevObject: r.fn.init(1)]

$("input:odd")
[input.c2, prevObject: r.fn.init(1)]

$("input:gt(1)")
[input.c3, prevObject: r.fn.init(1)]

$("input:lt(1)")
[input.c1, prevObject: r.fn.init(1)]

$("input:not(.c2)") <!--input標籤中不含c2類-->
(2) [input.c1, input.c3, prevObject: r.fn.init(1)]

<!--文本2-->
<div class="c5" id="d6">
    我是誰
</div>
<div class="c5" id="d7">
    登錄：<input type="text">
</div>

<!--示例2-->
$(".c5:has(input)")
[div#d7.c5, prevObject: r.fn.init(1)]
0:
div#d7.c5
length:
1
<!--has是多層過濾，上例中的意思是類爲c5且裏面有input標籤-->

基本篩選器

注意：

這裏的has和not不是簡單的有和沒有的意思。
：not和：has一般用.not()和.has()代替。
$("div:has(.c1)")中的：has(.c1)等價於$("div .c1")，也就是後代裏面有c1的div標籤。

**篩選器方法**
方法	解釋
next()	下一個元素
nextAll()	同一級下面全部元素
nextUntil(元素選擇器)	同一級下面全部元素到那個標籤元素爲止，不包含截至元素
prev()	上一個元素
prevAll()	同一級上面全部元素
prevUntil	同一級上面全部元素到那個標籤元素爲止，不包含截至元素
parent()	父親元素
parents()	全部的父親元素
parentsUntil()	全部父元素截止到
children()	兒子們，下一級的全部其它元素
siblings()	兄弟們，同一級的全部其它元素
find()	搜索全部與指定表達式匹配的元素，能夠找出正在處理元素的後代元素
.first()	獲取匹配的第一個元素
.last()	獲取匹配的最後一個元素
.not()	從匹配元素中刪除與指定表達式匹配的元素
.has()	保留包含特定後代的元素，去掉那些不包含指定後代的元素

示例：

<!--文本-->
<div class="c1">趙爺爺
    <div class="c11">趙爸爸
        <div class="c111">趙大孫</div>
        <div class="c112">趙二孫</div>
    </div>
    <div class="c12">趙二爸</div>
</div>
<div class="c2">李爺爺</div>
<div class="c3">孫爺爺</div>

<!--next()-->
$(".c1").next()
[div.c2, prevObject: r.fn.init(1)]
$(".c1").next().next()
[div.c3, prevObject: r.fn.init(1)]

<!--nextAll()-->
$(".c1").nextAll()
(2) [div.c2, div.c3, prevObject: r.fn.init(1)]

<!--nextUntil()-->
$(".c1").nextUntil(".c3")
[div.c2, prevObject: r.fn.init(1)]

<!--prev()-->
$(".c3").prev()
[div.c2, prevObject: r.fn.init(1)]
$(".c3").prev().prev()
[div.c1, prevObject: r.fn.init(1)]

<!--prevAll()-->
$(".c3").prevAll()
(5) [div.c2, div.c1, p#p3, p#p2, p#p1, prevObject: r.fn.init(1)]

<!--prevUntil()-->
$(".c3").prevUntil(".c1")
[div.c2, prevObject: r.fn.init(1)]

<!--parent()-->
$(".c111").parent()
[div.c11, prevObject: r.fn.init(1)]
$(".c111").parent().parent()
[div.c1, prevObject: r.fn.init(1)]

<!--parents()-->
$(".c111").parents()
(4) [div.c11, div.c1, body, html, prevObject: r.fn.init(1)]

<!--parentsUntil()-->
$(".c111").parentsUntil(".c1")
[div.c11, prevObject: r.fn.init(1)]

<!--children()-->
$(".c11").children()
(2) [div.c111, div.c112, prevObject: r.fn.init(1)]
$(".c1").children()
(2) [div.c11, div.c12, prevObject: r.fn.init(1)]

<!--siblings()-->
$(".c11").siblings()
[div.c12, prevObject: r.fn.init(1)]
$(".c1").siblings()
(5) [p#p1, p#p2, p#p3, div.c2, div.c3, prevObject: r.fn.init(1)]

<!--更改文本-->
<div class="c1">趙爺爺
    <div class="c11">趙爸爸
        <div class="c111">趙大孫</div>
        <div class="c112">趙二孫</div>
    </div>
    <div class="c12">趙二爸</div>
</div>
<div class="c2">李爺爺
    <div class="c11">李爸爸</div>
</div>
<div class="c3">孫爺爺</div>
<!--find()-->
$(".c1").find(".c11")
[div.c11, prevObject: r.fn.init(1)]

<!--first()-->
$(".c1").children().first()
[div.c11, prevObject: r.fn.init(2)]

<!--last()-->
$(".c1").children().last()
[div.c12, prevObject: r.fn.init(2)]

<!--not()-->
$(".c1").children().not(".c12")  <!--結果不要c12-->
[div.c11, prevObject: r.fn.init(2)]

<!--has()-->
$(".c1").children().has(".c111")  <!--後代中有c111的-->
[div.c11, prevObject: r.fn.init(2)]

篩選器方法示例

3.樣式操做

（1）樣式類

**樣式類**
命令	功能
addClass()	添加指定的CSS類名
removeClass()	移除指定的CSS類名
hasClass()	判斷樣式是否存在
toggleClass()	切換CSS類名，若是有就移除，若是沒有就添加

<!--文本-->
<input type="text" class="c1 c2 c3" id="d8">
<!--示例-->
$("#d8")
[input#d8.c1.c2.c3]
$("#d8")[0]
<input type="text" class="c1 c2 c3" id="d8">
$("#d8").addClass("c4")
[input#d8.c1.c2.c3.c4]
$("#d8").removeClass("c4")
[input#d8.c1.c2.c3]
$("#d8").toggleClass("c1")
[input#d8.c2.c3]

樣式類操做示例

（2）CSS

可使用jQuery調樣式

$("div").css("color","red")  //設置字體的顏色

（3）位置

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>返回首部</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
      <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 () {
      //當向下滾動超過100px，就把右下角那個返回頂部的按鈕顯示出來
    if ($(window).scrollTop() > 100) {
      $("#b2").removeClass("hide");
    }else {
        //不然就隱藏
      $("#b2").addClass("hide");
    }
  });
  $("#b2").on("click", function () {
    $(window).scrollTop(0);
  })
</script>
</body>
</html>

返回首部示例

（4）尺寸

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

<!--文本-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <style>
        .c1 {
            background-color: red;
            height: 200px;
            width: 400px;
            padding: 10px;
            margin: 20px;
            border: 5px solid black;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<script src="jquery-3.2.1.min.js"></script>
</body>
</html>


<!--操做-->
$(".c1").height()
200
$(".c1").width()
400
$(".c1").innerWidth()
420
$(".c1").outerWidth()
430
$(".c1").innerHeight()
220
$(".c1").outerHeight()
230

尺寸示例

4.文本操做

（1）HTML代碼

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

$("#d1").html()
"
    div
    <p>div中的p</p>
"
$("#d1").html("<span>我是誰</span>")
[div#d1]

html()示例

（2）文本值

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

$("#d1").text()
"我是誰"
$("#d1").text("哈哈哈")
[div#d1]

text()示例

（3）值

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

<!--文本-->
<label for="s1">城市</label>
<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">廣州市</option>
  <option value="shenzhen">深圳市</option>
</select>
<hr>
<label for="s2">愛好</label>
<select id="s2" multiple="multiple">
  <option value="basketball" selected>籃球</option>
  <option value="football">足球</option>
  <option value="doublecolorball" selected>雙色球</option>
</select>

<script src="jquery-3.2.1.min.js"></script>
<script>
  // 單選下拉框
  $("#s1").val("shanghai");
  // 多選下拉框
   $("#s2").val(["basketball", "football"]);
</script>

<!--測試-->
$("#s1").val()
"shanghai"
$("#s1").val("beijing")
[select#s1]
$("#s2").val(["football","basketball"])
[select#s2]

<--文本2-->
<input type="checkbox" name="hobby" value="basketball">籃球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="pingpeng">乒乓球

<!-$("input[name='hobby']").val(['football','pingpeng'])
(3) [input, input, input, prevObject: r.fn.init(1)]-測試-->

賦值示例

<!--
效果：
1.點擊提交，若是輸入是空會在後面顯示，
2.當失去焦點，也會進行斷定
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
</head>
<body>
<form>
    <div>
        <label for="input-name">用戶</label>
        <input type="text" id="input-name" name="password">
        <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="jquery-3.2.1.min.js"></script>
<script>
    //提交綁定的事件
    $("#btn").click(function () {
        var username = $("#input-name").val();
        var password = $("#input-password").val();
//獲取input框的值，根據其長度來判斷其是否爲空
        if (username.length === 0) {
            //若是爲空，在後面顯示文本內容
            $("#input-name").siblings(".error").text("用戶不能爲空");
        }
        if (password.length === 0) {
            $("#input-password").siblings(".error").text("密碼不能爲空")
        }
    });
    //當失去焦點以後，會觸發如下事件
    $("#input-name").on("blur", function () {
        var username = $("#input-name").val();
        if (username.length === 0) {
            $("#input-name").siblings(".error").text("用戶不能爲空");
        }
    })
    $("#input-password").on("blur", function () {
        var username = $("#input-password").val();
        if (username.length === 0) {
            $("#input-password").siblings(".error").text("密碼不能爲空");
        }
    })
</script>
</body>
</html>

自動登錄示例

<!--代碼-->
<div id="divTest" value='2'>
    這是div的內容！
    <label id="lblText">
      這是label的內容！
    </label>
    <div id="divTest2">
      第二個div內容！
    </div>
  </div>
  <select id="selectVal">
     <option value="1" selected="selected">1</option>
     <option value="2" >2</option>
   </select>
  <input type="hidden" id="hidVal" value="1"/>
<script src="../jquery-3.2.1.min.js"></script>

<!--測試-->
$("#divTest").text()
"
    這是div的內容！
    
      這是label的內容！
    
    
      第二個div內容！
    
  "
<!--有結果-->
$("#divTest").html()
"
    這是div的內容！
    <label id="lblText">
      這是label的內容！
    </label>
    <div id="divTest2">
      第二個div內容！
    </div>
  "
$("#divTest").val()
""
$("#divTest2").val()
""
<!--對於非表單，val不能使用-->
<!--對於表單來講-->
$("#selectVal").text()
"
     1
     2
   "
<!--返回文本-->
$("#selectVal").html()
"
     <option value="1" selected="selected">1</option>
     <option value="2">2</option>
   "
<!--返回代碼-->
$("#selectVal").val()
"2"
<!--返回當前值或者第一個匹配值-->
<!--
總結：
html()、text()、val()三種方法都是用來讀取限定元素的內容，只不過html()是用來讀取元素的HTML內容，包括其HTML標籤。
text()用來讀取元素的純文本內容，包括其後代元素。
val()是用來讀取表單元素的「value」值。
val()只能用在select、input等上面，而html()和text()不能用在input上。
-->

val()、text()和html()區分

5.屬性操做

用於ID等或自定義的屬性：

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

$("#d1")
[div#d1]
$("#d1").attr('like')
"girl"
$("#d1").attr('like','boy')
[div#d1]
$("#d1").attr('like')
"boy"

屬性操做

用於checkbox和radio：

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

$("input[value='2']").prop("checked")
false
$("input[value='11']").prop("checked",true)
[input, prevObject: r.fn.init(1)]

屬性操做2

6.文檔處理

（1）添加到指定元素內部的後面

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

<!--文本-->
<ul>
    <li>222</li>
    <li>333</li>
</ul>

<!--操做-->
var liEle = document.createElement("li")
$(liEle).text("444")
$("ul").append(liEle)

append示例

<!--文本-->
<P id="d1">one</P>

<!--操做-->
$("<b>TWO</b>").appendTo("p")

appendTo示例

（2）添加到指定元素內部的前面

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

<!--文本-->
<ul>
    <li>222</li>
    <li>333</li>
</ul>

<!--操做-->
var liEle = document.createElement("li")
$(liEle).text("111")
$("ul").prepend(liEle)

prepend示例

<!--文本-->
<P id="d1">one</P>

<!--操做-->
$("<b>ZERO</b>").prependTo("p")

prependTo

（3）添加到指定元素外部的後面

$(A).after(B)：把B放在A的後面
$(A).insertBefore(B)：把A放在B的後面

<!--文本-->
<P id="d1">one</P>

<!--操做-->
var pEle = document.createElement("p")
$(pEle).text("two")
$("#d1").after(pEle)

after示例

（4）添加到指定元素外部的前面

$(A).before(B)：把B放在A的前面
$(A).insertBefore(B)：把A放在B的前面

<!--文本-->
<P id="d1">one</P>

<!--操做-->
var pEle = document.createElement("p")
$(pEle).text("zero")
$("#d1").before(pEle)

before示例

（5）移除和清空元素

remove()：從DOM中刪除全部匹配的元素
empty()：刪除匹配的元素集合中全部的子節點

（6）替換

replaceWith()
replaceAll()

$("p").replaceWith("<i>ONE</i>")
$("<i>ONE</i>").replaceAll("p")

replaceWith()和replaceAll()做用相同，均可以用指定的HTML內同替換被選的元素。

差別在於語法：內容和選擇器的位置的不一樣，同時replaceWith()可以使用函數進行替換。

（7）克隆

clone()

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>克隆示例</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <style>
        .c1 {
            background-color: deeppink;
            padding: 20px;
            color: white;
            margin: 5px;
            border: none;
        }
    </style>
</head>
<body>

<button class="c1">一到滿級，刀刀暴擊</button>

<script src="../jquery-3.2.1.min.js"></script>
<script>
    $(".c1").on("click",function () {
        $(this).clone(true).insertAfter(this);
    })
</script>
</body>
</html>

克隆示例

3、事件

1.經常使用事件

click()：當點擊元素時會觸發click事件
hover()：
blur()：當元素失去焦點（blur）觸發
focus()：當元素得到焦點時（focus）觸發
keyup()：一個按鍵按下時觸發
keydown()：一個按鍵鬆開時觸發
change()：當元素的值發生改變，會發生change事件，該事件僅適用於文本域

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <script src="../jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("input").focus(function () {
                $("input").css("background-color", "#FFFFCC");
            });
            $("input").blur(function () {
                $("input").css("background-color", "#D6D6FF");
            });
//            上方綁定事件，下面可以直接進行觸發
            $("#btn1").click(function () {
                $("input").focus();
            });
            $("#btn2").click(function () {
                $("input").blur();
            });
        });
    </script>
</head>
<body>
Enter your name: <input type="text"/>
<p>請在上面的輸入域中點擊，使其得到焦點，而後在輸入域外面點擊，使其失去焦點。</p>
<p>
    <button id="btn1">觸發輸入域的 focus 事件</button>
</p>
<p>
    <button id="btn2">觸發輸入域的 blur 事件</button>
</p>
</body>
</html>

focus和blur示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>按鍵示例</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
</head>
<body>
<table border="2" width="200px">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>性別</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td><input type="checkbox" id="d1" class="c1"></td>
        <td>科比</td>
        <td>
            <select>
                <option value="1">上線</option>
                <option value="2">下線</option>
                <option value="3">停職</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" id="d2" class="c1"></td>
        <td>毛線</td>
        <td>
            <select>
                <option value="1">上線</option>
                <option value="2">下線</option>
                <option value="3">停職</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" id="d3" class="c1"></td>
        <td>小鳥</td>
        <td>
            <select>
                <option value="1">上線</option>
                <option value="2">下線</option>
                <option value="3">停職</option>
            </select>
        </td>
    </tr>
    </tbody>
</table>
<hr>
<input type="button" id="b1" value="全選">
<input type="button" id="b3" value="反選">
<input type="button" id="b2" value="取消">
<script src="../jquery-3.2.1.min.js"></script>
<script>
      // 全選
  $("#b1").on("click", function () {
    $(":checkbox").prop("checked", true);
  });
  // 取消
  $("#b2").on("click", function () {
    $(":checkbox").prop("checked", false);
  });
  // 反選
  $("#b3").on("click", function () {
    $(":checkbox").each(function () {
      var flag = $(this).prop("checked");
      $(this).prop("checked", !flag);
    })
  });
//按住shelf，批量操做
  var flag;
  //1.搞清楚事件由什麼觸發  ——》select的change觸發
    //2.根據按沒按shift鍵，作不一樣處理
    //3.如何判斷shift有沒有被按下
    //4利用標誌位
    $("select").on("change",function () {
        //全局window。綁定事件，因爲觸發keydown這個操做
        $(window).on("keydown",function () {
            if (event.keyCode === 16){
                //就執行批量操做
                flag=true;
            }
        });
        //當shift鍵擡起來的時候，讓變量失效
        $(window).on("keyup",function () {
            if (event.keyCode === 16){
                flag=true;
            }
        });
        $("select").on("change",function () {
            if (flag) {
                //1.取到當前select選中的那個值
                //拿到這個值
                var optionValue = $(this).val()
                //2.把全部選中的checkbox那一行的select設置爲指定的值
                $("input:checked").parent().parent().find("select").val(optionValue)
            }
        })
    })
</script>
</body>
</html>

按住shift鍵批量操做

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <script src="../jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("input").on("change",function () {
                $(this).css("background-color","red")
            });
        });
    </script>
</head>
<body>
請輸入：<input type="text">
</body>
</html>
<!--當向文本框中輸入文本的時背景顏色改變-->

change示例

2.事件綁定

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

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

3.移除事件

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

off()方法移除用.on()綁定的事件處理程序

4.阻止後續事件執行

return false：常見阻止表單提交

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <script src="../jquery-3.2.1.min.js"></script>
    <script>
        var one = [1,2,3,4,5];
//        each循環，return false相似break的做用
        $.each(one,function (i,v) {
            console.log(i,v);
            if (v===3){
                return false;
//                只會打印一、二、3
            }
        })
    </script>
</head>
<body>
</body>
</html>

示例

5.頁面載入（ready）

當DOM已經加載，而且頁面已經徹底呈現時，會發生ready事件。

因爲該事件在文檔就緒後發生，所以把全部其它jQuery事件和函數置於該事件中是很是好的作法。

這樣能夠極大的提升網頁的加載速度。

ready()函數僅能用於當前文檔，所以無需選擇器。

兩種寫法：

$(document).ready(function) {
//在這裏寫你的JS代碼
}

簡寫：

$(function(){
//你在這裏寫你的代碼
})

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <!--原本script是要放在下面的，由於文本須要先加載，否則script找不到對象
    可是，使用ready就可讓它放在上面-->
    <script src="../jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".btn1").click(function () {
                $("p").slideToggle();
            });
        });
    </script>
</head>
<body>
<p>準備好了嗎.</p>
<button class="btn1">NO PROBLEM</button>
</body>
</html>

頁面加載示例

6.事件委託

事件委託是經過事件冒泡地原理，利用父標籤去觸發子標籤地事件。

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

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

4、動畫效果

1.基本

hide：隱藏
show：顯示
toggle：此前隱藏就顯示，此前顯示就隱藏

語法：

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
可選參數speed規定隱藏/顯示的速度
可選參數callback是隱藏或顯示以後所執行的函數名稱

2.滑動

slideDown：滑入
slideUp：滑出
slideToggle：根據狀態取反態

語法：

$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
可選參數speed規定隱藏/顯示的速度
可選參數callback是隱藏或顯示以後所執行的函數名稱

3.淡入淡出

fadeIn：淡入
fadeOut：淡出
fadeTo：容許漸變爲給定的不透明值
fadeToggle：根據狀態取反態

語法：

$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);（speed、opacity必選）
參數解釋：
speed參數規定效果時長
callback參數是該函數完成後所執行的函數名稱
opacity透明度的值

4.自定義

animate：執行CSS自定義動畫。實質是從一個狀態到另外一個狀態。

語法：

$(selector).animate(styles,speed,easing,callback)
styles：必須，規定產生動畫效果的CSS樣式和值
speed：可選，規定動畫速度
easing：可選，規定在不一樣的動畫中設置動畫速度的easing函數。
callback：可選，動畫執行完以後要執行的函數

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>動畫效果</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <style>
        img {
            margin-left: 400px;
            height: 300px;
            position: relative;
        }
    </style>
</head>
<body>
<img id="d1" src="http://www.iyi8.com/uploadfile/2017/0409/20170409111824476.jpg">
<hr>
<input type="button" value="再見" id="d2"></input>
<input type="button" value="回來" id="d3"></input>
<input type="button" value="左移" id="d4"></input>
<input type="button" value="右移" id="d5"></input>

<script src="../jquery-3.2.1.min.js"></script>
<script>
    $("#d2").on("click",function () {
        $("img").fadeOut(2000)
    } );
    $("#d3").on("click",function () {
        $("img").fadeIn(2000)
    } );
     $("#d4").on("click",function () {
         $("#d1").animate({
             left:"-50px"
         },1000)
     })
    $("#d5").on("click",function () {
         $("#d1").animate({
             left:"+50px"
         },1000)
     })
</script>
</body>
</html>

基本動畫示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>點贊動畫示例</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <style>
        div {
            /*相對定位*/
            position: relative;
            display: inline-block;
        }
        div>i {
            /*塊級標籤設置爲內聯標籤*/
            display: inline-block;
            color: red;
            /*絕對定位*/
            position: absolute;
            right: -16px;
            top:-5px;
            /*透明度，爲1表明徹底顯示*/
            opacity: 1;
        }
    </style>
</head>
<body>
<div id="d1">贊</div>
<script src="../jquery-3.2.1.min.js"></script>
<script>
    $("#d1").on("click",function () {
        //每次點擊，建立一個i標籤，<i>斜體</i>
        var newI = document.createElement("i");
        //內容賦值爲+1
        newI.innerText="+1";
        //將這個內容加載後面
        $(this).append(newI);

        $(this).children("i").animate({
            opacity:0
        },1000)
    })
</script>
</body>
</html>

點贊示例

5、補充知識

1.each

each在jQuery中相似於for循環，起到遍歷的做用。主要有兩種用法：

（1）jQuery.each(collection,callback(indexIinArray,valueofElement)):

描述：一個通用的迭代函數，它能夠用來無縫迭代對象和數組。數組和相似數組的對象經過一個長度屬性來迭代數字索引，從0到length-1.其它對象經過屬性名進行迭代。

li = [1,2,3,4,5]
$.each(li,function(i,v){
    console.log(i,v);  //index是索引，else
})
0 1
1 2
2 3
3 4
4 5

（2）.each(function(index,Element)):

描述：遍歷一個jQuery對象，爲每一個匹配元素執行一個函數。

.each()方法用來迭代jQuery對象中的每個元素。每次回調函數執行時，會傳遞當前循環次數做爲參數（從0開始計數）。

因爲回調函數是當前DOM元素爲上下文的語境中觸發的，因此關鍵字this老是指向這個元素。

// 爲每個li標籤添加foo
$("li").each(function(){
  $(this).addClass("c1");
});

注意：jQuery的方法返回一個jQuery對象，遍歷jQuery集合中的元素，被稱爲隱式迭代的過程，這種狀況發生時，它一般不須要顯示地循環.each()方法：

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

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

注意：

在遍歷過程當中可使用return false提早結束each循環。

$.each(li,function(i,v){
    if (i===3){
        return false}  //跳出循環
    console.log(i,v)
})
0 1
1 2
2 3

順便演示return結束函數地功能：

$.each(li,function(i,v){
    if (i===3){
        return }  //只是結束當前函數
    console.log(i,v)
})
0 1
1 2
2 3
4 5

2.data

在匹配地元素集合中的全部元素上存儲任意相關數據或返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。

.data(key,value):

描述：在匹配的元素上存儲任意相關數據

$("div").data("k",100);//給全部div標籤都保存一個名爲k，值爲100

.data(key):

描述：返回匹配的元素集合中的一個元素的給定名稱的數據存儲的值——經過.data(name,value)或HTML5 data-*屬性設置

$("#d1").data("k")  //返回結果100

.removeData(key):

描述：移除存放在元素上的數據，不加key參數表示移除全部數據的數據

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

3.插件

插件通常有兩種，一種直接面向jQuery，一種面向jQuery對象。

（1）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>

（2）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="validate3.js"></script>
<script>
  $.validate({"name":{"required": true}, "password": {"required": true, "minLength": 8}, "mobile": {"required": true}});
</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文件

傳參版

<!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="validate3.js"></script>
<script>
  $.validate({"name":{"required": true}, "password": {"required": true, "minLength": 8}, "mobile": {"required": true}});
</script>
</body>
</html>

HTML文件

"use strict";
(function ($) {
  function check(arg) {
    // 定義一個標誌位，表示驗證經過仍是驗證不經過
    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 (arg[inputName].required) {
        // 若是是必填項
        if (inputValue.length === 0) {
          // 值爲空
          errMsg = labelName + "不能爲空";
          $(this).next().text(errMsg);
          flag = false;
          return false;
        }
        // 若是是密碼類型，咱們就要判斷密碼的長度是否大於6位
        if (inputName === "password") {
          // 除了上面判斷爲不爲空還要判斷密碼長度是否大於6位
          if (inputValue.length < arg[inputName].minLength) {
            errMsg = labelName + "必須大於"+arg[inputName].minLength+"位";
            $(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 (arg) {
      $("form :submit").on("click", function () {
      return check(arg);
    });
    $("form :input[type!='submit']").on("focus", function () {
      clearError(this);
    });
    }
  });
})(jQuery);

JS文件

綜合示例：

示例1：全選、反選（使用Jquery編寫）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>做業</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">

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


<table border="2" width="200px">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>性別</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td><input type="checkbox"  id="d1" class="c1"></td>
        <td>科比</td>
        <td>男</td>
    </tr>
    <tr>
        <td><input type="checkbox"  id="d2" class="c1"></td>
        <td>毛線</td>
        <td>男</td>
    </tr>
    <tr>
        <td><input type="checkbox" id="d3" class="c1"></td>
        <td>小鳥</td>
        <td>男</td>
    </tr>
    </tbody>
</table>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        //事件綁定，當clieck點擊事件的時候，全選
        $("#b1").on("click",function () {
            $("input:checkbox").prop("checked",true);
        });

        //先找出全部的checkbox，一個一個去判斷
        $("#b2").on("click",function () {
            var $checkboxs = $(":checkbox");
            //each迭代
            $.each($checkboxs,function () {
               if ($(this).prop("checked")){
                   $(this).prop("checked",false);
               }else {
//                   修改屬性
                   $(this).prop("checked",true);
               }
            })
        })

        $("#b3").on("click",function () {
//            將全部的屬性改成false
            $("input:checkbox").prop("checked",false);
        })
    </script>
</body>
</html>

示例1

1. 【jQuery】-----jQuery簡介（一）
2. jQuery（1）jQuery簡介
3. JQuery簡介
4. jquery簡介
5. jQuery簡介
6. jquery treeview 簡介
7. JQuery——Ajax簡介
8. jQuery 簡介
9. 15、jQuery簡介
10. JQuery複習之JQuery簡介
更多相關文章...
• jQuery Mobile 簡介 - jQuery Mobile 教程
• Scala 簡介 - Scala教程
• Github 簡明教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

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