jQuery 選取器 （基礎惡補)

標籤：mouseover   滑鼠移至上方   sel   操作方法   插入   path   輸入   hello   css   

jQuery 元素選取器

jQuery 使用 CSS 選取器來選取 HTML 元素。

$("p") 選取 <p> 元素。

$("p.intro") 選取所有 class="intro" 的 <p> 元素。

$("p#demo") 選取所有 id="demo" 的 <p> 元素。

 

jQuery 屬性選取器

jQuery 使用 XPath 運算式來選擇帶有給定屬性的元素。

$("[href]") 選取所有帶有 href 屬性的元素。

$("[href=‘#‘]") 選取所有帶有 href 值等於 "#" 的元素。

$("[href!=‘#‘]") 選取所有帶有 href 值不等於 "#" 的元素。

$("[href$=‘.jpg‘]") 選取所有 href 值以 ".jpg" 結尾的元素。

 

更多的選取器執行個體

文法	描述
$(this)	當前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每個 <ul> 的第一個 <li> 元素
$("[href$=‘.jpg‘]")	所有帶有以 ".jpg" 結尾的屬性值的 href 屬性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

 

Event 函數	綁定函數至
$(document).ready(function)	將函數綁定到文檔的就緒事件（當文檔完成載入時）
$(selector).click(function)	觸發或將函數綁定到被選元素的點擊事件
$(selector).dblclick(function)	觸發或將函數綁定到被選元素的雙擊事件
$(selector).focus(function)	觸發或將函數綁定到被選元素的獲得焦時間點事件
$(selector).mouseover(function)	觸發或將函數綁定到被選元素的滑鼠移至上方事件

 

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

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

執行個體

$("button").click(function(){  $("p").toggle();});

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

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

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

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

執行個體

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

下面的例子示範如何通過 jQuery val() 方法獲得輸入欄位的值：

執行個體

$("#btn1").click(function(){  alert("Value: " + $("#test").val());});

擷取屬性 - attr()

jQuery attr() 方法用於擷取屬性值。

下面的例子示範如何獲得連結中 href 屬性的值：

執行個體

$("button").click(function(){  alert($("#w3s").attr("href"));});

jQuery 文檔操作方法

這些方法對於 XML 文檔和 HTML 文檔均是適用的，除了：html()。

方法	描述
addClass()	向匹配的元素添加指定的類名。
after()	在匹配的元素之後插入內容。
append()	向匹配元素集合中的每個元素結尾插入由參數指定的內容。
appendTo()	向目標結尾插入匹配元素集合中的每個元素。
attr()	設定或返回匹配元素的屬性和值。
before()	在每個匹配的元素之前插入內容。
clone()	建立匹配元素集合的副本。
detach()	從 DOM 中移除匹配元素集合。
empty()	刪除匹配的元素集合中所有的子節點。
hasClass()	檢查匹配的元素是否擁有指定的類。
html()	設定或返回匹配的元素集合中的 HTML 內容。
insertAfter()	把匹配的元素插入到另一個指定的元素集合的後面。
insertBefore()	把匹配的元素插入到另一個指定的元素集合的前面。
prepend()	向匹配元素集合中的每個元素開頭插入由參數指定的內容。
prependTo()	向目標開頭插入匹配元素集合中的每個元素。
remove()	移除所有匹配的元素。
removeAttr()	從所有匹配的元素中移除指定的屬性。
removeClass()	從所有匹配的元素中刪除全部或者指定的類。
replaceAll()	用匹配的元素替換所有匹配到的元素。
replaceWith()	用新內容替換匹配的元素。
text()	設定或返回匹配元素的內容。
toggleClass()	從匹配的元素中添加或刪除一個類。
unwrap()	移除並替換指定元素的父元素。
val()	設定或返回匹配元素的值。
wrap()	把匹配的元素用指定的內容或元素包裹起來。
wrapAll()	把所有匹配的元素用指定的內容或元素包裹起來。
wrapinner()	將每一個匹配的元素的子內容用指定的內容或元素包裹起來。

jQuery 屬性操作方法

下面列出的這些方法獲得或設定元素的 DOM 屬性。

這些方法對於 XML 文檔和 HTML 文檔均是適用的，除了：html()。

方法	描述
addClass()	向匹配的元素添加指定的類名。
attr()	設定或返回匹配元素的屬性和值。
hasClass()	檢查匹配的元素是否擁有指定的類。
html()	設定或返回匹配的元素集合中的 HTML 內容。
removeAttr()	從所有匹配的元素中移除指定的屬性。
removeClass()	從所有匹配的元素中刪除全部或者指定的類。
toggleClass()	從匹配的元素中添加或刪除一個類。
val()	設定或返回匹配元素的值。

jQuery CSS 操作函數

下面列出的這些方法設定或返回元素的 CSS 相關屬性。

