概念

jQuery 是一個高效、精簡并且功能豐富的 JavaScript 工具庫。它提供的 API 易于使用且兼容眾多瀏覽器，這讓諸如 HTML 文檔遍歷和操作、事件處理、動畫和 Ajax 操作更加簡單。

jQuery其實就是一個封裝了很多方法的 JS 庫。

下面我們來說下 JavaScript 的缺點及使用 jQuery 的優(yōu)勢：

JavaScript 缺點：

1. 不能添加多個入口函數(shù)（window.onload），如果添加多個，后面的會把前面的覆蓋掉；
2. 原生 JS 的 API 名字太長，不容易記??；
3. 原生 JS 有代碼冗余；
4. 原生 JS 中有些屬性或方法有瀏覽器兼容問題；
5. 原生 JS 容錯率比較低，前面代碼出問題了會導(dǎo)致后面代碼執(zhí)行不了；

而jQuery有如下幾個優(yōu)勢：

1. 可以寫多個入口函數(shù)；
2. jQuery 的 API 名字容易記住；
3. jQuery 代碼簡潔（隱式迭代）；
4. jQuery 解決了瀏覽器兼容問題；
5. jQuery 容錯率較高；

各版本的區(qū)別

目前，jQuery 有三個版本，分別為 1.x版、2.x版、3.x版。

這三個版本區(qū)別如下：

1. 1.x：兼容老瀏覽器，例如：IE6、7、8，已停止更新，最終版本：1.12.4；
2. 2.x：不兼容老瀏覽器，已停止更新，最終版本：2.2.4；
3. 3.x：不兼容老瀏覽器，目前更新中；

入口函數(shù)

jQuery的入口函數(shù)寫法有如下兩種：

// 1. 第一種
$(document).ready(function () {})

// 2. 第二種
$(function(){})

jQuery 入口函數(shù)和 window.onload 入口函數(shù)的區(qū)別：

1. window.onload 入口函數(shù)不能寫多個，但 jQuery 入口函數(shù)可以寫多個；
2. 執(zhí)行順序：jQuery 入口函數(shù)要比 window.onload 快。
   • jQuery 入口函數(shù)要等待頁面上 DOM 樹加載完后執(zhí)行
   • window.onload 要等待頁面上所有的資源都加載完畢后執(zhí)行

DOM對象與jQuery對象

DOM 對象：

1. 使用原生 JS 獲取到的元素就是 JS 對象（DOM對象）；
2. 特點：只能調(diào)用 DOM 方法或?qū)傩?，不能調(diào)用 jQuery 的屬性或方法；

jQuery 對象：

1. 使用 jQuery 的方式獲取到的元素就是 jQuery 對象；
2. 特點：只能調(diào)用 jQuery 的方法或?qū)傩裕荒苷{(diào)用原生 JS DOM 對象的屬性或方法；
3. jQuery 對象是一個偽數(shù)組；

那么 DOM 對象與 jQuery 對象之間如何相互轉(zhuǎn)換呢？
DOM 對象轉(zhuǎn)換成 jQuery 對象：直接使用 $

$(function () {
  var div = document.getElementById('div')
  console.log(div)    // <div id="div"></div>

  var $div = $(div)
  console.log($div)    // S.fn.init [div#div]
})

jQuery 對象轉(zhuǎn)換成 DOM 對象有如下兩種方法：

1. 使用下標(biāo)來取

$(function () {
  var $div = $('div')
  console.log($div);    // S.fn.init [div#div, prevObject: S.fn.init(1)]
  
  var domDiv = $div[0]
  console.log(domDiv);    // <div id="div"></div>
})

2. 使用 jQuery 的 get() 方法

$(function () {
  var $div = $('div')
  console.log($div);    // S.fn.init [div#div, prevObject: S.fn.init(1)]
  
  var domDiv = $div.get(0)
  console.log(domDiv);    // <div id="div"></div>
})

$符號的實質(zhì)

$ 其實就是一個函數(shù)，用 $ 的時候，要跟小括號。括號里的參數(shù)不同，功能就不同，有以下三種用法：

1. 參數(shù)是一個 function，入口函數(shù)；
2. $(domobj)，把 DOM 對象轉(zhuǎn)換成 jQuery 對象；
3. 參數(shù)是一個字符串，用來找對象；

選擇器

jQuery 選擇器返回的是 jQuery 對象。

基本選擇器

層級選擇器

過濾選擇器

操作樣式

css操作

獲取匹配元素集合中的第一個元素的樣式屬性的值或設(shè)置每個匹配元素的一個或多個 CSS 屬性。

獲取樣式

.css(樣式名)

<button id="getbtn">獲取</button>
<button id="setbtn">設(shè)置</button>
<div class="div1"></div>
<div class="div2" style="width:200px"></div>
<div class="div3" style="width:300px"></div>

.div1 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  background-color: blue;
}

