免費(fèi)AI編程助手
屬性
jQuery - 屬性
當(dāng)談到 DOM 元素時(shí)，我們可以操作的一些最基本的組件是屬性以及分配給這些元素的屬性。
大部分屬性可以作為 DOM 節(jié)點(diǎn)屬性在 JavaScript 中時(shí)可用的。一些比較常見(jiàn)的屬性是 ——
-
類名
-
標(biāo)簽名
-
id
-
超鏈接
-
標(biāo)題
-
rel
- src
考慮下述一個(gè)圖像元素的 HTML 標(biāo)記 ——
<img id="imageid" src="image.gif" alt="Image" class="myclass" title="This is an image"/>在這個(gè)元素的標(biāo)記中，標(biāo)簽名是 img，并且為 id，src，alt，類以及標(biāo)題的標(biāo)記代表了元素的屬性，每一個(gè)都包含一個(gè)名稱和一個(gè)值。
jQuery 提供給我們的方法很容易操縱元素的屬性并且我們可以訪問(wèn)元素，這樣我們也可以改變其屬性。
獲取屬性值
attr() 方法可以用來(lái)獲取與設(shè)置匹配的第一個(gè)元素的一個(gè)屬性的值或?qū)λ衅ヅ涞脑卦O(shè)置屬性值。
示例
下面是一個(gè)簡(jiǎn)單的例子，用于獲取 < em> 標(biāo)簽的標(biāo)題屬性并且用相同的值來(lái)設(shè)置 < div id="divid"> 的值 ——
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var title = $("em").attr("title");
$("#divid").text(title);
});
</script>
</head>
<body>
<div>
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
<div id="divid"></div>
</div>
</body>
</html>這將產(chǎn)生如下所示結(jié)果 ——
設(shè)置屬性值
attr(name, value) 方法使用傳遞的值，用于給包裝好的集合中的全部元素設(shè)置指定的屬性。
示例
下述是一個(gè)簡(jiǎn)單的例子，用于將圖像標(biāo)簽的 src 屬性設(shè)置到一個(gè)正確的位置 ——
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#myimg").attr("src", "/images/jquery.jpg");
});
</script>
</head>
<body>
<div>
<img id="myimg" src="wrongpath.jpg" alt="Sample image" />
</div>
</body>
</html>這將產(chǎn)生如下所示結(jié)果 ——
應(yīng)用樣式
addClass( classes ) 方法可用于將定義好的樣式表應(yīng)用到全部可匹配的元素中。你可以指定由空間隔開(kāi)的多個(gè)類。
示例
下面是一個(gè)簡(jiǎn)單的例子，設(shè)置了段落 < p> 標(biāo)簽的 class 屬性 ——
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("em").addClass("selected");
$("#myid").addClass("highlight");
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
</body>
</html>這將產(chǎn)生如下所示結(jié)果 ——
屬性方法
下表列出了一些有用的方法，你可以使用這些方法對(duì)多個(gè)屬性進(jìn)行操作 ——
| 序號(hào) | 方法 & 描述 |
|---|---|
| 1 |
attr( properties )
設(shè)置鍵/值對(duì)象作為全部可匹配的元素的屬性。 |
| 2 |
attr( key, fn )
為所有可匹配的元素設(shè)置一個(gè)單個(gè)的屬性為可計(jì)算的值。 |
| 3 |
removeAttr( name )
從每一個(gè)可匹配的元素中刪除一個(gè)屬性。 |
| 4 |
hasClass( class )
如果指定的類出現(xiàn)在至少一個(gè)可匹配的元素集合中，返回 true。 |
| 5 |
removeClass( class )
從可匹配的元素集合中刪除全部或指定的類。 |
| 6 |
toggleClass( class )
如果指定的類不存在，那么添加指定的類；如果指定的類存在，那么刪除它。 |
| 7 |
html( )
獲取第一個(gè)匹配元素的 html 內(nèi)容 (innerHTML)。 |
| 8 |
html( val )>
設(shè)置每一個(gè)可匹配元素的 html 內(nèi)容。 |
| 9 |
text( )
獲取所有可匹配元素的組合的文本內(nèi)容。 |
| 10 |
text( val )
設(shè)置所有可匹配元素的文本內(nèi)容。 |
| 11 |
val( )
獲取第一個(gè)可匹配元素的輸入值。 |
| 12 |
val( val )
如果可匹配元素在 <input> 中調(diào)用，那么設(shè)置每個(gè)可匹配元素的屬性值，但是如果可匹配元素在 <select> 中使用傳遞的 <option> 值調(diào)用，那么傳遞的選項(xiàng)就會(huì)被選中，如果可匹配元素在復(fù)選框或單選框中調(diào)用，那么所有匹配的復(fù)選框或單選框會(huì)被選中。 |
示例
與上述語(yǔ)法和示例相似，下述例子會(huì)使你對(duì)在不同的情況下使用不同的屬性方法有一個(gè)很好地了解 ——
| 序號(hào) | 選擇器 & 描述 |
|---|---|
| 1 |
$("#myID").attr("custom")
這會(huì)為第一個(gè)與 ID myID 匹配的元素返回屬性 custom 的值。 |
| 2 |
$("img").attr("alt", "Sample Image")
這會(huì)將所有圖像的 alt 屬性設(shè)置為一個(gè)新的值 "Sample Image". |
| 3 |
$("input").attr({ value: "", title: "Please enter a value" });
將所有的 <input> 元素設(shè)置為空字符串，同時(shí)將 The jQuery Example 設(shè)置為字符串 Please enter a value. |
| 4 |
$("a[href^=http://]").attr("target","_blank")
選擇帶有以 http:// 開(kāi)頭的 href 屬性的全部鏈接并且將它的 target 屬性設(shè)置為 _blank. |
| 5 |
$("a").removeAttr("target")
這將刪除所有鏈接中的 target 屬性。 |
| 6 |
$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");});
點(diǎn)擊提交按鈕時(shí)，它會(huì)把不可用的屬性修改為值 "disabled" 。 |
| 7 |
$("p:last").hasClass("selected")
如果最后一個(gè) <p> 標(biāo)簽有關(guān)聯(lián)類 selected，返回 true。 |
| 8 |
$("p").text()
返回包含與 <p> 元素匹配的組合的文本內(nèi)容的字符串。. |
| 9 |
$("p").text("<i>Hello World</i>")
設(shè)置 "<I>Hello World</I>" 為與 <p> 元素匹配的文本內(nèi)容。 |
| 10 |
$("p").html()
返回所有匹配的段落的 HTML 內(nèi)容。 |
| 11 |
$("div").html("Hello World")
設(shè)置與 <div> 匹配的 HTML 內(nèi)容為 Hello World。 |
| 12 |
$("input:checkbox:checked").val()
從已選取的復(fù)選框中獲取第一個(gè)值。 |
| 13 |
$("input:radio[name=bar]:checked").val()
從一組單選按鈕中獲取第一個(gè)值。 |
| 14 |
$("button").val("Hello")
設(shè)置每一個(gè)與 <button> 匹配的元素的屬性值。 |
| 15 |
$("input").val("on")
這會(huì)檢查所有值為 "on" 的單選或復(fù)選框按鈕。 |
| 16 |
$("select").val("Orange")
這會(huì)在下拉框?yàn)槌茸樱⒐拖憬兜倪x項(xiàng)中選擇橙子。 |
| 17 |
$("select").val("Orange", "Mango")
這會(huì)在下拉框?yàn)槌茸?，芒果和香蕉的選項(xiàng)中選擇橙子和芒果。 |
更多建議：