標籤：

jQuery速覽（一）

05-16

一、簡介

jQuery 是一個 JavaScript 庫，可以通過一行簡單的標記被添加到網頁中。

1、jQuery 安裝：

（1）從 jquery.com 中下載， 將下載的文件放在網頁的同一目錄下，就可以使用jQuery：

<head><script src="jquery-1.10.2.min.js"></script></head>

（2）如果您不希望下載並存放 jQuery，那麼也可以通過 CDN（內容分發網路） 引用它：

百度 CDN:<head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></head>

2、jQuery 語法：

（1）基礎語法： $(selector).action()

通過選取 HTML 元素，並對選取的元素執行某些操作：

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

實例:

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

（2）文檔就緒事件：

為了防止文檔在完全載入（就緒）之前運行 jQuery 代碼，所有 jQuery 函數位於一個 document ready 函數中，即在 DOM 載入完成後才可以對 DOM 進行操作。如果在文檔沒有完全載入之前就運行函數，操作可能失敗：

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

3、jQuery 選擇器：

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

（1）元素選擇器：

$("p")

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

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("p").hide(); });});</script></head><body><h2>這是一個標題</h2><p>這是一個段落。</p><p>這是另一個段落。</p><button>點我</button></body></html>

（2）#id 選擇器

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

$("#test")

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

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); });});</script></head><body><h2>這是一個標題</h2><p>這是一個段落</p><p id="test">這是另外一個段落</p><button>點我</button></body></html>

（3）.class 選擇器：

jQuery 類選擇器可以通過指定的 class 查找元素，語法如下：

$(".test")

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

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $(".test").hide(); });});</script></head><body><h2 class="test">這是一個標題</h2><p class="test">這是一個段落。</p><p>這是另外一個段落。</p><button>點我</button></body></html>

（4）更多實例：

（5）獨立文件中使用 jQuery 函數：

如果您的網站包含許多頁面，並且您希望您的 jQuery 函數易於維護，那麼請把您的 jQuery 函數放到獨立的 .js 文件中。當我們在教程中演示 jQuery 時，會將函數直接添加到 <head> 部分中。不過，把它們放到一個單獨的文件中會更好，就像這樣（通過 src 屬性來引用文件）：

<head><script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script><script src="my_jquery_functions.js"></script></head>

4、jQuery 事件：

（1）什麼是事件？

頁面對不同訪問者的響應叫做事件。事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。實例：

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

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

（2）jQuery 事件方法語法：

頁面中指定一個點擊事件，頁面中指定一個點擊事件：

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

（3）常用的 jQuery 事件方法：

A、$(document).ready()

允許我們在文檔完全載入完後執行函數。

B、click()

當按鈕點擊事件被觸發時會調用一個函數，該函數在用戶點擊 HTML 元素時執行。

C、dblclick()

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

D、mouseenter()

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

E、mouseleave()

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

F、mousedown()

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

G、mouseup()

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

H、hover()

hover()方法用於模擬游標懸停事件。

I、focus()

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

J、blur()

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

二、jQuery 效果

1、隱藏和顯示：

（1）jQuery hide() 和 show()：

通過 jQuery，您可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素，語法如下：

$(selector).hide(speed,callback);$(selector).show(speed,callback);可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。

下面的例子演示了帶有 speed 參數的 hide() 方法：

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("p").hide(1000); });});</script></head><body><button>隱藏</button><p>這是個段落，內容比較少。</p><p>這是另外一個小段落</p></body></html>

（2）jQuery toggle()：

通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法，語法如下：

$(selector).toggle(speed,callback);可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。

實例：顯示被隱藏的元素，並隱藏已顯示的元素：

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("p").toggle(); });});</script></head><body><button>隱藏/顯示</button><p>這是一個文本段落。</p><p>這是另外一個文本段落。</p></body></html>

2、淡入淡出：

（1）jQuery fadeIn() 方法：

用於淡入已隱藏的元素，語法為：

$(selector).fadeIn(speed,callback);可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。.可選的 callback 參數是 fading 完成後所執行的函數名稱。