$(function () {
  $('#getbtn').click(function () {
    // 1.
    console.log($('.div1').css('width'));    // 100px
    console.log($('.div1').css('border'));    // 1px solid rgb(255, 0, 0)

    // 在IE瀏覽器中，要獲取邊框，必須要給一個準(zhǔn)確的邊框，否則獲取不到
    console.log($('.div1').css('border-top-width'));    // 1px

    // 2.獲取所有div元素的樣式
    // 獲取包含了多個DOM元素的jQuery對象的樣式，只能獲取到第一個DOM對象的樣式
    console.log($('div').css('width'));    // 100px
  })
})

注意：獲取樣式操作只會返回第一個元素對應(yīng)的樣式值

設(shè)置樣式

.css(樣式名，樣式值)

$(function () {
  $('#setbtn').click(function () {
    // 1. 設(shè)置單個樣式
    $('.div1').css('width', '200px')
    
    // 2. 設(shè)置多個樣式
    $('.div1').css({
      width: 200,
      'height': '200px',
      backgroundColor: 'yellow',
      'border-left-width': '10px'
    })
    
    // 3. 給所有div元素設(shè)置樣式
    $('div').css({
      'height': '100px',
      'border': '1px solid yellow'
    })    
  })
})

注意：設(shè)置樣式是行內(nèi)樣式。

隱式迭代：
· 設(shè)置操作的時候：會給 jQuery 內(nèi)部的所有對象都設(shè)置上相同的值；
· 獲取的時候：只會返回第一個元素對應(yīng)的值；

class操作

示例代碼

操作屬性

attr()

獲取匹配的元素集合中的第一個元素的屬性的值或設(shè)置每一個匹配元素的一個或多個屬性。

獲取屬性

.attr(attributeName)

.attr() 方法只獲取第一個匹配元素的屬性值。要獲取每個單獨的元素的屬性值，需要依靠 jQuery 的 .each() 或者 .map() 方法循環(huán)。

<img src="#" alt="默認(rèn)alt" title="默認(rèn)title">

$(function () {
  // 獲取屬性
  console.log($("img").attr("alt"));    // 默認(rèn)alt
})

設(shè)置屬性

.attr(attributeName, value)

$(function () {
  // 1. 設(shè)置單個屬性
  $("img").attr("alt", "修改了")

  // 2. 設(shè)置多個屬性
  $("img").attr({
    "alt": "修改alt",
    "title": "修改title"
  })
})

prop()

獲取匹配的元素集中第一個元素的屬性（property）值或設(shè)置每一個匹配元素的一個或多個屬性。

對于布爾類型的屬性，不要使用 attr() 方法，應(yīng)該用 prop() 方法，用法與 attr() 方法一樣。

<input type="button" value="選中">
<input type="button" value="未選中">
<input type="checkbox" id="checkbox">

// 如果使用attr，則只能操作一次，不能進行多次選中/未選中
$(function () {
  $("input").eq(0).click(function () {
    $("#checkbox").prop("checked", true)
  })

  $("input").eq(1).click(function () {
    $("#checkbox").prop("checked", false)
  })
})

案例：全選功能

動畫

三組基本動畫

顯示（show）與隱藏（hide）；滑入（slideUp）、滑出（slideDown）與切換（slideToggle）；淡入（fadeIn）、淡出（fadeOut）與切換（fadeToggle）

show([speed],[callback])
hide([speed],[callback])

1. 如果不傳參數(shù)，則沒有動畫；
2. speed 表示動畫的持續(xù)時間，可以是毫秒值，也可以是固定的字符串（fast：200ms、normal：400ms、slow：600ms）；
3. 可以寫個回調(diào)函數(shù)；

<input type="button" value="顯示">
<input type="button" value="隱藏">
<div></div>

$(function () {
  $("input").eq(0).click(function () {
    $("div").show("fast")
  })

  $("input").eq(1).click(function () {
    $("div").hide(1000, function () {
      console.log("執(zhí)行完畢");
    })
  })
})

滑入（slideUp）、滑出（slideDown）、切換（slideToggle）、淡入（fadeIn）、淡出（fadeOut）、切換（fadeToggle）用法與顯示（show）與隱藏（hide）一致。

自定義動畫

.animate()：根據(jù)一組 CSS 屬性，執(zhí)行自定義動畫。

它有四個參數(shù)，如下：

