當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery 教程

發布時間：2024/7/23 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery 教程小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

菜鳥教程 --- jQuery 教程：https://www.runoob.com/jquery/jquery-tutorial.html

jQuery 是一個 JavaScript 庫。
jQuery 極大地簡化了 JavaScript 編程。

jQuery?簡介

什么是 jQuery ？

jQuery 是一個 JavaScript 函數庫。

jQuery 是一個輕量級的"寫的少，做的多"的 JavaScript 庫。

jQuery 庫包含以下功能：

HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函數
JavaScript 特效和動畫
HTML DOM 遍歷和修改
AJAX
Utilities

提示：?除此之外，jQuery 還提供了大量的插件。

為什么使用 jQuery ？

目前網絡上有大量開源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的擴展。

很多大公司都在使用 jQuery，例如:

Google
Microsoft
IBM
Netflix

jQuery?安裝

網頁中添加 jQuery

可以通過多種方法在網頁中添加 jQuery。您可以使用以下方法：

從?jquery.com?下載 jQuery 庫
從 CDN 中載入 jQuery, 如從 Google 中加載 jQuery

下載 jQuery

有兩個版本的 jQuery 可供下載：

Production version - 用于實際的網站中，已被精簡和壓縮。
Development version - 用于測試和開發（未壓縮，是可讀的代碼）

以上兩個版本都可以從?http://jquery.com/download/?中下載。

jQuery 庫是一個 JavaScript 文件，您可以使用 HTML 的 <script> 標簽引用它：

提示：?將下載的文件放在網頁的同一目錄下，就可以使用 jQuery。

您是否很疑惑為什么我們沒有在 <script> 標簽中使用 type="text/javascript" ？?在 HTML5 中，不必那樣做了。JavaScript 是 HTML5 以及所有現代瀏覽器中的默認腳本語言！

替代方案

如果您不希望下載并存放 jQuery，那么也可以通過 CDN（內容分發網絡）引用它。

Staticfile CDN、百度、又拍云、新浪、谷歌和微軟的服務器都存有 jQuery 。

如果你的站點用戶是國內的，建議使用百度、又拍云、新浪等國內CDN地址，如果你站點用戶是國外的可以使用谷歌和微軟。

注：本站實例均采用菜鳥教程 CDN 庫。

如需從 Staticfile CDN、又拍云、新浪、谷歌或微軟引用 jQuery，請使用以下代碼之一：

百度 CDN:

新浪 CDN:

Google CDN：（?不推薦使用Google CDN來獲取版本，因為Google產品在中國很不穩定。）

Microsoft CDN:

jQuery 使用版本

我們可以在瀏覽器的 Console 窗口中使用?$.fn.jquery?命令查看當前 jQuery 使用的版本：

jQuery?語法

通過 jQuery，您可以選取（查詢，query） HTML 元素，并對它們執行"操作"（actions）。

jQuery 語法

jQuery 語法是通過選取 HTML 元素，并對選取的元素執行某些操作。

基礎語法：?$(selector).action()

美元符號定義 jQuery
選擇符（selector）"查詢" 和 "查找" HTML 元素
jQuery 的 action() 執行對元素的操作

實例:

$(this).hide() - 隱藏當前元素
$("p").hide() - 隱藏所有 <p> 元素
$("p.test").hide() - 隱藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隱藏 id="test" 的元素

jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合。在本教程接下來的章節，您將學習到更多有關選擇器的語法。

文檔就緒事件

您也許已經注意到在我們的實例中的所有 jQuery 函數位于一個 document ready 函數中：