下面的例子演示了帶有不同參數的 fadeIn() 方法：

$("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000);});

（2）jQuery fadeOut() 方法：

用於淡出可見元素，語法如下：

$(selector).fadeOut(speed,callback);可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數是 fading 完成後所執行的函數名稱。

（3）jQuery fadeToggle() 方法：

可以在 fadeIn() 與 fadeOut() 方法之間進行切換。如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果；如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。語法如下：

$(selector).fadeToggle(speed,callback);可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數是 fading 完成後所執行的函數名稱。

（4）jQuery fadeTo() 方法：

允許漸變為給定的不透明度（值介於 0 與 1 之間），語法如下：

$(selector).fadeTo(speed,opacity,callback);必需的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置為給定的不透明度（值介於 0 與 1 之間）。可選的 callback 參數是該函數完成後所執行的函數名稱。

3、滑動：

（1）jQuery slideDown() 方法：

用於向下滑動元素，語法如下：

$(selector).slideDown(speed,callback);可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數是滑動完成後所執行的函數名稱。

下面的例子演示了 slideDown() 方法：

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown("slow"); });});</script><style type="text/css"> #panel,#flip{ padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3;}#panel{ padding:50px; display:none;}</style></head><body><div id="flip">點我滑下面板</div><div id="panel">Hello world!</div></body></html>

（2）jQuery slideUp() 方法：

用於向上滑動元素，語法如下：

$(selector).slideUp(speed,callback);可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數是滑動完成後所執行的函數名稱。

（3）jQuery slideToggle() 方法：

可以在 slideDown() 與 slideUp() 方法之間進行切換。如果元素向下滑動，則 slideToggle() 可向上滑動它們；如果元素向上滑動，則 slideToggle() 可向下滑動它們。語法如下：

$(selector).slideToggle(speed,callback);可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數是滑動完成後所執行的函數名稱。

4、動畫：

jQuery animate() 方法用於創建自定義動畫，語法如下：

$(selector).animate({params},speed,callback);必需的 params 參數定義形成動畫的 CSS 屬性。可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數是動畫完成後所執行的函數名稱。

下面的例子演示 animate() 方法的簡單應用。它把 <div> 元素往右邊移動了 250 像素：

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:250px}); });});</script> </head><body><button>開始動畫</button><p>默認情況下，所有的 HTML 元素有一個靜態的位置，且是不可移動的。 如果需要改變為，我們需要將元素的 position 屬性設置為 relative, fixed, 或 absolute!</p><div stylex="background:#98bf21;height:100px;width:100px;position:absolute;"></div></body></html>

（1）jQuery animate() - 使用相對值：

$("button").click(function(){ $("div").animate({ left:250px, height:+=150px, width:+=150px });});

（2）jQuery animate() - 使用預定義的值：

$("button").click(function(){ $("div").animate({ height:toggle });});

（3）jQuery animate() - 使用隊列功能：

默認地，jQuery 提供針對動畫的隊列功能。這意味著如果您在彼此之後編寫多個 animate() 調用，jQuery 會創建包含這些方法調用的"內部"隊列。然後逐一運行這些 animate 調用。

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><script> $(document).ready(function(){ $("button").click(function(){ var div=$("div"); div.animate({height:300px,opacity:0.4},"slow"); div.animate({width:300px,opacity:0.8},"slow"); div.animate({height:100px,opacity:0.4},"slow"); div.animate({width:100px,opacity:0.8},"slow"); });});</script> </head><body><button>開始動畫</button><p>默認情況下，所有的 HTML 元素有一個靜態的位置，且是不可移動的。 如果需要改變為，我們需要將元素的 position 屬性設置為 relative, fixed, 或 absolute!</p><div stylex="background:#98bf21;height:100px;width:100px;position:absolute;"></div></body></html>

（4）jQuery 停止動畫：

用於停止動畫或效果，在它們完成之前。stop() 方法適用於所有 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫。語法如下：

