目錄

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

什么是 jQuery ？

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

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

基礎jQuery 語法

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

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

所有 jQuery 函數位于一個 document ready 函數中：

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

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

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

jQuery 選擇器

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

#id 選擇器
當用戶點擊按鈕后，有 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 () - 設置或返回所選元素的文本內容
• html () - 設置或返回所選元素的內容（包括 HTML 標記）
• val () - 設置或返回表單字段的值

實例：

//獲得內容 - text ()、html () 以及 val () $("#btn1").click(function(){alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){alert("HTML: " + $("#test").html()); });//設置內容 - 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 操作的方法。我們將學習下面這些：

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

實例

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

例如：

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

jQuery 遍歷

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

下圖展示了一個家族樹。通過 jQuery 遍歷，您能夠從被選（當前的）元素開始，輕松地在家族樹中向上移動（祖先），向下移動（子孫），水平移動（同胞）。這種移動被稱為對 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 是與服務器交換數據的技術，它在不重載全部頁面的情況下，實現了對部分網頁的更新。

jQuery load () 方法

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

語法:

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

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

可選的data (Map) 是 發送至服務器的 key/value 數據。
實例：

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

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

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

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

實例

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

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

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

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

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

jQuery $.get () 方法

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

$.get(URL,callback);

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

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

jQuery $.post () 方法

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

$.post(URL,data,callback);

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

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

$.post函數會從頁面傳信息到php頁面，PHP頁面通過
$.get () 和 $.post () 方法是 jQuery 中的全局函數，而在此之前講的 load () 是對 jQuery 對象進行操作的。

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教程——jQuery的快速入门的全部內容，希望文章能夠幫你解決所遇到的問題。

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