$(document).ready(function(){// 開始寫 jQuery 代碼...});

這是為了防止文檔在完全加載（就緒）之前運行 jQuery 代碼，即在 DOM 加載完成后才可以對 DOM 進行操作。

如果在文檔沒有完全加載之前就運行函數，操作可能失敗。下面是兩個具體的例子：

試圖隱藏一個不存在的元素
獲得未完全加載的圖像的大小

提示：簡潔寫法（與以上寫法效果相同）:

$(function(){// 開始寫 jQuery 代碼...});

以上兩種方式你可以選擇你喜歡的方式實現文檔就緒后執行 jQuery 方法。

jQuery 入口函數:

$(document).ready(function(){// 執行代碼 }); 或者 $(function(){// 執行代碼 });

JavaScript 入口函數:

window.onload = function () {// 執行代碼 }

jQuery 入口函數與 JavaScript 入口函數的區別：

?jQuery 的入口函數是在 html 所有標簽(DOM)都加載之后，就會去執行。
?JavaScript 的 window.onload 事件是等到所有內容，包括外部圖片之類的文件加載完后，才會執行。

jQuery?選擇器

jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。

jQuery 選擇器

jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。

jQuery 選擇器基于元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。它基于已經存在的 CSS 選擇器（?https://www.runoob.com/cssref/css-selectors.html ）

除此之外，它還有一些自定義的選擇器。jQuery 中所有選擇器都以美元符號開頭：$()

元素選擇器

jQuery 元素選擇器基于元素名選取元素。在頁面中選取所有 <p> 元素：$("p")

實例：用戶點擊按鈕后，所有 <p> 元素都隱藏：

$(document).ready(function(){$("button").click(function(){$("p").hide();}); });

#id 選擇器

jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。頁面中元素的 id 應該是唯一的，所以您要在頁面中選取唯一的元素需要通過 #id 選擇器。

通過 id 選取元素語法如下：$("#test")

實例：當用戶點擊按鈕后，有 id="test" 屬性的元素將被隱藏：

$(document).ready(function(){$("button").click(function(){$("#test").hide();}); });

.class 選擇器

jQuery 類選擇器可以通過指定的 class 查找元素。語法如下：$(".test")

實例：用戶點擊按鈕后所有帶有 class="test" 屬性的元素都隱藏：

$(document).ready(function(){$("button").click(function(){$(".test").hide();}); });

JavaScript 之 DOM 對象屬性操作

JavaScript 之 DOM 對象屬性操作：https://www.cnblogs.com/molieren/articles/10161255.html

elementNode.setAttribute(name,value) elementNode.getAttribute(屬性名) <-------------->elementNode.屬性名(DHTML) elementNode.removeAttribute(“屬性名”);

示例：http://www.xiaohuar.com/daxue/

for(var i=0;i<$('img').length;i++){t = $('img')[i]; console.log(t.getAttribute('src')); }

更多實例

語法描述實例

$("*")	選取所有元素	在線實例
$(this)	選取當前 HTML 元素	在線實例
$("p.intro")	選取 class 為 intro 的 <p> 元素	在線實例
$("p:first")	選取第一個 <p> 元素	在線實例
$("ul li:first")	選取第一個 <ul> 元素的第一個 <li> 元素	在線實例
$("ul li:first-child")	選取每個 <ul> 元素的第一個 <li> 元素	在線實例
$("[href]")	選取帶有 href 屬性的元素	在線實例
$("a[target='_blank']")	選取所有 target 屬性值等于 "_blank" 的 <a> 元素	在線實例
$("a[target!='_blank']")	選取所有 target 屬性值不等于 "_blank" 的 <a> 元素	在線實例
$(":button")	選取所有 type="button" 的 <input> 元素和 <button> 元素	在線實例
$("tr:even")	選取偶數位置的 <tr> 元素	在線實例
$("tr:odd")	選取奇數位置的 <tr> 元素	在線實例

可以使用?jQuery 選擇器檢測器?來演示不同的選擇器。

選擇器實例選取

*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	class="intro" 的所有元素
.class,.class	$(".intro,.demo")	class 為 "intro" 或 "demo" 的所有元素
element	$("p")	所有 <p> 元素
el1,el2,el3	$("h1,div,p")	所有 <h1>、<div> 和 <p> 元素

:first	$("p:first")	第一個 <p> 元素
:last	$("p:last")	最后一個 <p> 元素
:even	$("tr:even")	所有偶數 <tr> 元素，索引值從 0 開始，第一個元素是偶數 (0)，第二個元素是奇數 (1)，以此類推。
:odd	$("tr:odd")	所有奇數 <tr> 元素，索引值從 0 開始，第一個元素是偶數 (0)，第二個元素是奇數 (1)，以此類推。

:first-child	$("p:first-child")	屬于其父元素的第一個子元素的所有 <p> 元素
:first-of-type	$("p:first-of-type")	屬于其父元素的第一個 <p> 元素的所有 <p> 元素
:last-child	$("p:last-child")	屬于其父元素的最后一個子元素的所有 <p> 元素
:last-of-type	$("p:last-of-type")	屬于其父元素的最后一個 <p> 元素的所有 <p> 元素
:nth-child(n)	$("p:nth-child(2)")	屬于其父元素的第二個子元素的所有 <p> 元素
:nth-last-child(n)	$("p:nth-last-child(2)")	屬于其父元素的第二個子元素的所有 <p> 元素，從最后一個子元素開始計數
:nth-of-type(n)	$("p:nth-of-type(2)")	屬于其父元素的第二個 <p> 元素的所有 <p> 元素
:nth-last-of-type(n)	$("p:nth-last-of-type(2)")	屬于其父元素的第二個 <p> 元素的所有 <p> 元素，從最后一個子元素開始計數
:only-child	$("p:only-child")	屬于其父元素的唯一子元素的所有 <p> 元素
:only-of-type	$("p:only-of-type")	屬于其父元素的特定類型的唯一子元素的所有 <p> 元素

parent > child	$("div > p")	<div> 元素的直接子元素的所有 <p> 元素
parent descendant	$("div p")	<div> 元素的后代的所有 <p> 元素
element + next	$("div + p")	每個 <div> 元素相鄰的下一個 <p> 元素
element ~ siblings	$("div ~ p")	<div> 元素同級的所有 <p> 元素

:eq(index)	$("ul li:eq(3)")	列表中的第四個元素（index 值從 0 開始）
:gt(no)	$("ul li:gt(3)")	列舉 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列舉 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不為空的輸入元素

:header	$(":header")	所有標題元素 <h1>, <h2> ...
:animated	$(":animated")	所有動畫元素
:focus	$(":focus")	當前具有焦點的元素
:contains(text)	$(":contains('Hello')")	所有包含文本 "Hello" 的元素
:has(selector)	$("div:has(p)")	所有包含有 <p> 元素在其內的 <div> 元素
:empty	$(":empty")	所有空元素
:parent	$(":parent")	匹配所有含有子元素或者文本的父元素。
:hidden	$("p:hidden")	所有隱藏的 <p> 元素
:visible	$("table:visible")	所有可見的表格
:root	$(":root")	文檔的根元素
:lang(language)	$("p:lang(de)")	所有 lang 屬性值為 "de" 的 <p> 元素

[attribute]	$("[href]")	所有帶有 href 屬性的元素
[attribute=value]	$("[href='default.htm']")	所有帶有 href 屬性且值等于 "default.htm" 的元素
[attribute!=value]	$("[href!='default.htm']")	所有帶有 href 屬性且值不等于 "default.htm" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有帶有 href 屬性且值以 ".jpg" 結尾的元素
[attribute\|=value]	$("[title\|='Tomorrow']")	所有帶有 title 屬性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟連接符作為開頭的字符串
[attribute^=value]	$("[title^='Tom']")	所有帶有 title 屬性且值以 "Tom" 開頭的元素
[attribute~=value]	$("[title~='hello']")	所有帶有 title 屬性且值包含單詞 "hello" 的元素
[attribute*=value]	$("[title*='hello']")	所有帶有 title 屬性且值包含字符串 "hello" 的元素
[name=value][name2=value2]	$( "input[id][name$='man']" )	帶有 id 屬性，并且 name 屬性以 man 結尾的輸入框

:input	$(":input")	所有 input 元素
:text	$(":text")	所有帶有 type="text" 的 input 元素
:password	$(":password")	所有帶有 type="password" 的 input 元素
:radio	$(":radio")	所有帶有 type="radio" 的 input 元素
:checkbox	$(":checkbox")	所有帶有 type="checkbox" 的 input 元素
:submit	$(":submit")	所有帶有 type="submit" 的 input 元素
:reset	$(":reset")	所有帶有 type="reset" 的 input 元素
:button	$(":button")	所有帶有 type="button" 的 input 元素
:image	$(":image")	所有帶有 type="image" 的 input 元素
:file	$(":file")	所有帶有 type="file" 的 input 元素
:enabled	$(":enabled")	所有啟用的元素
:disabled	$(":disabled")	所有禁用的元素
:selected	$(":selected")	所有選定的下拉列表元素
:checked	$(":checked")	所有選中的復選框選項
.selector	$(selector).selector	在jQuery 1.7中已經不被贊成使用。返回傳給jQuery()的原始選擇器
:target	$( "p:target" )	選擇器將選中ID和URI中一個格式化的標識符相匹配的<p>元素

1.基本選擇器

$("#id") //ID選擇器 $("div") //元素選擇器 $(".classname") //類選擇器 $(".classname,.classname1,#id1") //組合選擇器

*?選擇所有元素
.class?選擇?class，如：$('.mybox')
element?選擇?element，如：$('p')
#id?選擇?id，如：$('#box')
selector1,selectorN?可以同時選擇多個元素，如：$('div, p.box, #phone')

2.層次選擇器

$("#id>.classname ") //子元素選擇器 $("#id .classname ") //后代元素選擇器 $("#id + .classname ") //緊鄰下一個元素選擇器 $("#id ~ .classname ") //兄弟元素選擇器

parent > child? 選擇指定元素下的指定子元素，如：$('ul.tonav > li')
ancestor descendant? 選擇一個元素里所有的后代元素，如：$('form input')
prev + next? 選擇所有指定元素后緊跟著的元素，如：$('label + input')
prev ~ siblings? 選擇與指定元素之后有相同父級的同級選擇器，如：$('#prev ~ div')

3.過濾選擇器(重點)

基本過濾器：

$("li:first") ? ?//第一個li $("li:last") ? ? //最后一個li $("li:even") ? ? //挑選下標為偶數的li $("li:odd") ? ? ?//挑選下標為奇數的li $("li:eq(4)") ? ?//下標等于 4 的li(第五個 li 元素) $("li:gt(2)") ? ?//下標大于 2 的li $("li:lt(2)") ? ?//下標小于 2 的li $("li:not(#runoob)") //挑選除 id="runoob" 以外的所有li

:animated?選擇動畫進行中的所有元素。如：$('div:animated)
:eq(n)?選取第n個元素，如：$('ul.tonav li:eq(n)')
:even?選取偶數個元素，如：$('li:even')
:odd?選取奇數個元素，如：$('li.odd')
:first?選取第一個元素，如：$('li:first')
:gt(n)?選取結果集中索引大于n的元素，n可以為負值，如：$(':gt(3)')
:lt(n)?選取結果集中索引小于n的元素，n可以為負值，如：$(':lt(3)')
:header?選取所有的標題元素，例如?h1、h2、h3...，如：$(':header')
:lang()?選取指定語言的所有元素，，如：$('div:lang(zh-cn)')
:last?選取最后一個符合的元素，如：$('li:last')
:not?選取不符合的所有元素，如：$('input:not(:checked) + span')
:root?選取作為文檔根目錄的元素
:target?選取由文檔的圖片、視頻、音頻指示的目標元素

3.2 內容過濾器 Content Filters

$("div:contains('Runob')") // 包含 Runob文本的元素 $("td:empty") //不包含子元素或者文本的空元素 $("div:has(selector)") //含有選擇器所匹配的元素 $("td:parent") //含有子元素或者文本的元素

:contains()選擇包含指定文本的所有元素，如：$("div:containers('home')")
:empty選擇沒有子元素或內容文字的元素，如：$("td:empty"))
:has()選擇包含至少一個匹配指定選擇器的元素的元素，如：$("div:has(p)"))
:parent選擇至少有一個子節點（元素或文本）的所有元素

3.3 可視選擇器 Visibility Filters

$("li:hidden") //匹配所有不可見元素，或type為hidden的元素 $("li:visible") //匹配所有可見元素

:hidden選擇所有隱藏的元素，如：$("div:hidden").show(3000));
:visible選擇所有隱藏的元素，如：
$("div:visible").click(function() {$(this).css("background", "yellow");});

3.4 屬性選擇器 Attribute

$("div[id]") //所有含有 id 屬性的 div 元素 $("div[id='123']") // id屬性值為123的div 元素 $("div[id!='123']") // id屬性值不等于123的div 元素 $("div[id^='qq']") // id屬性值以qq開頭的div 元素 $("div[id$='zz']") // id屬性值以zz結尾的div 元素 $("div[id*='bb']") // id屬性值包含bb的div 元素 $("input[id][name$='man']") //多屬性選過濾，同時滿足兩個屬性的條件的元素

[name]選擇具有指定屬性的元素（使用任何值都可以）。如：$("div[id]")
[name|="value"]選擇具有指定屬性的元素，其值等于給定的字符串，或者以該字符串開頭，后跟連字符（-）。
$('a[href="about.html"]');?//選擇 a 鏈接的 href 屬性包含 'about.html' 的元素
[name*="value"]選擇具有包含給定子字符串的值得指定屬性的元素。
$('input[name*="man"]');?//選擇所有的 name 屬性包含 'man' 的 input 元素
[name~="value"]選擇具有指定屬性的元素，其中包含由空格分隔的給定單詞的值。
<input name="man-news"> <input name="milk man"> <input name="letter"> $('input[name~="man"]');?//會選擇到前兩個 input 元素
[name$="value"]選擇具有指定屬性的元素，其值與給定字符串精確匹配，要區分大小寫。如：$("input[name$='letter']")
[name="value"]選擇具有指定屬性的元素，其值恰好等于特定值，如：$("input[value='Hot Fuzz']")會選到value等于Hot Fuzz的input
[name!="value"]選擇不具有指定屬性的元素，或者具有指定蘇醒但不具有特定值的元素。如：$("input[name!='newsletter']")，name屬性值為newsletter的不選。
[name^="value"]選擇具有指定屬性的元素，其值與給定字符串完全一致。
<input name="newsletter"> <input name="milkman"> <input name="news"> $('input[name^="news"]');?//會選擇到第三個 input
[name="value"][name2="value2"]符合所有指定的屬性過濾器的元素。如：$("input[id][name$='man']")

3.5 狀態過濾選擇器

$("input:enabled") // 匹配可用的 input $("input:disabled") // 匹配不可用的 input $("input:checked") // 匹配選中的 input $("option:selected") // 匹配選中的 option

3.6 子代過濾器 Child Filters

:first-child選擇同父代的第一個子代元素。
:first-of-type選擇同一元素名稱的兄弟中的第一個元素。
:last-child選擇同父代的最后一個子代元素。
:last-of-type選擇同一元素名稱的兄弟中的最后一個元素。
:nth-child()選擇同父代的第n個子代元素。
:nth-last-child()選擇同父代的倒數第n個子代元素。
:nth-last-of-type()選擇同父代的倒數第n個子代元素。
:nth-of-type()選擇同父代的第n個子代元素。
:only-child選擇只有一個子代的元素。
:only-of-type()選擇所有沒有同名元素的兄弟元素。如：$("div.button:only-child")選擇只有一個button的div

4. 表單選擇器

$(":input") //匹配所有 input, textarea, select 和 button 元素 $(":text") //所有的單行文本框，$(":text") 等價于$("[type=text]")，推薦使用$("input:text")效率更高，下同 $(":password") //所有密碼框 $(":radio") //所有單選按鈕 $(":checkbox") //所有復選框 $(":submit") //所有提交按鈕 $(":reset") //所有重置按鈕 $(":button") //所有button按鈕 $(":file") //所有文件域

:button選擇所有按鈕元素和按鈕類型的元素。
:checkbox選擇所有得可取塊的元素。
:checked選擇所有選中的元素。
:disabled選擇所有被禁用的元素。
:enabled選擇所有已啟用的元素。
:focus選擇當下被focus的元素。
:file選擇file類型的元素。
:image選擇圖像類型的所有的元素。
:input選擇所有input、textarea、select和button元素。
:password選擇所有密碼類型的元素。
:radio選擇所有選項按鈕的元素。
:reset選擇所有清除按鈕（復位按鈕）的元素。
:selected選擇所有選中的元素。
:submit選擇所有提交類型的元素。
:text選擇所有文本輸入框的元素。

獨立文件中使用 jQuery 函數

如果您的網站包含許多頁面，并且您希望您的 jQuery 函數易于維護，那么請把您的 jQuery 函數放到獨立的 .js 文件中。

當我們在教程中演示 jQuery 時，會將函數直接添加到 <head> 部分中。不過，把它們放到一個單獨的文件中會更好，就像這樣（通過 src 屬性來引用文件）：

jQ基礎篇 --- jQuery選擇器總結：https://segmentfault.com/a/1190000003688640

jQuery?事件

jQuery 是為事件處理特別設計的。

什么是事件？

頁面對不同訪問者的響應叫做事件。

事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。

實例：

在元素上移動鼠標。
選取單選按鈕
點擊元素

在事件中經常使用術語"觸發"（或"激發"）例如： "當您按下按鍵時觸發 keypress 事件"。

常見 DOM 事件：

鼠標事件鍵盤事件表單事件文檔/窗口事件

click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

jQuery 事件方法語法

在 jQuery 中，大多數 DOM 事件都有一個等效的 jQuery 方法。

頁面中指定一個點擊事件：$("p").click();

下一步是定義什么時間觸發事件。您可以通過一個事件函數實現：

$("p").click(function(){// 動作觸發后執行的代碼!! });

常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允許我們在文檔完全加載完后執行函數。該事件方法在?jQuery 語法?章節中已經提到過。

click()

click() 方法是當按鈕點擊事件被觸發時會調用一個函數。

該函數在用戶點擊 HTML 元素時執行。

在下面的實例中，當點擊事件在某個 <p> 元素上觸發時，隱藏當前的 <p> 元素：

$("p").click(function(){$(this).hide(); });

dblclick()

當雙擊元素時，會發生 dblclick 事件。

dblclick() 方法觸發 dblclick 事件，或規定當發生 dblclick 事件時運行的函數：

$("p").dblclick(function(){$(this).hide(); });

mouseenter()

當鼠標指針穿過元素時，會發生 mouseenter 事件。

mouseenter() 方法觸發 mouseenter 事件，或規定當發生 mouseenter 事件時運行的函數：

$("#p1").mouseenter(function(){alert('您的鼠標移到了 id="p1" 的元素上!'); });

mouseleave()

當鼠標指針離開元素時，會發生 mouseleave 事件。

mouseleave() 方法觸發 mouseleave 事件，或規定當發生 mouseleave 事件時運行的函數：

$("#p1").mouseleave(function(){alert("再見，您的鼠標離開了該段落。"); });

mousedown()

當鼠標指針移動到元素上方，并按下鼠標按鍵時，會發生 mousedown 事件。

mousedown() 方法觸發 mousedown 事件，或規定當發生 mousedown 事件時運行的函數：

$("#p1").mousedown(function(){alert("鼠標在該段落上按下！"); });

mouseup()

當在元素上松開鼠標按鈕時，會發生 mouseup 事件。

mouseup() 方法觸發 mouseup 事件，或規定當發生 mouseup 事件時運行的函數：

$("#p1").mouseup(function(){alert("鼠標在段落上松開。"); });

hover()

hover()方法用于模擬光標懸停事件。

當鼠標移動到元素上時，會觸發指定的第一個函數(mouseenter);當鼠標移出這個元素時，會觸發指定的第二個函數(mouseleave)。

$("#p1").hover(function(){alert("你進入了 p1!");},function(){alert("拜拜! 現在你離開了 p1!");} );

focus()

當元素獲得焦點時，發生 focus 事件。

當通過鼠標點擊選中元素或通過 tab 鍵定位到元素時，該元素就會獲得焦點。

focus() 方法觸發 focus 事件，或規定當發生 focus 事件時運行的函數：

$("input").focus(function(){$(this).css("background-color","#cccccc"); });

blur()

當元素失去焦點時，發生 blur 事件。

blur() 方法觸發 blur 事件，或規定當發生 blur 事件時運行的函數：

$("input").blur(function(){$(this).css("background-color","#ffffff"); });

jQuery 事件方法

事件方法觸發器或添加一個函數到被選元素的事件處理程序。

下面的表格列出了所有用于處理事件的 jQuery 方法。

方法描述

bind()	向元素添加事件處理程序
blur()	添加/觸發失去焦點事件
change()	添加/觸發 change 事件
click()	添加/觸發 click 事件
dblclick()	添加/觸發 double click 事件
delegate()	向匹配元素的當前或未來的子元素添加處理程序
die()	在版本 1.9 中被移除。移除所有通過 live() 方法添加的事件處理程序
error()	在版本 1.8 中被廢棄。添加/觸發 error 事件
event.currentTarget	在事件冒泡階段內的當前 DOM 元素
event.data	包含當前執行的處理程序被綁定時傳遞到事件方法的可選數據
event.delegateTarget	返回當前調用的 jQuery 事件處理程序所添加的元素
event.isDefaultPrevented()	返回指定的 event 對象上是否調用了 event.preventDefault()
event.isImmediatePropagationStopped()	返回指定的 event 對象上是否調用了 event.stopImmediatePropagation()
event.isPropagationStopped()	返回指定的 event 對象上是否調用了 event.stopPropagation()
event.namespace	返回當事件被觸發時指定的命名空間
event.pageX	返回相對于文檔左邊緣的鼠標位置
event.pageY	返回相對于文檔上邊緣的鼠標位置
event.preventDefault()	阻止事件的默認行為
event.relatedTarget	返回當鼠標移動時哪個元素進入或退出
event.result	包含由被指定事件觸發的事件處理程序返回的最后一個值
event.stopImmediatePropagation()	阻止其他事件處理程序被調用
event.stopPropagation()	阻止事件向上冒泡到 DOM 樹，阻止任何父處理程序被事件通知
event.target	返回哪個 DOM 元素觸發事件
event.timeStamp	返回從 1970 年 1 月 1 日到事件被觸發時的毫秒數
event.type	返回哪種事件類型被觸發
event.which	返回指定事件上哪個鍵盤鍵或鼠標按鈕被按下
event.metaKey	事件觸發時 META 鍵是否被按下
focus()	添加/觸發 focus 事件
focusin()	添加事件處理程序到 focusin 事件
focusout()	添加事件處理程序到 focusout 事件
hover()	添加兩個事件處理程序到 hover 事件
keydown()	添加/觸發 keydown 事件
keypress()	添加/觸發 keypress 事件
keyup()	添加/觸發 keyup 事件
live()	在版本 1.9 中被移除。添加一個或多個事件處理程序到當前或未來的被選元素
load()	在版本 1.8 中被廢棄。添加一個事件處理程序到 load 事件
mousedown()	添加/觸發 mousedown 事件
mouseenter()	添加/觸發 mouseenter 事件
mouseleave()	添加/觸發 mouseleave 事件
mousemove()	添加/觸發 mousemove 事件
mouseout()	添加/觸發 mouseout 事件
mouseover()	添加/觸發 mouseover 事件
mouseup()	添加/觸發 mouseup 事件
off()	移除通過 on() 方法添加的事件處理程序
on()	向元素添加事件處理程序
one()	向被選元素添加一個或多個事件處理程序。該處理程序只能被每個元素觸發一次
$.proxy()	接受一個已有的函數，并返回一個帶特定上下文的新的函數
ready()	規定當 DOM 完全加載時要執行的函數
resize()	添加/觸發 resize 事件
scroll()	添加/觸發 scroll 事件
select()	添加/觸發 select 事件
submit()	添加/觸發 submit 事件
toggle()	在版本 1.9 中被移除。添加 click 事件之間要切換的兩個或多個函數
trigger()	觸發綁定到被選元素的所有事件
triggerHandler()	觸發綁定到被選元素的指定事件上的所有函數
unbind()	從被選元素上移除添加的事件處理程序
undelegate()	從現在或未來的被選元素上移除事件處理程序
unload()	在版本 1.8 中被廢棄。添加事件處理程序到 unload 事件
contextmenu()	添加事件處理程序到 contextmenu 事件
$.holdReady()	用于暫停或恢復.ready() 事件的執行

jQuery 特效效果

：jQuery 效果 – 隱藏和顯示 | 菜鳥教程

-?隱藏和顯示
- 淡入淡出
- 滑動
- 動畫
- 停止動畫
- Callback 方法
- 鏈(Chaining)

jQuery 效果方法

下面的表格列出了所有用于創建動畫效果的 jQuery 方法。

方法描述

animate()	對被選元素應用"自定義"的動畫
clearQueue()	對被選元素移除所有排隊函數（仍未運行的）
delay()	對被選元素的所有排隊函數（仍未運行）設置延遲
dequeue()	移除下一個排隊函數，然后執行函數
fadeIn()	逐漸改變被選元素的不透明度，從隱藏到可見
fadeOut()	逐漸改變被選元素的不透明度，從可見到隱藏
fadeTo()	把被選元素逐漸改變至給定的不透明度
fadeToggle()	在 fadeIn() 和 fadeOut() 方法之間進行切換
finish()	對被選元素停止、移除并完成所有排隊動畫
hide()	隱藏被選元素
queue()	顯示被選元素的排隊函數
show()	顯示被選元素
slideDown()	通過調整高度來滑動顯示被選元素
slideToggle()	slideUp() 和 slideDown() 方法之間的切換
slideUp()	通過調整高度來滑動隱藏被選元素
stop()	停止被選元素上當前正在運行的動畫
toggle()	hide() 和 show() 方法之間的切換

jQuery 操作 HTML

jQuery 擁有可操作 HTML 元素和屬性的強大方法：jQuery 獲取內容和屬性 | 菜鳥教程

獲取內容和屬性：jQuery 獲取內容和屬性 | 菜鳥教程
設置內容和屬性：jQuery 設置內容和屬性 | 菜鳥教程
添加 HTML 元素：jQuery 添加元素 | 菜鳥教程
刪除 HTML 元素（?刪除已有的 HTML 元素）：jQuery 刪除元素 | 菜鳥教程
獲取并設置 CSS 類（?對 CSS 元素進行操作）：jQuery 獲取并設置 CSS 類 | 菜鳥教程
jQuery 的 css() 方法（?設置或返回被選元素的一個或多個樣式屬性）：jQuery css() 方法 | 菜鳥教程
處理元素和瀏覽器窗口的尺寸：jQuery 尺寸 | 菜鳥教程

jQuery DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列與 DOM 相關的方法，這使訪問和操作元素和屬性變得很容易。

獲得內容 - text()、html() 以及 val()

三個簡單實用的用于 DOM 操作的 jQuery 方法：

text() - 設置或返回所選元素的文本內容
html() - 設置或返回所選元素的內容（包括 HTML 標記）
val() - 設置或返回表單字段的值

$("#btn1").click(function(){alert("Text: " + $("#test").text()); });$("#btn2").click(function(){alert("HTML: " + $("#test").html()); });$("#btn1").click(function(){alert("值為: " + $("#test").val()); });

獲取屬性 - attr()

jQuery attr() 方法用于獲取屬性值。

下面的例子演示如何獲得鏈接中 href 屬性的值：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){$("button").click(function(){alert($("#runoob").attr("href"));}); }); </script> </head><body> <p><a href="//www.runoob.com" id="runoob">菜鳥教程</a></p> <button>顯示 href 屬性的值</button> </body> </html>

jQuery 遍歷

：jQuery 遍歷 | 菜鳥教程

遍歷
祖先
后代
同胞
過濾

祖先是父、祖父、曾祖父等等。后代是子、孫、曾孫等等。同胞擁有相同的父。

什么是遍歷？

jQuery 遍歷，意為"移動"，用于根據其相對于其他元素的關系來"查找"（或選取）HTML 元素。以某項選擇開始，并沿著這個選擇移動，直到抵達您期望的元素為止。

下圖展示了一個家族樹。通過 jQuery 遍歷，您能夠從被選（當前的）元素開始，輕松地在家族樹中向上移動（祖先），向下移動（子孫），水平移動（同胞）。這種移動被稱為對 DOM 進行遍歷。

圖示解析：

<div> 元素是 <ul> 的父元素，同時是其中所有內容的祖先。
<ul> 元素是 <li> 元素的父元素，同時是 <div> 的子元素
左邊的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同時是 <div> 的后代。
<span> 元素是 <li> 的子元素，同時是 <ul> 和 <div> 的后代。
兩個 <li> 元素是同胞（擁有相同的父元素）。
右邊的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同時是 <div> 的后代。
<b> 元素是右邊的 <li> 的子元素，同時是 <ul> 和 <div> 的后代。

jQuery HTML / CSS 方法

下面的表格列出了所有用于處理 HTML 和 CSS 的 jQuery 方法。

下面的方法適用于 HTML 和 XML 文檔。除了：html() 方法。

方法描述

addClass()	向被選元素添加一個或多個類名
after()	在被選元素后插入內容
append()	在被選元素的結尾插入內容
appendTo()	在被選元素的結尾插入 HTML 元素
attr()	設置或返回被選元素的屬性/值
before()	在被選元素前插入內容
clone()	生成被選元素的副本
css()	為被選元素設置或返回一個或多個樣式屬性
detach()	移除被選元素（保留數據和事件）
empty()	從被選元素移除所有子節點和內容
hasClass()	檢查被選元素是否包含指定的 class 名稱
height()	設置或返回被選元素的高度
html()	設置或返回被選元素的內容
innerHeight()	返回元素的高度（包含 padding，不包含 border）
innerWidth()	返回元素的寬度（包含 padding，不包含 border）
insertAfter()	在被選元素后插入 HTML 元素
insertBefore()	在被選元素前插入 HTML 元素
offset()	設置或返回被選元素的偏移坐標（相對于文檔）
offsetParent()	返回第一個定位的祖先元素
outerHeight()	返回元素的高度（包含 padding 和 border）
outerWidth()	返回元素的寬度（包含 padding 和 border）
position()	返回元素的位置（相對于父元素）
prepend()	在被選元素的開頭插入內容
prependTo()	在被選元素的開頭插入 HTML 元素
prop()	設置或返回被選元素的屬性/值
remove()	移除被選元素（包含數據和事件）
removeAttr()	從被選元素移除一個或多個屬性
removeClass()	從被選元素移除一個或多個類
removeProp()	移除通過 prop() 方法設置的屬性
replaceAll()	把被選元素替換為新的 HTML 元素
replaceWith()	把被選元素替換為新的內容
scrollLeft()	設置或返回被選元素的水平滾動條位置
scrollTop()	設置或返回被選元素的垂直滾動條位置
text()	設置或返回被選元素的文本內容
toggleClass()	在被選元素中添加/移除一個或多個類之間切換
unwrap()	移除被選元素的父元素
val()	設置或返回被選元素的屬性值（針對表單元素）
width()	設置或返回被選元素的寬度
wrap()	在每個被選元素的周圍用 HTML 元素包裹起來
wrapAll()	在所有被選元素的周圍用 HTML 元素包裹起來
wrapInner()	在每個被選元素的內容周圍用 HTML 元素包裹起來
$.escapeSelector()	轉義CSS選擇器中有特殊意義的字符或字符串
$.cssHooks	提供了一種方法通過定義函數來獲取和設置特定的CSS值

jQuery --- AJAX 簡介

AJAX 是與服務器交換數據的技術，它在不重載全部頁面的情況下，實現了對部分網頁的更新。

什么是 AJAX？

AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

簡短地說，在不重載整個網頁的情況下，AJAX 通過后臺加載數據，并在網頁上進行顯示。

使用 AJAX 的應用程序案例：谷歌地圖、騰訊微博、優酷視頻、人人網等等。

您可以在我們的?jQuery Ajax 參考手冊學會 jQuery Ajax 的具體應用。

您可以在我們的?AJAX 教程中學到更多有關 AJAX 的知識。

關于 jQuery 與 AJAX

jQuery 提供多個與 AJAX 有關的方法。

通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON - 同時您能夠把這些外部數據直接載入網頁的被選元素中。

如果沒有 jQuery，AJAX 編程還是有些難度的。編寫常規的 AJAX 代碼并不容易，因為不同的瀏覽器對 AJAX 的實現并不相同。這意味著您必須編寫額外的代碼對瀏覽器進行測試。不過，jQuery 團隊為我們解決了這個難題，我們只需要一行簡單的代碼，就可以實現 AJAX 功能。

jQuery load() 方法

jQuery load() 方法是簡單但強大的 AJAX 方法。load() 方法從服務器加載數據，并把返回的數據放入被選元素中。

語法：$(selector).load(URL, data, callback);

必需的?URL?參數規定您希望加載的 URL。
可選的?data?參數規定與請求一同發送的查詢字符串鍵/值對集合。
可選的?callback?參數是 load() 方法完成后所執行的函數名稱。

這是示例文件（"demo_test.txt"）的內容：

<h2>jQuery AJAX 是個非常棒的功能！</h2> <p id="p1">這是段落的一些文本。</p>

下面的例子會把文件 "demo_test.txt" 的內容加載到指定的 <div> 元素中：

實例：$("#div1").load("demo_test.txt");

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){$("button").click(function(){$("#div1").load("/try/ajax/demo_test.txt");}); }); </script> </head> <body><div id="div1"><h2>使用 jQuery AJAX 修改文本內容</h2></div> <button>獲取外部內容</button></body> </html>

也可以把 jQuery 選擇器添加到 URL 參數。

下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的內容，加載到指定的 <div> 元素中：

實例：$("#div1").load("demo_test.txt #p1");

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){$("button").click(function(){$("#div1").load("/try/ajax/demo_test.txt #p1");}); }); </script> </head> <body><div id="div1"><h2>使用 jQuery AJAX 修改文本</h2></div> <button>獲取外部文本</button></body> </html>

可選的 callback 參數規定當 load() 方法完成后所要允許的回調函數。回調函數可以設置不同的參數：

responseTxt?- 包含調用成功時的結果內容
statusTXT?- 包含調用的狀態
xhr?- 包含 XMLHttpRequest 對象

下面的例子會在 load() 方法完成后顯示一個提示框。如果 load() 方法已成功，則顯示"外部內容加載成功！"，而如果失敗，則顯示錯誤消息：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){$("button").click(function(){$("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){if(statusTxt=="success")alert("外部內容加載成功!");if(statusTxt=="error")alert("Error: "+xhr.status+": "+xhr.statusText);});}); }); </script> </head> <body><div id="div1"><h2>使用 jQuery AJAX 修改該文本</h2></div> <button>獲取外部內容</button></body> </html>

為了避免多頁面情形下的代碼重復，可以利用 load() 方法，將重復的部分（例如導航欄）放入單獨的文件，使用下列方法進行導入：

//1.當前文件中要插入的地方使用此結構： <div class="include" file="***.html"></div>//2.***.html中放入內容，用html格式僅僅因為會有編輯器的書寫輔助。。//3.代碼： $(".include").each(function() {if (!!$(this).attr("file")) {var $includeObj = $(this);$(this).load($(this).attr("file"), function(html) {$includeObj.after(html).remove(); //加載的文件內容寫入到當前標簽后面并移除當前標簽})} }); 或者在index文件里只寫重復部分，剩下的一股腦放各自單獨文件 load() 進來~

AJAX?的 get() 和 post() 方法

jQuery get() 和 post() 方法用于通過 HTTP GET 或 POST 請求從服務器請求數據。

HTTP 請求：GET vs. POST

兩種在客戶端和服務器端進行請求-響應的常用方法是：GET 和 POST。

GET?- 從指定的資源請求數據
POST?- 向指定的資源提交要處理的數據

GET 基本上用于從服務器獲得（取回）數據。注釋：GET 方法可能返回緩存數據。

POST 也可用于從服務器獲取數據。不過，POST 方法不會緩存數據，并且常用于連同請求一起發送數據。

如需學習更多有關 GET 和 POST 以及兩方法差異的知識，請閱讀我們的?HTTP 方法 - GET 對比 POST。

jQuery $.get() 方法

$.get() 方法通過 HTTP GET 請求從服務器上請求數據。

語法：$.get(URL,callback);

必需的?URL?參數規定您希望請求的 URL。
可選的?callback?參數是請求成功后所執行的函數名。

下面的例子使用 $.get() 方法從服務器上的一個文件中取回數據：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){$("button").click(function(){$.get("/try/ajax/demo_test.php",function(data,status){alert("數據: " + data + "\n狀態: " + status);});}); }); </script> </head> <body><button>發送一個 HTTP GET 請求并獲取返回結果</button></body> </html>

$.get() 方法的參數

第一個參數是我們希望請求的 URL（"demo_test.php"）。
第二個參數是回調函數。第一個回調參數存有被請求頁面的內容，第二個回調參數存有請求的狀態。

提示：?這個 PHP 文件 ("demo_test.php") 類似這樣：

<?php echo '這是個從PHP文件中讀取的數據。'; ?>

jQuery $.post() 方法

$.post() 方法通過 HTTP POST 請求向服務器提交數據。

語法：$.post(URL,data,callback);

必需的?URL?參數規定您希望請求的 URL。
可選的?data?參數規定連同請求發送的數據。
可選的?callback?參數是請求成功后所執行的函數名。

下面的例子使用 $.post() 連同請求一起發送數據：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){$("button").click(function(){$.post("/try/ajax/demo_test_post.php",{name:"菜鳥教程",url:"http://www.runoob.com"},function(data,status){alert("數據: \n" + data + "\n狀態: " + status);});}); }); </script> </head> <body><button>發送一個 HTTP POST 請求頁面并獲取返回內容</button></body> </html>