$(selector).stop(stopAll,goToEnd);可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向後執行。可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。

5、jQuery Callback 方法：

Callback 函數在當前動畫 100% 完成之後執行。許多 jQuery 函數涉及動畫，這些函數也許會將 speed 或 duration 作為可選參數。

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("p").hide("slow",function(){ alert("段落現在被隱藏了"); }); });});</script></head><body><button>隱藏</button><p>我們段落內容，點擊「隱藏」按鈕我就會消失</p></body></html>

6、jQuery - 鏈(Chaining)

Chaining 允許我們在一條語句中運行多個 jQuery 方法（在相同的元素上）。下面的例子把 css()、slideUp() 和 slideDown() 鏈接在一起。"p1" 元素首先會變為紅色，然後向上滑動，再然後向下滑動：

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function() { $("button").click(function(){ $("#p1").css("color","red").slideUp(2000).slideDown(2000); });});</script></head><body><p id="p1">菜鳥教程!!</p><button>點我</button></body></html>

三、jQuery HTML

1、jQuery - 獲取內容和屬性：

（1）DOM = Document Object Model（文檔對象模型）

DOM 定義訪問 HTML 和 XML 文檔的標準："W3C 文檔對象模型獨立於平台和語言的界面，允許程序和腳本動態訪問和更新文檔的內容、結構以及樣式。"

（2）獲得內容 - text()、html() 以及 val()：

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

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

下面的例子演示如何通過 jQuery text() 和 html() 方法來獲得內容：

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); });});</script></head><body><p id="test">這是段落中的 <b>粗體</b> 文本。</p><button id="btn1">顯示文本</button><button id="btn2">顯示 HTML</button></body></html>

（3）獲取屬性 - attr()：

jQuery attr() 方法用於獲取屬性值，下面的例子演示如何獲得鏈接中 href 屬性的值：

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.bootcss.com/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="http://www.runoob.com" id="runoob">菜鳥教程</a></p><button>顯示 href 屬性的值</button></body></html>

2、jQuery - 設置內容和屬性：

（1）設置內容 - text()、html() 以及 val()：

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

（2）text()、html() 以及 val() 的回調函數：

上面的三個 jQuery 方法：text()、html() 以及 val()，同樣擁有回調函數。回調函數有兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函數新值返回您希望使用的字元串。下面的例子演示帶有回調函數的 text() 和 html()：

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "舊文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "舊 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; }); });});</script></head><body><p id="test1">這是一個有 <b>粗體</b> 字的段落。</p><p id="test2">這是另外一個有 <b>粗體</b> 字的段落。</p><button id="btn1">顯示 新/舊 文本</button><button id="btn2">顯示 新/舊 HTML</button></body></html>

（3）設置屬性 - attr()：

jQuery attr() 方法也用於設置/改變屬性值：

$("button").click(function(){ $("#runoob").attr("href","http://www.runoob.com/jquery");});

（4）attr() 的回調函數：

jQuery 方法 attr()，也提供回調函數。回調函數有兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函數新值返回您希望使用的字元串。

3、jQuery - 添加元素：

（1）jQuery append() 方法：

在被選元素的結尾插入內容，示例：

$("p").append("追加文本");

（2）jQuery prepend() 方法：

在被選元素的開頭插入內容，示例：

$("p").prepend("在開頭追加文本");

（3）jQuery after() 和 before() 方法：

jQuery after() 方法在被選元素之後插入內容，jQuery before() 方法在被選元素之前插入內容：

$("img").after("在後面添加文本");$("img").before("在前面添加文本");

4、jQuery - 刪除元素：

（1）jQuery remove() 方法：

用於刪除被選元素及其子元素：

$("#div1").remove();

（2）jQuery empty() 方法：

用於刪除被選元素的子元素：

$("#div1").empty();

5、jQuery - 獲取並設置 CSS 類：

下面的樣式表將用於本頁的所有例子：

.important{ font-weight:bold; font-size:xx-large;}.blue{ color:blue;}

（1）jQuery addClass() 方法：

