目錄

• 什么是 jQuery ？
• 基礎(chǔ)jQuery 語法
• jQuery 選擇器
• jQuery DOM 操作
• jQuery 操作 CSS
• jQuery 遍歷
• jQuery - AJAX 簡介
• • • jQuery load () 方法
• jQuery - AJAX get () 和 post () 方法
• • • jQuery $.get () 方法
    • jQuery $.post () 方法
• jQuery 雜項方法

什么是 jQuery ？

jQuery 是一個 JavaScript 函數(shù)庫。
jQuery 是一個輕量級的 “寫的少，做的多” 的 JavaScript 庫。
jQuery 庫包含以下功能：

• HTML 元素選取
• HTML 元素操作
• CSS 操作
• HTML 事件函數(shù)
• JavaScript 特效和動畫
• HTML DOM 遍歷和修改
• AJAX
• Utilities
  提示： 除此之外，Jquery 還提供了大量的插件。

基礎(chǔ)jQuery 語法

jQuery 語法是通過選取 HTML 元素，并對選取的元素執(zhí)行某些操作。
通過 jQuery，您可以選取（查詢，query） HTML 元素，并對它們執(zhí)行 “操作”（actions）。
基礎(chǔ)語法： $(selector).action()

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

所有 jQuery 函數(shù)位于一個 document ready 函數(shù)中：

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

這是為了防止文檔在完全加載（就緒）之前運行 jQuery 代碼，即在 DOM 加載完成后才可以對 DOM 進行操作。
如果在文檔沒有完全加載之前就運行函數(shù)，操作可能失敗。
提示：簡潔寫法（與以上寫法效果相同）:

$(function(){//這是jQuery的入口函數(shù)// 開始寫 jQuery 代碼...});

jQuery 選擇器

• jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。
• jQuery 選擇器基于元素的 id、類、類型、屬性、屬性值等 “查找”（或選擇）HTML 元素。 它基于已經(jīng)存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。
• jQuery 中所有選擇器都以美元符號開頭：$()。

#id 選擇器
當(dāng)用戶點擊按鈕后，有 id=“test” 屬性的元素將被隱藏：
實例

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

.class 選擇器
用戶點擊按鈕后所有帶有 class=“test” 屬性的元素都隱藏：
實例

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

jQuery DOM 操作

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

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

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

實例：

//獲得內(nèi)容 - text ()、html () 以及 val () $("#btn1").click(function(){alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){alert("HTML: " + $("#test").html()); });//設(shè)置內(nèi)容 - text ()、html () 以及 val () $("#btn1").click(function(){$("#test1").text("Hello world!"); }); $("#btn2").click(function(){$("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){$("#test3").val("RUNOOB"); });

jQuery 操作 CSS

jQuery 擁有若干進行 CSS 操作的方法。我們將學(xué)習(xí)下面這些：

• addClass () - 向被選元素添加一個或多個類
• removeClass () - 從被選元素刪除一個或多個類
• toggleClass () - 對被選元素進行添加 / 刪除類的切換操作
• css () - 設(shè)置或返回樣式屬性

實例

$("button").click(function(){$("h1,h2,p").addClass("blue");$("div").addClass("important"); });//使用此方法，某些標簽會增添class這個屬性，如果此時在配合css樣式

例如：

.blue {color:blue; } //就可以讓標簽達到變色的效果。

jQuery 遍歷

什么是遍歷？
jQuery 遍歷，意為 “移動”，用于根據(jù)其相對于其他元素的關(guān)系來 “查找”（或選取）HTML 元素。以某項選擇開始，并沿著這個選擇移動，直到抵達您期望的元素為止。

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

遍歷 DOM 樹
這些 jQuery 方法很有用，它們用于遍歷 DOM 樹：

• parent() ：方法返回被選元素的直接父元素。
• parents()：方法返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 ()。
• parentsUntil()：方法返回介于兩個給定元素之間的所有祖先元素。
• children () 方法返回被選元素的所有直接子元素。
• find () 方法返回被選元素的后代元素，一路向下直到最后一個后代。

下面的例子返回介于 <span>與<div> 元素之間的所有祖先元素：
實例

$(document).ready(function(){$("span").parentsUntil("div"); });

下面的例子返回屬于 <div>后代的所有 <span>元素：
實例

$(document).ready(function(){$("div").find("span"); });

jQuery - AJAX 簡介

AJAX 是與服務(wù)器交換數(shù)據(jù)的技術(shù)，它在不重載全部頁面的情況下，實現(xiàn)了對部分網(wǎng)頁的更新。

jQuery load () 方法

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

語法:

$(selector).load(URL,data,callback);

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

可選的data (Map) 是 發(fā)送至服務(wù)器的 key/value 數(shù)據(jù)。
實例：

$("#box").load("testa.html",{name:"bingo",sex:"man"});

可選的 callback 參數(shù)規(guī)定當(dāng) load () 方法完成后所要允許的回調(diào)函數(shù)。回調(diào)函數(shù)可以設(shè)置不同的參數(shù)：

• responseTxt - 包含調(diào)用成功時的結(jié)果內(nèi)容
• statusTXT - 包含調(diào)用的狀態(tài)
• xhr - 包含 XMLHttpRequest 對象

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

實例

$("button").click(function(){$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){if(statusTxt=="success")alert(" 外部內(nèi)容加載成功！");if(statusTxt=="error")alert("Error: "+xhr.status+": "+xhr.statusText);}); });