1. 第一個參數(shù)：對象，里面?zhèn)餍枰獎赢嫷臉邮剑靥睿?/li>
2. 第二個參數(shù)：動畫的執(zhí)行時間；
3. 第三個參數(shù)：動畫的執(zhí)行效果；
4. 第四個參數(shù)：回調(diào)函數(shù)。

$(function () {
  $("input").eq(0).click(function () {
    $("div").animate({
      left: 800
    }, 1000, "linear", function () {
      console.log("執(zhí)行完畢");
    })
  })
})

動畫隊列與停止動畫

.stop()：停止匹配元素當(dāng)前正在運行的動畫。

它有兩個參數(shù)：
· 第一個參數(shù)：是否清除動畫隊列；
· 第二個參數(shù)：是否跳轉(zhuǎn)到當(dāng)前動畫的最終效果；

節(jié)點操作

創(chuàng)建節(jié)點

使用 $(htmlStr) 來創(chuàng)建節(jié)點。

$("<span>創(chuàng)建節(jié)點</span>")

添加節(jié)點

.append()：在每個匹配元素里面的末尾處插入?yún)?shù)內(nèi)容
.appendTo()：將匹配的元素插入到目標(biāo)元素的最后面
.prepend()：將參數(shù)內(nèi)容插入到每個匹配元素的前面（元素內(nèi)部）
.prependTo()：將所有元素插入到目標(biāo)前面（元素內(nèi)）
.after()：在匹配元素集合中的每個元素后面插入?yún)?shù)所指定的內(nèi)容，作為其兄弟節(jié)點
.before()：根據(jù)參數(shù)設(shè)定，在匹配元素的前面插入內(nèi)容

$(function () {
  var $span = $("<span>這是新創(chuàng)建的節(jié)點</span>")
  
  // append、appendTo
  // 添加到子元素最后
  $("div").append($span)
  $span.appendTo($("div"))

  // prepend、prependTo
  // 添加到子元素最前面
  $("div").prepend($span)
  $span.prependTo($("div"))

  // before、after
  $("div").after($span)     // 添加到元素后面，作為兄弟元素
  $("div").before($span)        // 添加到元素前面，作為兄弟元素
})

清空內(nèi)容與刪除節(jié)點

.empty()：從DOM中移除集合中匹配元素的所有子節(jié)點
.remove()：將匹配元素集合從DOM中刪除（同時移除元素上的事件及 jQuery 數(shù)據(jù)）

$(function () {
  // 1. 這樣雖然會清空，但是會導(dǎo)致內(nèi)存泄漏，里面綁定的事件不會清空，最好不要使用
  $("div").html("")

  // 2. 清空，里面的事件也會清空
  $("div").empty()
  
  // 3. 刪除div節(jié)點
  $("div").remove()
})

克隆節(jié)點

.clone()：創(chuàng)建一個匹配的元素集合的深度拷貝副本

1. 傳false：不傳參數(shù)或傳 false，是深度復(fù)制，不會復(fù)制事件；
2. 傳true：深度復(fù)制，會復(fù)制事件；

特殊屬性操作

val()

.val()：獲取匹配的元素集合中第一個元素的當(dāng)前值或設(shè)置匹配的元素集合中每個元素的值

<input type="button" value="按鈕">

$(function () {
  // 不加參數(shù)獲取value值
  console.log($("input").val());    // 按鈕
  
  // 加參數(shù)，改變value值
  $("input").val("改變了")
})

html()、text()

html() 方法相當(dāng)于 innerHTML，text() 方法相當(dāng)于 innerText。

html()

.html()：獲取集合中第一個匹配元素的 HTML 內(nèi)容或設(shè)置每一個匹配元素的 HTML 內(nèi)容

<div>
  <h2>標(biāo)題</h2>
  <h2>內(nèi)容</h2>
</div>

$(function () {
  console.log($("div").html());    // <h2>標(biāo)題</h2><h2>內(nèi)容</h2>
  $("div").html("<a href='zhouwanwen.com'>11111</a>")    // 會識別a標(biāo)簽
})

text()

.text()：得到匹配元素集合中每個元素的文本內(nèi)容結(jié)合，包括他們的后代，或設(shè)置匹配元素集合中每個元素的文本內(nèi)容為指定的文本內(nèi)容

text() 不加參數(shù)可以獲取文本；給參數(shù)就是設(shè)置文本，參數(shù)就是要設(shè)置的文本。

獲取文本

<button id="getbtn">獲取</button>
<button id="setbtn">設(shè)置</button>
<div id="div1">
  div1
  <span>span1</span>
</div>
<div>
  div2
  <span>span2</span>
</div>

$(function () {
  $('#getbtn').click(function () {
    console.log($('#div1').text());    // div1 span1
    console.log($('div').text());    // div1 span1       div2 span2
  })
})

設(shè)置文本