$.post() 的第一個參數是我們希望請求的 URL ("demo_test_post.php")。

然后我們連同請求（name 和 url）一起發送數據。

"demo_test_post.php" 中的 PHP 腳本讀取這些參數，對它們進行處理，然后返回結果。

第三個參數是回調函數。第一個回調參數存有被請求頁面的內容，而第二個參數存有請求的狀態。

提示：?這個 PHP 文件 ("demo_test_post.php") 類似這樣：

<?php $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : ''; $url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : ''; echo '網站名: ' . $name; echo "\n"; echo 'URL 地址: ' .$url; ?>

jQuery AJAX 方法

AJAX 是一種與服務器交換數據的技術，可以在不重新載入整個頁面的情況下更新網頁的一部分。

下面的表格列出了所有的 jQuery AJAX 方法：

方法描述

$.ajax()	執行異步 AJAX 請求
$.ajaxPrefilter()	在每個請求發送之前且被 $.ajax() 處理之前，處理自定義 Ajax 選項或修改已存在選項
$.ajaxSetup()	為將來的 AJAX 請求設置默認值
$.ajaxTransport()	創建處理 Ajax 數據實際傳送的對象
$.get()	使用 AJAX 的 HTTP GET 請求從服務器加載數據
$.getJSON()	使用 HTTP GET 請求從服務器加載 JSON 編碼的數據
$.getScript()	使用 AJAX 的 HTTP GET 請求從服務器加載并執行 JavaScript
$.param()	創建數組或對象的序列化表示形式（可用于 AJAX 請求的 URL 查詢字符串）
$.post()	使用 AJAX 的 HTTP POST 請求從服務器加載數據
ajaxComplete()	規定 AJAX 請求完成時運行的函數
ajaxError()	規定 AJAX 請求失敗時運行的函數
ajaxSend()	規定 AJAX 請求發送之前運行的函數
ajaxStart()	規定第一個 AJAX 請求開始時運行的函數
ajaxStop()	規定所有的 AJAX 請求完成時運行的函數
ajaxSuccess()	規定 AJAX 請求成功完成時運行的函數
load()	從服務器加載數據，并把返回的數據放置到指定的元素中
serialize()	編碼表單元素集為字符串以便提交
serializeArray()	編碼表單元素集為 names 和 values 的數組