jQuery - AJAX get () 和 post () 方法

jQuery get () 和 post () 方法用于通過 HTTP GET 或 POST 請求從服務(wù)器請求數(shù)據(jù)。
HTTP 請求：GET vs. POST
兩種在客戶端和服務(wù)器端進行請求 - 響應(yīng)的常用方法是：GET 和 POST。

• GET - 從指定的資源請求數(shù)據(jù)
• POST - 向指定的資源提交要處理的數(shù)據(jù)

GET 基本上用于從服務(wù)器獲得（取回）數(shù)據(jù)。注釋：GET 方法可能返回緩存數(shù)據(jù)。
POST 也可用于從服務(wù)器獲取數(shù)據(jù)。不過，POST 方法不會緩存數(shù)據(jù)，并且常用于連同請求一起發(fā)送數(shù)據(jù)。

jQuery $.get () 方法

$.get () 方法通過 HTTP GET 請求從服務(wù)器上請求數(shù)據(jù)。
語法：

$.get(URL,callback);

必需的 URL 參數(shù)規(guī)定您希望請求的 URL。
可選的 callback 參數(shù)是請求成功后所執(zhí)行的函數(shù)名。
下面的例子使用 $.get () 方法從服務(wù)器上的一個文件中取回數(shù)據(jù)：
實例

$("button").click(function(){$.get("demo_test.php",function(data,status){alert(" 數(shù)據(jù): " + data + "\n 狀態(tài): " + status);}); });

jQuery $.post () 方法

$.post () 方法通過 HTTP POST 請求向服務(wù)器提交數(shù)據(jù)。
語法:

$.post(URL,data,callback);

必需的 URL 參數(shù)規(guī)定您希望請求的 URL。
可選的 data 參數(shù)規(guī)定連同請求發(fā)送的數(shù)據(jù)。
可選的 callback 參數(shù)是請求成功后所執(zhí)行的函數(shù)名。
下面的例子使用 $.post () 連同請求一起發(fā)送數(shù)據(jù)：
實例

$("button").click(function(){$.post("/try/ajax/demo_test_post.php",{name:" 菜鳥教程 ",url:"http://www.runoob.com"},function(data,status){alert(" 數(shù)據(jù): \n" + data + "\n 狀態(tài): " + status);}); });

$.post函數(shù)會從頁面?zhèn)餍畔⒌絧hp頁面，PHP頁面通過
$.get () 和 $.post () 方法是 jQuery 中的全局函數(shù)，而在此之前講的 load () 是對 jQuery 對象進行操作的。

jQuery 雜項方法

• data() 向被選元素附加數(shù)據(jù)，或者從被選元素獲取數(shù)據(jù)
• each() 為每個匹配元素執(zhí)行函數(shù)
• get() 獲取由選擇器指定的 DOM 元素
• index() 從匹配元素中搜索給定元素
• $.noConflict() 釋放變量 $ 的 jQuery 控制權(quán)
• $.param() 創(chuàng)建數(shù)組或?qū)ο蟮男蛄谢硎拘问?#xff08;可在生成 AJAX 請求時用于 URL 查詢字符串中）
• removeData() 移除之前存放的數(shù)據(jù)
• size() 在版本 1.8 中被廢棄。返回被 jQuery 選擇器匹配的 DOM 元素的數(shù)量
• toArray() 以數(shù)組的形式檢索所有包含在 jQuery 集合中的所有 DOM 元素
• pushStack() 將一個 DOM 元素集合加入到 jQuery 棧
• $.when() 提供一種方法來執(zhí)行一個或多個對象的回調(diào)函數(shù)

總結(jié)

以上是生活随笔為你收集整理的jQuery教程——jQuery的快速入门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。