下面的例子展示如何向不同的元素添加 class 屬性。當然，在添加類時，您也可以選取多個元素：

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); });});</script><style type="text/css">.important{ font-weight:bold; font-size:xx-large;}.blue{ color:blue;}</style></head><body><h1>標題 1</h1><h2>標題 2</h2><p>這是一個段落。</p><p>這是另外一個段落。</p><div>這是一些重要的文本!</div><br><button>為元素添加 class</button></body></html>

（2）jQuery removeClass() 方法：

下面的例子演示如何在不同的元素中刪除指定的 class 屬性：

$("button").click(function(){ $("h1,h2,p").removeClass("blue");});

（3）jQuery toggleClass() 方法：

下面的例子將展示如何使用 jQuery toggleClass() 方法。該方法對被選元素進行添加/刪除類的切換操作：

$("button").click(function(){ $("h1,h2,p").toggleClass("blue");});

6、jQuery css() 方法：

（1）返回 CSS 屬性：

如需返回指定的 CSS 屬性的值，請使用如下語法：

css("propertyname");

下面的例子將返回首個匹配元素的 background-color 值：

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ alert("背景顏色 = " + $("p").css("background-color")); });});</script></head><body><h2>這是一個標題</h2><p stylex="background-color:#ff0000">這是一個段落。</p><p stylex="background-color:#00ff00">這是一個段落。</p><p stylex="background-color:#0000ff">這是一個段落。</p><button>返回第一個 p 元素的 background-color </button></body></html>

（2）設置 CSS 屬性：

如需設置指定的 CSS 屬性，請使用如下語法：

css("propertyname","value");

下面的例子將為所有匹配元素設置 background-color 值：

$("p").css("background-color","yellow");

（3）設置多個 CSS 屬性：

如需設置多個 CSS 屬性，請使用如下語法：

css({"propertyname":"value","propertyname":"value",...});

下面的例子將為所有匹配元素設置 background-color 和 font-size：

$("p").css({"background-color":"yellow","font-size":"200%"});

7、jQuery 尺寸：

（1）jQuery width() 和 height() 方法：

width() 方法設置或返回元素的寬度（不包括內邊距、邊框或外邊距），height() 方法設置或返回元素的高度（不包括內邊距、邊框或外邊距）。下面的例子返回指定的 <div> 元素的寬度和高度：

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="div 的寬度是: " + $("#div1").width() + "</br>"; txt+="div 的高度是: " + $("#div1").height(); $("#div1").html(txt); });});</script></head><body><div id="div1" stylex="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div><br><button>顯示 div 元素的尺寸</button><p>width() - 返回元素的寬度</p><p>height() - 返回元素的高度</p></body></html>

（2）jQuery innerWidth() 和 innerHeight() 方法：

innerWidth() 方法返回元素的寬度（包括內邊距），innerHeight() 方法返回元素的高度（包括內邊距）。下面的例子返回指定的 <div> 元素的 inner-width/height：

$("button").click(function(){ var txt=""; txt+="div 寬度，包含內邊距: " + $("#div1").innerWidth() + "</br>"; txt+="div 高度，包含內邊距: " + $("#div1").innerHeight(); $("#div1").html(txt);});

（3）jQuery outerWidth() 和 outerHeight() 方法：

outerWidth() 方法返回元素的寬度（包括內邊距和邊框），outerHeight() 方法返回元素的高度（包括內邊距和邊框）。下面的例子返回指定的 <div> 元素的 outer-width/height：

$("button").click(function(){ var txt=""; txt+="div 寬度，包含內邊距和邊框: " + $("#div1").outerWidth() + "</br>"; txt+="div 高度，包含內邊距和邊框: " + $("#div1").outerHeight(); $("#div1").html(txt);});

推薦閱讀：

※關於 jQuery，什麼叫隱式迭代（implicit iteration）？
※jquery 學習 第五期
※怎麼學習 jQuery ？
※jQuery3-IIFE
※如何學習jQuery？

TAG:jQuery |