$(function () {
  $("#setbtn").click(function () {
    // 會覆蓋原來的內(nèi)容，如果文本含有標(biāo)簽，不會解析
    $('#div1').text('新div<a>鏈接</a>')
    
    $('div').text('哈哈')
  })
})

區(qū)別

• html() 方法會識別 html 標(biāo)簽；
• text() 方法不會識別 html 標(biāo)簽，把內(nèi)容直接當(dāng)成字符串；

width、height

.width()：為匹配的元素集合中獲取第一個元素的當(dāng)前計算寬度值或給每個匹配的元素設(shè)置寬度
.height()：獲取匹配元素集合中的第一個元素的當(dāng)前計算高度值 或 設(shè)置每一個匹配元素的高度值

<div></div>

div {
  width: 100px;
  height: 100px;
  background-color: red;
  padding: 10px;
  border: 10px solid green;
  margin: 10px;
}

$(function () {
  console.log($("div").css("width"));    // 100px
  $("div").css("width", "300px")

  // 獲取的寬度不帶單位
  // 就是獲取width的值
  console.log($("div").width());    // 300
  
  // 獲取的是padding + width的值
  console.log($("div").innerWidth());    // 320
  
  // 獲取的是padding + border + width的值
  console.log($("div").outerWidth());    // 340
  
  // 獲取的是padding + border + margin + width的值
  console.log($("div").outerWidth(true));    // 360
  
  $("div").width("200")
  console.log($("div").width());    // 200
  
  // 獲取頁面可視區(qū)的寬度與高度
  $(window).resize(function () {
    console.log($(window).width());
    console.log($(window).height());
  })
})

scrollTop、scrollLeft

如果不加參數(shù)，則是獲取。如果加參數(shù)，則是設(shè)置每個匹配元素的垂直 / 水平滾動條位置。

// 獲取頁面被卷曲的高度
$(window).scrollTop()

// 獲取頁面被卷曲的寬度
$(window).scrollLeft()

offset、position

offset() 方法是獲取元素距離 document 的距離。

position() 方法是獲取元素距離有定位的父元素的位置。

事件機制

事件委托

注冊事件有以下幾種方式：

1. 簡單事件綁定：$("div").click(function(){})
2. bind事件綁定：$("div").bind("click mouseenter",function(){})
3. delegate事件綁定
4. on事件綁定（推薦）

delegate

delegate：委托，給父元素注冊委托事件，最終還是由子元素執(zhí)行。

它有三個參數(shù)：
· 第一個參數(shù)：事件最終由誰來執(zhí)行
· 第二個參數(shù)：事件類型
· 第三個參數(shù)：函數(shù)

<button>增加</button>
<div>
  <span>111</span>
  <p>1</p>
  <p>2</p>
</div>

$(function () {
  $("button").click(function () {
    $("<p>111</p>").appendTo("div")
  })

  // delegate：只能注冊委托事件
  $("div").delegate("p", "click", function () {
    alert("eee")
  })
})

on

它有四個參數(shù)：

1. 第一個參數(shù)：綁定事件的名稱；
2. 第二個參數(shù)：執(zhí)行事件的后代元素（可選），如果沒有后代元素，那么事件將由自己執(zhí)行；
3. 第三個參數(shù)：傳遞給處理函數(shù)的數(shù)據(jù)，事件觸發(fā)的時候通過 event.data 來使用（不常使用）；
4. 第四個參數(shù)：事件處理函數(shù)；

注冊簡單事件：

$("p").on("click", function () {
  alert("heh1")
})

注冊委托事件：

$("div").on("click", "p", function () {
  alert("heh1")
})

事件解綁

事件解綁有三種方式，分別是unbind、undelegate、off。

// unbind方式
$(selector).unbind()    // 解綁所有事件
$(selector).unbind("click")    // 解綁指定事件

// undelegate方式
$(selector).undelegate()    // 解綁所有undelegate事件
$(selector).undelegate("click")    // 解綁所有click事件

// off方式
$(selector).off()    // 解綁所有事件
$(selector).off("click")    // 解綁所有click事件

觸發(fā)事件

.trigger()：根據(jù)綁定到匹配元素的給定的事件類型執(zhí)行所有的處理程序和行為。

$(selector).click()    // 觸發(fā)click事件
$(selector).trigger("click")

事件對象

jQuery 事件對象其實就是 JS 事件對象的一個封裝，處理了兼容性。

$沖突

jQuery 使用 $ 作為標(biāo)識符，但是如果與其他框架中的 $ 沖突時，jQuery 可以釋放 $ 的控制權(quán)。

// 釋放 $ 的控制權(quán),并且把 $ 的能力給了 $$
var $$ = $.noConflict();