CSS 屬性	描述
css()	設定或返回匹配元素的樣式屬性。
height()	設定或返回匹配元素的高度。
offset()	返回第一個匹配元素相對於文檔的位置。
offsetParent()	返回最近的定位祖先元素。
position()	返回第一個匹配元素相對於父元素的位置。
scrollLeft()	設定或返回匹配元素相對捲軸左側的位移。
scrollTop()	設定或返回匹配元素相對捲軸頂部的位移。
width()	設定或返回匹配元素的寬度。

設定內容 - text()、html() 以及 val()

我們將使用前一章中的三個相同的方法來設定內容：

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

下面的例子示範如何通過 text()、html() 以及 val() 方法來設定內容：

執行個體

$("#btn1").click(function(){  $("#test1").text("Hello world!");});$("#btn2").click(function(){  $("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){  $("#test3").val("Dolly Duck");});

text()、html() 以及 val() 的回呼函數

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

下面的例子示範帶有回呼函數的 text() 和 html()：

執行個體

$("#btn1").click(function(){  $("#test1").text(function(i,origText){    return "Old text: " + origText + " New text: Hello world!    (index: " + i + ")";  });});$("#btn2").click(function(){  $("#test2").html(function(i,origText){    return "Old html: " + origText + " New html: Hello <b>world!</b>    (index: " + i + ")";  });});

設定屬性 - attr()

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

下面的例子示範如何改變（設定）連結中 href 屬性的值：

執行個體

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

attr() 方法也允許您同時設定多個屬性。

下面的例子示範如何同時設定 href 和 title 屬性：

執行個體

$("button").click(function(){  $("#w3s").attr({    "href" : "http://www.w3school.com.cn/jquery",    "title" : "W3School jQuery Tutorial"  });});

attr() 的回呼函數

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

下面的例子示範帶有回呼函數的 attr() 方法：

執行個體

$("button").click(function(){  $("#w3s").attr("href", function(i,origValue){    return origValue + "/jquery";  });});

添加新的 HTML 內容

我們將學慣用於添加新內容的四個 jQuery 方法：

• append() - 在被選元素的結尾插入內容
• prepend() - 在被選元素的開頭插入內容
• after() - 在被選元素之後插入內容
• before() - 在被選元素之前插入內容

jQuery append() 方法

jQuery append() 方法在被選元素的結尾插入內容。

執行個體

$("p").append("Some appended text.");

在上面的例子中，我們只在被選元素的開頭/結尾插入文本/HTML。

不過，append() 和 prepend() 方法能夠通過參數接收無限數量的新元素。可以通過 jQuery 來產生文本/HTML（就像上面的例子那樣），或者通過 JavaScript 代碼和 DOM 元素。

在下面的例子中，我們建立若干個新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來建立。然後我們通過 append() 方法把這些新元素追加到文本中（對 prepend() 同樣有效）：

執行個體

function appendText(){var txt1="<p>Text.</p>";               // 以 HTML 建立新元素var txt2=$("<p></p>").text("Text.");   // 以 jQuery 建立新元素var txt3=document.createElement("p");  // 以 DOM 建立新元素txt3.innerHTML="Text.";$("p").append(txt1,txt2,txt3);         // 追加新元素}

通過 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能夠通過參數接收無限數量的新元素。可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來建立新元素。

在下面的例子中，我們建立若干新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來建立。然後我們通過 after() 方法把這些新元素插到文本中（對 before() 同樣有效）：

執行個體

function afterText(){var txt1="<b>I </b>";                    // 以 HTML 建立新元素var txt2=$("<i></i>").text("love ");     // 通過 jQuery 建立新元素var txt3=document.createElement("big");  // 通過 DOM 建立新元素txt3.innerHTML="jQuery!";$("img").after(txt1,txt2,txt3);          // 在 img 之後插入新元素}

刪除元素/內容

如需刪除元素和內容，一般可使用以下兩個 jQuery 方法：

• remove() - 刪除被選元素（及其子項目）
• empty() - 從被選元素中刪除子項目

jQuery remove() 方法

jQuery remove() 方法刪除被選元素及其子項目。

執行個體

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

jQuery empty() 方法

jQuery empty() 方法刪除被選元素的子項目。

執行個體

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

過濾被刪除的元素

jQuery remove() 方法也可接受一個參數，允許您對被刪元素進行過濾。

該參數可以是任何 jQuery 選取器的文法。

下面的例子刪除 class="italic" 的所有 <p> 元素：

執行個體

$("p").remove(".italic");

jQuery 操作 CSS

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

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

執行個體樣式表

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

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

jQuery addClass() 方法

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

執行個體

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

jQuery removeClass() 方法

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

執行個體

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

jQuery toggleClass() 方法

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

執行個體

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

jQuery 選取器 （基礎惡補)