jQuery?屬性

jQuery 屬性

方法描述

context	在版本 1.10 中被廢棄。包含被傳遞到 jQuery 的原始上下文
jquery	包含 jQuery 的版本號
jQuery.fx.interval	改變以毫秒計的動畫運行速率
jQuery.fx.off	對所有動畫進行全局禁用或啟用
jQuery.support	包含表示不同瀏覽器特性或漏洞的屬性集（主要用于 jQuery 的內部使用）
length	包含 jQuery 對象中元素的數目
jQuery.cssNumber	包含所有可以不使用單位的CSS屬性的對象

jQuery 雜項方法

方法描述

data()	向被選元素附加數據，或者從被選元素獲取數據
each()	為每個匹配元素執行函數
get()	獲取由選擇器指定的 DOM 元素
index()	從匹配元素中搜索給定元素
$.noConflict()	釋放變量 $ 的 jQuery 控制權
$.param()	創建數組或對象的序列化表示形式（可在生成 AJAX 請求時用于 URL 查詢字符串中）
removeData()	移除之前存放的數據
size()	在版本 1.8 中被廢棄。返回被 jQuery 選擇器匹配的 DOM 元素的數量
toArray()	以數組的形式檢索所有包含在 jQuery 集合中的所有 DOM 元素
pushStack()	將一個DOM元素集合加入到jQuery棧
$.when()	提供一種方法來執行一個或多個對象的回調函數

