屬性

2018-08-12 21:27 更新

jQuery - 屬性

當談到 DOM 元素時，我們可以操作的一些最基本的組件是屬性以及分配給這些元素的屬性。

大部分屬性可以作為 DOM 節(jié)點屬性在 JavaScript 中時可用的。一些比較常見的屬性是 ——

  • 類名

  • 標簽名

  • id

  • 超鏈接

  • 標題

  • rel

  • src

考慮下述一個圖像元素的 HTML 標記 ——

<img id="imageid" src="image.gif" alt="Image" class="myclass" title="This is an image"/>

在這個元素的標記中，標簽名是 img，并且為 id，src，alt，類以及標題的標記代表了元素的屬性，每一個都包含一個名稱和一個值。

jQuery 提供給我們的方法很容易操縱元素的屬性并且我們可以訪問元素，這樣我們也可以改變其屬性。

獲取屬性值

attr() 方法可以用來獲取與設置匹配的第一個元素的一個屬性的值或對所有匹配的元素設置屬性值。

示例

下面是一個簡單的例子，用于獲取 < em> 標簽的標題屬性并且用相同的值來設置 < 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>

這將產生如下所示結果 ——

設置屬性值

attr(name, value) 方法使用傳遞的值，用于給包裝好的集合中的全部元素設置指定的屬性。

示例

下述是一個簡單的例子，用于將圖像標簽的 src 屬性設置到一個正確的位置 ——

<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>

這將產生如下所示結果 ——

應用樣式

addClass( classes ) 方法可用于將定義好的樣式表應用到全部可匹配的元素中。你可以指定由空間隔開的多個類。

示例

下面是一個簡單的例子，設置了段落 < p> 標簽的 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>

這將產生如下所示結果 ——

屬性方法

下表列出了一些有用的方法，你可以使用這些方法對多個屬性進行操作 ——

序號 方法 & 描述
1 attr( properties )

設置鍵/值對象作為全部可匹配的元素的屬性。
2 attr( key, fn )

為所有可匹配的元素設置一個單個的屬性為可計算的值。
3 removeAttr( name )

從每一個可匹配的元素中刪除一個屬性。
4 hasClass( class )

如果指定的類出現在至少一個可匹配的元素集合中，返回 true。
5 removeClass( class )

從可匹配的元素集合中刪除全部或指定的類。
6 toggleClass( class )

如果指定的類不存在，那么添加指定的類；如果指定的類存在，那么刪除它。
7 html( )

獲取第一個匹配元素的 html 內容 (innerHTML)。
8 html( val )>

設置每一個可匹配元素的 html 內容。
9 text( )

獲取所有可匹配元素的組合的文本內容。
10 text( val )

設置所有可匹配元素的文本內容。
11 val( )

獲取第一個可匹配元素的輸入值。
12 val( val )

如果可匹配元素在 <input> 中調用，那么設置每個可匹配元素的屬性值，但是如果可匹配元素在 <select> 中使用傳遞的 <option> 值調用，那么傳遞的選項就會被選中，如果可匹配元素在復選框或單選框中調用，那么所有匹配的復選框或單選框會被選中。

示例

與上述語法和示例相似，下述例子會使你對在不同的情況下使用不同的屬性方法有一個很好地了解 ——

序號 選擇器 & 描述
1 $("#myID").attr("custom")

這會為第一個與 ID myID 匹配的元素返回屬性 custom 的值。
2 $("img").attr("alt", "Sample Image")

這會將所有圖像的 alt 屬性設置為一個新的值 "Sample Image".
3 $("input").attr({ value: "", title: "Please enter a value" });

將所有的 <input> 元素設置為空字符串，同時將 The jQuery Example 設置為字符串 Please enter a value.
4 $("a[href^=http://]").attr("target","_blank")

選擇帶有以 http:// 開頭的 href 屬性的全部鏈接并且將它的 target 屬性設置為 _blank.
5 $("a").removeAttr("target")

這將刪除所有鏈接中的 target 屬性。
6 $("form").submit(function() {$(":submit",this).attr("disabled", "disabled");});

點擊提交按鈕時，它會把不可用的屬性修改為值 "disabled" 。
7 $("p:last").hasClass("selected")

如果最后一個 <p> 標簽有關聯類 selected，返回 true。
8 $("p").text()

返回包含與 <p> 元素匹配的組合的文本內容的字符串。.
9 $("p").text("<i>Hello World</i>")

設置 "<I>Hello World</I>" 為與 <p> 元素匹配的文本內容。
10 $("p").html()

返回所有匹配的段落的 HTML 內容。
11 $("div").html("Hello World")

設置與 <div> 匹配的 HTML 內容為 Hello World。
12 $("input:checkbox:checked").val()

從已選取的復選框中獲取第一個值。
13 $("input:radio[name=bar]:checked").val()

從一組單選按鈕中獲取第一個值。
14 $("button").val("Hello")

設置每一個與 <button> 匹配的元素的屬性值。
15 $("input").val("on")

這會檢查所有值為 "on" 的單選或復選框按鈕。
16 $("select").val("Orange")

這會在下拉框為橙子，芒果和香蕉的選項中選擇橙子。
17 $("select").val("Orange", "Mango")

這會在下拉框為橙子，芒果和香蕉的選項中選擇橙子和芒果。
以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號