jQuery - Attributes

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

這些屬性中的大多數都可以通過JavaScript作爲DOM節點屬性使用。一些更常見的屬性是&負;

className
tagName
id
href
title
rel
src

考慮以下圖像元素的HTML標記−

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

在這個元素的標記中，標記名是img，id、src、alt、class和title的標記表示元素的屬性，每個屬性由名稱和值組成。

jQuery爲我們提供了方便地操作元素屬性的方法，並爲我們提供了對元素的訪問，以便我們也可以更改其屬性。

Get Attribute Value

attr（）方法可用於從匹配集的第一個元素獲取屬性值，或將屬性值設置到所有匹配元素上。

Example

下面是一個簡單的示例，它獲取標記中<in>的title屬性，並使用相同的值設置<div id=「Divid」>值;

Live Demo

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/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>

這將產生以下結果&負;

Set Attribute Value

attr（name，value）方法可用於使用傳遞的值將命名屬性設置到包裝集中的所有元素上。

Example

下面是一個簡單的示例，它將圖像標記的src屬性設置爲正確的位置−

Live Demo

<html>
   <head>
      <title>The jQuery Example</title>
      <base href="https://www.tutorialspoint.com" />
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#myimg").attr("src", "/jquery/images/jquery.jpg");
         });
      </script>
   </head>
	
   <body>
      <div>
         <img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image" />
      </div>
   </body>
</html>

這將產生以下結果&負;

Applying Styles

可以使用addClass（classes）方法將定義的樣式表應用於所有匹配的元素。可以指定多個用空格分隔的類。

Example

下面是一個簡單的示例，它設置了para<p>tag−的類屬性;

Live Demo

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/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>

這將產生以下結果&負;

Attribute Methods

下表列出了幾種可用於操作屬性和屬性的有用方法;

Sr.No.	Methods & Description
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>上調用每個匹配元素的value屬性，但如果在<select>上調用該元素，並且傳遞了<option>值，則將選中「傳遞」選項，如果在複選框或單選框上調用該元素，則將選中所有匹配的複選框和單選框。

Examples

與上面的語法和示例類似，下面的示例將幫助您了解如何在不同的情況下使用各種屬性方法;

Here is a complete list of attribute methods in different situation −

Sr.No.	Selector & Description
1	$（「'35;myID」）.attr（「自定義」）這將爲與ID myID匹配的第一個元素返回屬性custom的值。
2	$（「img」）.attr（「alt」，「Sample Image」）這會將所有圖像的alt屬性設置爲新值「Sample Image」。
3	$（「input」）.attr（{value:」，title:「請輸入值」}）將所有<input>元素的值設置爲空字符串，並將jQuery示例設置爲字符串請輸入值。
4	$（「a[ref^=https:/]」）.attr（「target」，「-u blank」）選擇所有以https://開頭的ref屬性的連結，並將其目標屬性設置爲\u blank。
5	（「a」）。刪除Attr（「target」）這將刪除所有連結的target屬性。
6	$（「form」）.submit（function（）{$（「：submit」，this）.attr（「disabled」，「disabled」）;}）這將在單擊提交按鈕時將disabled屬性修改爲值「disabled」。
7	$（「p:last」）.hasClass（「selected」）如果最後一個<p>標記已選擇關聯的類，則返回true。
8	$（「p」）.text（）返回包含所有匹配元素的組合文本內容的字符串。
9	$（「p」）.text（「<i>Hello World<i>」）這會將「<I>Hello World</I>」設置爲匹配元素的文本內容。
10	$（「p」）.html（）這將返回所有匹配段落的HTML內容。
11	$（「div」）.html（「Hello World」）這會將所有匹配的<div>的HTML內容設置爲Hello World。
12	$（「輸入：複選框：選中」）.val（）從選中的複選框中獲取第一個值。
13	$（「輸入：radio[name=bar]：選中」）.val（）從一組單選按鈕中獲取第一個值。
14	$（「按鈕」）.val（「你好」）設置每個匹配元素的值屬性<button>。
15	（「輸入」）.val（「開」）這將選中值爲「開」的所有單選或複選框按鈕。
16	（$select select.val）（「orange 這將在下拉框中選擇橙色選項，其中有橙色、芒果和香蕉選項。
17	$（「select」）.val（「Orange」，「Mango」）這將在一個下拉框中選擇橙色和芒果選項，其中有橙色、芒果和香蕉選項。極客書 © 2015-2020 . 京ICP備15058027號-1