jQuery 實用工具

方法描述

$.boxModel	在版本 1.8 中被廢棄。檢測瀏覽器是否使用W3C的CSS盒模型渲染當前頁面
$.browser	在版本 1.9 中被廢棄。返回用戶當前使用的瀏覽器的相關信息
$.contains()	判斷另一個DOM元素是否是指定DOM元素的后代
$.each()	遍歷指定的對象和數組
$.extend()	將一個或多個對象的內容合并到目標對象
$.fn.extend()	為jQuery擴展一個或多個實例屬性和方法
$.globalEval()	全局性地執行一段JavaScript代碼
$.grep()	過濾并返回滿足指定函數的數組元素
$.inArray()	在數組中查找指定值并返回它的索引值（如果沒有找到，則返回-1）
$.isArray()	判斷指定參數是否是一個數組
$.isEmptyObject()	檢查對象是否為空（不包含任何屬性）
$.isFunction()	判斷指定參數是否是一個函數
$.isNumeric()	判斷指定參數是否是一個數字值
$.isPlainObject()	判斷指定參數是否是一個純粹的對象
$.isWindow()	判斷指定參數是否是一個窗口
$.isXMLDoc()	判斷一個DOM節點是否位于XML文檔中，或者其本身就是XML文檔
$.makeArray()	將一個類似數組的對象轉換為真正的數組對象
$.map()	指定函數處理數組中的每個元素(或對象的每個屬性)，并將處理結果封裝為新的數組返回
$.merge()	合并兩個數組內容到第一個數組
$.noop()	一個空函數
$.now()	返回當前時間
$.parseHTML()	將HTML字符串解析為對應的DOM節點數組
$.parseJSON()	將符合標準格式的JSON字符串轉為與之對應的JavaScript對象
$.parseXML()	將字符串解析為對應的XML文檔
$.trim()	去除字符串兩端的空白字符
$.type()	確定JavaScript內置對象的類型
$.unique()	在jQuery 3.0中被棄用。對DOM元素數組進行排序，并移除重復的元素
$.uniqueSort()	對DOM元素數組進行排序，并移除重復的元素
$.data()	在指定的元素上存取數據，并返回設置值
$.hasData()	確定一個元素是否有相關的jQuery數據
$.sub()	創建一個新的jQuery副本，其屬性和方法可以修改，而不會影響原來的jQuery對象
$.speed	創建一個包含一組屬性的對象用來定義自定義動畫
$.htmlPrefilter()	通過jQuery操作方法修改和過濾HTML字符串
$.readyException()	處理包裹在jQuery()中函數同步拋出的錯誤

