Web前端學習筆記之jQuery基礎

0x0 jQuery介紹

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

0x1 jQuery的優勢

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

0x2 jQuery内容：

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

下載下傳連結：jQuery官網

中文文檔：jQuery AP中文文檔

0x3 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的支援。

0x4 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的方法

0x5 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實作彈出和隐藏功能。

Web前端學習筆記之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

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

$("input:enabled")  // 找到可用的input标簽

<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();// 兄弟們

查找元素：

$("#id").find()// 搜尋所有與指定表達式比對的元素。這個函數是找出正在處理的元素的後代元素的好方法。

補充：

.first()// 擷取比對的第一個元素
.last()// 擷取比對的最後一個元素
.not()// 從比對元素的集合中删除與指定表達式比對的元素
.has()// 保留包含特定後代的元素，去掉那些不含有指定後代的元素。

示例：左側菜單

Web前端學習筆記之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>
    .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="title">菜單一</div>
    <div class="items">
      <div class="item">111</div>
      <div class="item">222</div>
      <div class="item">333</div>
    </div>
    <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 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 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");
  });
</script>

左側菜單示例

0x6 操作标簽

樣式類

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()

是相對于相對于父級元素的位移。

Web前端學習筆記之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>
    .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的值

擷取被選中的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()

Web前端學習筆記之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>jQuery val示例</title>
</head>
<body>


<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>
</body>
</html>

jQuery val指派示例

Web前端學習筆記之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>
    .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>

示例：全選、反選、取消

添加到指定元素内部的後面

$(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()// 參數

克隆示例：

Web前端學習筆記之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>
    #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>

點選複制按鈕

0x7 事件

常用事件

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

keydown和keyup事件組合示例：

Web前端學習筆記之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>
</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.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);
    })
  });
  // 按住shift鍵，批量操作
  // 定義全局變量
  var flag = false;
  // 全局事件，監聽鍵盤shift按鍵是否被按下
  $(window).on("keydown", function (e) {
//    alert(e.keyCode);
    if (e.keyCode === 16){
      flag = true;
    }
  });
  // 全局事件,shift按鍵擡起時将全局變量置為false
  $(window).on("keyup", function (e) {
    if (e.keyCode === 16){
      flag = false;
    }
  });
  // select綁定change事件
  $("table select").on("change", function () {
    // 是否為批量操作模式
    if (flag) {
      var selectValue = $(this).val();
      // 找到所有被選中的那一行的select，選中指定值
      $("input:checked").parent().parent().find("select").val(selectValue);
    }
  })
</script>
</body>
</html>

按住shift鍵批量操作

hover事件示例：

Web前端學習筆記之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>hover示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .nav {
      height: 40px;
      width: 100%;
      background-color: #3d3d3d;
      position: fixed;
      top: 0;
    }

    .nav ul {
      list-style-type: none;
      line-height: 40px;
    }

    .nav li {
      float: left;
      padding: 0 10px;
      color: #999999;
      position: relative;
    }
    .nav li:hover {
      background-color: #0f0f0f;
      color: white;
    }

    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }

    .son {
      position: absolute;
      top: 40px;
      right: 0;
      height: 50px;
      width: 100px;
      background-color: #00a9ff;
      display: none;
    }

    .hover .son {
      display: block;
    }
  </style>
</head>
<body>
<div class="nav">
  <ul class="clearfix">
    <li>登入</li>
    <li>注冊</li>
    <li>購物車
      <p class="son hide">
        空空如也...
      </p>
    </li>
  </ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(".nav li").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);
</script>
</body>
</html>

hover事件

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

Web前端學習筆記之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>實時監聽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()

綁定的事件處理程式。

阻止後續事件執行

return false; // 常見阻止表單送出等

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

想使用事件委托的方式綁定hover事件處理函數，可以參照如下代碼分兩步綁定事件：

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

頁面載入

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

兩種寫法：

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

簡寫：

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

文檔加載完綁定事件，并且阻止預設事件發生：

Web前端學習筆記之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>
    .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>

登入校驗示例

事件委托

事件委托是通過事件冒泡的原理，利用父标簽去捕獲子标簽的事件。

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

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

0x8 動畫效果

// 基本
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])

自定義動畫示例：

Web前端學習筆記之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>
    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>

點贊特效簡單示例

0x9 補充

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");  // 對所有标簽做統一操作

在周遊過程中可以使用

return false

提前結束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);

Web前端學習筆記之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檔案

Web前端學習筆記之jQuery基礎

"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檔案

Web前端學習筆記之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>

Web前端學習筆記之jQuery基礎

"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);

Web前端學習筆記之jQuery基礎

0x0 jQuery介紹

0x1 jQuery的優勢

0x2 jQuery内容：

0x3 jQuery版本

0x4 jQuery對象

0x5 jQuery基礎文法

查找标簽

0x6 操作标簽

0x7 事件

常用事件

事件綁定

移除事件

阻止後續事件執行

頁面載入

事件委托

0x8 動畫效果

0x9 補充

each

.data()

插件(了解即可)

繼續閱讀

UVA 1401 Remember the Word

ZOJ 2748 Free Kick

CSU 1567 Reverse Rot

JAVA 系列——>開發工具IntelliJ IDEA的安裝以及配置、快捷鍵IDEA 簡介

門戶通專訪草根站長九天狼：做站貴在堅持

UVA 519 Puzzle (II)

磁盤結構及在Linux中的命名

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

jQuery練習一. 選擇器練習二. DOM操作練習三. 事件練習

struts2 +jquey uploadify3.2 實作多檔案上傳，可預覽、删除、排序

JQuery--dom捕獲html元素

CSS之折疊菜單

web開發之前後端渲染

403 Forbidden，You don't have permission to access / on this server.Forbidden

jquery_126_demo