jQuery 回調對象

jQuery 1.7 版本中新增的 jQuery.Callbacks() 函數,返回一個多功能對象，此對象提供了一種強大的方法來管理回調列表。它能夠增加、刪除、觸發、禁用回調函數。

方法描述

$.Callbacks()	一個多用途的回調列表對象，用來管理回調函數列表
callbacks.add()	在回調列表中添加一個回調或回調的集合
callbacks.disable()	禁用回調列表中的回調函數
callbacks.disabled()	確定回調列表是否已被禁用
callbacks.empty()	從列表中清空所有的回調
callbacks.fire()	傳入指定的參數調用所有的回調
callbacks.fired()	確定回調是否至少已經調用一次
callbacks.firewith()	給定的上下文和參數訪問列表中的所有回調
callbacks.has()	判斷回調列表中是否添加過某回調函數
callbacks.lock()	鎖定當前狀態的回調列表
callbacks.locked()	判斷回調列表是否被鎖定
callbacks.remove()	從回調列表中的刪除一個回調或回調集合

jQuery 延遲對象

在jQuery 1.5中介紹了 Deferred 延遲對象，它是通過調用 jQuery.Deferred() 方法來創建的可鏈接的實用對象。它可注冊多個回調函數到回調列表，調用回調列表并且傳遞異步或同步功能的成功或失敗的狀態。
延遲對象是可鏈接的，類似于一個 jQuery 對象可鏈接的方式，區別于它有自己的方法。在創建一個 Deferred 對象之后，您可以使用以下任何方法，直接鏈接到通過調用一個或多個的方法創建或保存的對象。

方法描述

$.Deferred()	返回一個鏈式實用對象方法來注冊多個回調
deferred.always()	當Deferred（延遲）對象被受理或被拒絕時，調用添加的處理程序
deferred.done()	當Deferred（延遲）對象被受理時，調用添加的處理程序
deferred.fail()	當Deferred（延遲）對象被拒絕時，調用添加的處理程序
deferred.isRejected()	從jQuery1.7開始已經過時，確定 Deferred 對象是否已被拒絕
deferred.isResolved()	從jQuery1.7開始已經過時，確定 Deferred 對象是否已被解決
deferred.notify()	給定一個參數，調用正在延遲對象上進行的回調函數( progressCallbacks )
deferred.notifyWith()	給定上下文和參數，調用正在延遲對象上進行的回調函數( progressCallbacks )
deferred.pipe()	過濾 and/or 鏈式延遲對象的工具方法
deferred.progress()	當Deferred（延遲）對象生成進度通知時，調用添加處理程序
deferred.promise()	返回 Deferred(延遲)的 Promise 對象
deferred.reject()	拒絕 Deferred（延遲）對象，并根據給定的參數調用任何 failCallbacks 回調函數
deferred.rejectWith()	拒絕 Deferred（延遲）對象，并根據給定的 context 和 args 參數調用任何 failCallbacks 回調函數
deferred.resolve()	解決Deferred（延遲）對象，并根據給定的參數調用任何 doneCallbacks 回調函數
deferred.resolveWith()	解決Deferred（延遲）對象，并根據給定的context 和 args 參數調用任何 doneCallbacks 回調函數
deferred.state()	確定一個Deferred（延遲）對象的當前狀態
deferred.then()	當Deferred（延遲）對象解決，拒絕或仍在進行中時，調用添加處理程序
.promise()	返回一個 Promise 對象，觀察某種類型被綁定到集合的所有行動，是否已被加入到隊列中

jQuery?插件

jQuery?Validate

jQuery?Validate：jQuery Validate | 菜鳥教程

jQuery Validate 插件為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定制選項，滿足應用程序各種需求。該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。所有的捆綁方法默認使用英語作為錯誤信息，且已翻譯成其他 37 種語言。

該插件是由 J?rn Zaefferer 編寫和維護的，他是 jQuery 團隊的一名成員，是 jQuery UI 團隊的主要開發人員，是 QUnit 的維護人員。該插件在 2006 年 jQuery 早期的時候就已經開始出現，并一直更新至今。目前版本是?1.14.0。

訪問?jQuery Validate 官網，下載最新版的 jQuery Validate 插件。

菜鳥教程提供的 1.14.0 版本下載地址：http://static.runoob.com/download/jquery-validation-1.14.0.zip

jQuery Cookie 插件

jQuery 可以通過 jquery.cookie.js 插件來操作 Cookie。

官方地址：jQuery Cookie | jQuery Plugin Registry

Github 地址：GitHub - carhartl/jquery-cookie: No longer maintained, superseded by JS Cookie:

使用 jquery.cookie.js 之前需要先引入 jQuery：

我們可以使用第三方資源庫引入這兩個文件：

jQuery 樹型菜單插件(Treeview)

：jQuery 樹型菜單插件(Treeview) | 菜鳥教程

jQuery Treeview 提供了一個無序靈活的可折疊的樹形菜單。適用于一些菜單的導航，支持基于 cookie 的持久性菜單。

jQuery?實例

jQuery 選擇器

$(this).hide()? 演示 jQuery 的 hide() 函數，隱藏當前的 HTML 元素。
$("p").hide()? 演示 jQuery 的 hide() 函數，隱藏所有 <p> 元素。
$(".test").hide()? 演示 jQuery 的 hide() 函數，隱藏所有 class="test" 的元素。
$("#test").hide()? 演示 jQuery 的 hide() 函數，隱藏 id="test" 的元素。

jQuery 事件

jQuery click()? 演示 jQuery jQuery click() 事件.
jQuery dblclick()? 演示 jQuery dblclick() 事件。
jQuery mouseenter()? 演示 jQuery mouseenter() 事件。
jQuery mouseleave()? 演示 jQuery mouseleave() 事件。
jQuery mousedown()? 演示 jQuery mousedown() 事件。
jQuery mouseup()? 演示 jQuery mouseup() 事件。
jQuery hover()? 演示 jQuery hover? () 事件。
jQuery focus() 和 blur()? 演示 jQuery focus() 和 blur() 事件。
實例解析

jQuery 隱藏/顯示

jQuery hide()? 演示 jQuery hide() 方法。
jQuery hide() 和 show()? 演示jQuery hide() 和 show() 方法。
jQuery toggle()? jQuery toggle() 用于切換 hide() 和 show() 方法。
jQuery hide()? 另外一個隱藏文本的實例。
實例解析

jQuery 淡入淡出

jQuery fadeIn()? 演示 jQuery fadeIn() 方法。
jQuery fadeOut()? 演示 jQuery fadeOut() 方法。
jQuery fadeToggle()? 演示 jQuery fadeToggle() 方法。
jQuery fadeTo()? 演示 jQuery fadeTo() 方法。
實例解析

jQuery 滑動

jQuery slideDown()? 演示 jQuery slideDown() 方法。
jQuery slideUp()? 演示 jQuery slideUp() 方法。
jQuery slideToggle()? 演示 jQuery slideToggle() 方法。
實例解析

jQuery 動畫

jQuery animate()? 演示簡單的 jQuery animate() 方法。
jQuery animate() - 設置多個css屬性? 演示通過 jQuery animate() 方法改變樣式。
jQuery animate() - 使用相關值? 演示如何在 jQuery animate() 方法中使用相關值。
jQuery animate() - 使用預定義值? 演示通過 animate() 方法預定義 "hide", "show", "toggle" 值。
jQuery animate()? 演示更多 jQuery animate() 方法實例
jQuery animate()? 演示更多 jQuery animate() 方法實例 (多個 animate() 回調).
實例解析

jQuery 停止動畫

jQuery stop() 滑動? 演示 jQuery stop() 方法。
jQuery stop() 動畫 (帶參數)? 演示 jQuery stop() 方法。
實例解析

jQuery HTML 獲取和屬性

jQuery text() 和 html() - 獲取文本和內容? 使用jQuery text() 和 html() 方法獲取內容。
jQuery val() - 獲取值? 使用jQuery val() 方法獲取表單的字段值。
jQuery attr() - 獲取屬性值? 使用jQuery attr() 方法獲取屬性值。
實例解析

jQuery HTML 設置內容和屬性

jQuery text(), html(), 和 val() - 設置內容? 使用 jQuery text(), html() 和 val() 方法設置內容。
jQuery text() 和 html() - 設置內容并使用回調函數? 使用 text() 和 html() 設置內容并使用回調函數
jQuery attr() - 設置屬性值? 使用 jQuery attr() 方法設置屬性值。
jQuery attr() - 設置多個屬性值? 使用jQuery attr() 方法設置多個屬性值。
jQuery attr() - 設置屬性值并使用回調函數? 設置屬性值 + 并使用回調函數調用attr().
實例解析

jQuery HTML 添加元素/內容

jQuery append()? 在選取元素的末尾添加內容
jQuery prepend()? 在選取元素的開頭添加內容
jQuery append() -插入多個元素? 創新新的 text/HTML 元素, jQuery 和 JavaScript/DOM。添加在新元素文本后。
jQuery after() 和 before()? 在選取元素的前后添加 HTML　元素。
jQuery after() - 插入多個元素? 創新新的 text/HTML 元素,jQuery和 JavaScript/DOM。在選取元素的末尾插入新元素。
實例解析

jQuery HTML 移除元素/內容

jQuery remove()? 移除選取的元素
jQuery empty()? 移除選取元素的所有子元素
jQuery remove() - 使用參數? 過濾元素并移除
實例解析

jQuery Get 和設置 CSS 類

jQuery addClass()? 不同元素添加 class 屬性
jQuery addClass() - 多個類? 使用 addClass() 方法添加多個類
jQuery removeClass()? 移除指定元素的類
jQuery toggleClass()? 在選取的元素切換（添加/刪除）類
實例解析

jQuery css() 方法

jQuery css() - 返回 CSS 屬性? 返回第一個匹配元素的css屬性值
jQuery css() - 設置 CSS 屬性? 設置所有配置元素指定的 CSS 屬性
jQuery css() - 設置 CSS 屬性? 設置多個匹配元素的 CSS 屬性
實例解析

jQuery 尺寸

jQuery - 返回 width() 和 height()? 返回指定元素的 width 和 height
jQuery - 返回 innerWidth() 和 innerHeight()? 返回指定元素的 inner-width/height
jQuery - 返回 outerWidth() 和 outerHeight()? 返回指定元素的 outer-width/height
jQuery - 返回 outerWidth(true) 和 outerHeight(true)? 返回指定元素的 outer-width/height (包含外邊框)
jQuery - 返回 width() 和 height() of document 和 window? 返回 HTML 文檔和窗口的 width 和 height
jQuery - 設置 width() 和 height()? 設置指定元素的 width 和 height
實例解析

jQuery 遍歷 - 祖先

jQuery parent()? 演示 jQuery parent() 方法。
jQuery parents()? 演示 jQuery parents() 方法。
jQuery parentsUntil()? 演示 jQuery parentsUntil() 方法。
實例解析

jQuery 遍歷 - 后代

jQuery children()? 演示 jQuery children() 方法。
jQuery find()? 演示 jQuery find() 方法。
實例解析

jQuery 遍歷 - 同胞(siblings)

jQuery siblings()? 演示 jQuery siblings() 方法。
jQuery next()? 演示 jQuery next() 方法。
jQuery nextAll()? 演示 jQuery nextAll() 方法。
jQuery nextUntil()? 演示 jQuery nextUntil() 方法。
實例解析

jQuery AJAX load() 方法

jQuery load()? 異步載入文件內容并插入到 <div> 元素中。
jQuery load()? 異步載入文件內容中指定的元素內容并插入到 <div> 元素.
jQuery load() - 使用回調函數(callback)? 使用 jQuery load() 方法的回調函數。
實例解析

jQuery AJAX get() 和 post() 方法

jQuery get()? 使用 $.get() 方法從服務端異步獲取數據
jQuery post()? 使用 $.post() 方法從服務端異步獲取數據
實例解析

其他實例

jQuery 動態粒子效果

jQuery 參考手冊

總結

以上是生活随笔為你收集整理的jQuery 教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： dsniff 和 Ettercap 和
下一篇：彻底搞懂 Scrapy 的中间件

编程问答

jQuery 教程

jQuery?簡介

什么是 jQuery ？

為什么使用 jQuery ？

jQuery?安裝

網頁中添加 jQuery

下載 jQuery

替代方案

jQuery 使用版本

jQuery?語法

jQuery 語法

文檔就緒事件

jQuery 入口函數與 JavaScript 入口函數的區別：

jQuery?選擇器

jQuery 選擇器

元素 選擇器

#id 選擇器

.class 選擇器

JavaScript 之 DOM 對象屬性操作

更多實例

1.基本選擇器

2.層次選擇器

3.過濾選擇器(重點)

4. 表單選擇器

獨立文件中使用 jQuery 函數

jQuery?事件

什么是事件？

jQuery 事件方法語法

常用的 jQuery 事件方法

$(document).ready()

click()

dblclick()

mouseenter()

mouseleave()

mousedown()

mouseup()

hover()

focus()

blur()

jQuery 事件方法

jQuery 特效效果

jQuery 效果方法

jQuery 操作 HTML

jQuery DOM 操作

獲得內容 - text()、html() 以及 val()

獲取屬性 - attr()

jQuery 遍歷

什么是遍歷？

jQuery HTML / CSS 方法

jQuery --- AJAX 簡介

什么是 AJAX？

關于 jQuery 與 AJAX

jQuery load() 方法

AJAX?的 get() 和 post() 方法

HTTP 請求：GET vs. POST

jQuery $.get() 方法

jQuery $.post() 方法

jQuery AJAX 方法

jQuery?屬性

jQuery 雜項方法

jQuery 實用工具

jQuery 回調對象

jQuery 延遲對象

jQuery?插件

jQuery?Validate

jQuery Cookie 插件

jQuery 樹型菜單插件(Treeview)

jQuery?實例

jQuery 選擇器

jQuery 事件

jQuery 隱藏/顯示

jQuery 淡入淡出

jQuery 滑動

jQuery 動畫

jQuery 停止動畫

jQuery HTML 獲取 和 屬性

jQuery HTML 設置內容和屬性

jQuery HTML 添加元素/內容

jQuery HTML 移除元素/內容

元素選擇器

jQuery HTML 獲取和屬性

jQuery Get 和設置 CSS 類