jQuery中attr()與prop()函數用法實例詳解(附用法區別)_jquery
本文實例講述了jQuery中attr()與prop()函數用法。分享給大家參考，具體如下：
一、jQuery的attr()方法
jquery中用attr()方法來取得和設定元素屬性,attr是attribute（屬性）的縮寫，在jQuery DOM運算中會常用到attr()，attr()有4個表達式。
1. attr(屬性名稱) //取得屬性的值（取得第一個符合元素的屬性值。透過這個方法可以方便地從第一個符合元素中取得一個屬性的值。如果元素沒有對應屬性，則傳回undefined ）
2. attr(屬性名稱, 屬性值) //設定屬性的值（為所有符合的元素設定一個屬性值。）
3. attr(屬性名稱,函數值) //設定屬性的函數值 （為所有符合的元素設定一個計算的屬性值。不提供值，而是提供一個函數，由這個函數計算的值作為屬性值。
4.attr(properties) //為指定元素設定多個屬性值，即：{屬性名稱一: “屬性值一” , 屬性名稱二: “屬性值二” , … … }。 (這是在所有匹配元素中批量設定很多屬性的最佳方式。請注意，如果你要設定物件的class屬性，你必須使用'className' 作為屬性名稱。或者你可以直接使用'class'或' id'。範例程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery中attr()方法</title>
<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript" ></script>
<style>
p{color:red}
li{color:blue;}
.lili{font-weight:bold;color:red;}
#lili{font-weight:bold;color:red;}
</style>
</head>
<body>
<p title="你最喜欢的水果是。">你最喜欢的水果是？</p>
<ul>
<li title="苹果汁">苹果</li>
<li title="橘子汁" alt="123">橘子</li>
<li title="菠萝汁">菠萝</li>
</ul>
<script>
...
</script>
</body>
<html>
1.1使用attr(name)取得title值：
<script>
alert($("ul li:eq(1)").attr("title"));
</script>
1.2使用attr(name)取得alt值：
<script>
alert($("ul li:eq(1)").attr("alt"));
</script>
2. attr(name,value) //設定屬性的值
2.1使用attr(name,value)修改title值為：不吃橘子
<script>
$("ul li:eq(1)").attr("title","不吃橘子");
alert($("ul li:eq(1)").attr("title"));
</script>
3. attr(name,fn) //設定屬性的函數值
3.1把alt屬性的值設定為title屬性的值。
<script>
$("ul li:eq(1)").attr("title",function(){ return this.alt});
alert($("ul li:eq(1)").attr("title"));
</script>
4.attr(properties) //將一個「名稱/值」形式的物件設定為所有符合元素的屬性
4.1取得
- 裡第2個
- 設定title和alt屬性。
結果：
<script> $("ul li:eq(1)").attr({title:"不喝橘子汁",alt:"不是123"}); alert($("ul li:eq(1)").attr("title")); alert($("ul li:eq(1)").attr("alt")); </script>登入後複製
4.2取得- 裡第2個
- 設定class。
結果：
<script> $("ul li:eq(1)").attr({className:"lili"}); </script>登入後複製4.3取得- 裡第2個
- 設定id。
結果：
<script> $("ul li:eq(1)").attr({id:"lili"}); </script>登入後複製4.4取得- 裡第2個
- 設定style。
結果：
<script> $("ul li:eq(1)").attr({style:"color:red"}); </script>登入後複製
在此說明下alt和tite的差別。在li中加入alt是錯誤的，它只能用在img、area和input元素中（包括applet元素）。對於input元素，alt屬性意在用來替換提交按鈕的圖片。這裡為了很詳細說明attr()方法，沒有適當的屬性，所有用了alt進行舉例，只供學習參考attr()方法用法。 alt：這是用以描述圖形的文字，當圖片無法顯示時，這些文字會取代圖片而被顯示。當滑鼠移至圖片上該些文字也會顯示。
title：是滑鼠放上去之後，會顯示出來的文字。
那要怎麼刪除屬性呢?jquery中刪除屬性的關鍵字是: removeAttr 注意A是大寫的. 看看怎麼用的:
同樣是用法一中的html代碼, 我想刪掉li的title屬性, 那麼就這樣:
就這麼簡單， attr 其實就是原生js中 getAttribute 的簡化實作, 而removeAttr 就是 removeAttribute 的簡寫了。
那麼是否有跟attr()相似的屬性呢？
jquery中val()與之類似，
$(this).val();取得某個元素節點的value值，相當於$(this).attr("value");
$(this).val(value);設定某個元素節點的value值，相當於$(this).attr("value",value);二、jQuery的prop()方法：
prop()函數用於設定或傳回目前jQuery物件所匹配的元素的屬性值。
函數屬於jQuery物件(實例)。如果需要刪除DOM元素的屬性，請使用removeProp()函數。
文法
jQuery 1.6 新增此函數。 prop()函數有以下兩種用法：
用法一：
jQueryObject.prop( propertyName [, value ] )
設定或傳回指定屬性propertyName的值。如果指定了value參數，表示設定屬性propertyName的值為value；如果沒有指定value參數，則表示傳回屬性propertyName的值。參數value也可以是函數，prop()將根據匹配的所有元素遍歷執行該函數，函數中的this指標將指向對應的DOM元素。 prop()也會為函數傳入兩個參數：第一個參數就是該元素在符合元素中的索引，第二個參數就是該元素propertyName屬性目前的值。函數的傳回值就是為該元素的propertyName屬性所設定的值。
用法二：
jQueryObject.prop( object )
以物件形式同時設定任意多個屬性的值。物件object的每個屬性對應propertyName，屬性的值對應value。注意：prop()函數的所有"設定屬性"操作針對的是當前jQuery物件所匹配的每一個元素；所有"讀取屬性"的操作只針對第一個匹配的元素。
參數請根據前面語法部分所定義的參數名稱尋找對應的參數。
参数value可以是包括对象和数组在内的任意类型。Parameters Description propertyName String type specifies the attribute name. value 可選/Object/Function類型指定的屬性值，或傳回屬性值的函數。 object Object類型指定的對象，用於封裝多個鍵值對，同時設定多項屬性。 返回值
prop()函数的返回值是任意类型，返回值的类型取决于当前prop()函数执行的是"设置属性"操作还是"读取属性"操作。
如果prop()函数执行的是"设置属性"操作，则返回当前jQuery对象本身；如果是"读取属性"操作，则返回读取到的属性值。
如果当前jQuery对象匹配多个元素，返回属性值时，prop()函数只以其中第一个匹配的元素为准。如果该元素没有指定的属性，则返回undefined。
prop()和attr()的主要区别：prop()函数针对的是DOM元素(JS Element对象)的属性，attr()函数针对的是DOM元素所对应的文档节点的属性。详情请查看jQuery函数attr()和prop()的区别。
注意事项
1、如果通过prop()函数更改和
2、如果使用prop()函数操作表单元素的checked、selected、disabled等属性，如果该元素被选中(或禁用)，则返回true，否则(意即HTML中没有该属性)返回false。
3、prop()函数还可以设置或返回DOM元素的Element对象上的某些属性，例如：tagName、selectedIndex、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected等属性。
4、在IE9及更早版本中，如果使用prop()函数设置的属性值不是一个简单的原始值(String、Number、Boolean)，并且在对应的DOM元素被销毁之前，该属性没有被移除，则可能会导致内存泄漏问题。如果你只是为了存储数据，建议你使用data()函数，以避免内存泄漏问题。
示例&说明
以下面这段HTML代码为例：
<div id="n1"> <p id="n2" class="demo test" data-key="UUID" data_value="1235456465">CodePlayer</p> <input id="n3" name="order_id" type="checkbox" value="1"> <input id="n4" name="order_id" type="checkbox" checked="checked" value="2"> </div>
登入後複製我们编写如下jQuery代码：
var $n2 = $("#n2"); // prop()操作针对的是元素(Element对象)的属性，而不是元素节点(HTML文档)的属性 document.writeln( $n2.prop("data-key") ); // undefined document.writeln( $n2.prop("data_value") ); // undefined document.writeln( $n2.prop("id") ); // n2 document.writeln( $n2.prop("tagName") ); // P document.writeln( $n2.prop("className") ); // demo test document.writeln( $n2.prop("innerHTML") ); // CodePlayer document.writeln( typeof $n2.prop("getAttribute") ); // function // prop()设置的属性也是针对元素(Element对象)，因此也可以通过元素本身直接访问 $n2.prop("prop_a", "CodePlayer"); document.writeln( $n2[0].prop_a ); // CodePlayer var n2 = document.getElementById("n2"); document.writeln( n2.prop_a ); // CodePlayer // 以对象形式同时设置多个属性，属性值可以是对象、数组等任意类型 $n2.prop( { prop_b: "baike", prop_c: 18, site: { name: "CodePlayer", url: "http://www.jb51.net/" } } ); document.writeln( $n2[0].prop_c ); // 18 document.writeln( $n2[0].site.url ); // http://www.jb51.net/ // 反选所有的复选框(没选中的改为选中，选中的改为取消选中) $("input:checkbox").prop("checked", function(index, oldValue){ return !oldValue; });登入後複製附：jquery中attr和prop的区别
在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。
关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单：
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。上面的描述也许有点模糊，举几个例子就知道了。
这个例子里元素的DOM属性有“href、target和class"，这些属性就是元素本身就带有的属性，也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用prop方法。
这个例子里元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。使用prop方法取值和设置属性值时，都会返回undefined值。
再举一个例子：
是否可见
是否可见像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。
$("#chk1").prop("checked") == false $("#chk2").prop("checked") == true登入後複製如果上面使用attr方法，则会出现：
$("#chk1").attr("checked") == undefined $("#chk2").attr("checked") == "checked"登入後複製希望本文所述对大家jQuery程序设计有所帮助。
- 設定style。
- 設定id。
- 設定class。
4.2取得
4.3取得
4.4取得
在li中加入alt是錯誤的，它只能用在img、area和input元素中（包括applet元素）。對於input元素，alt屬性意在用來替換提交按鈕的圖片。這裡為了很詳細說明attr()方法，沒有適當的屬性，所有用了alt進行舉例，只供學習參考attr()方法用法。 
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
golang函數動態建立新函數的技巧
Apr 25, 2024 pm 02:39 PM
Go語言提供了兩種動態函數創建技術：closures和反射。 closures允許存取閉包作用域內的變量，而反射可使用FuncOf函數建立新函數。這些技術在自訂HTTP路由器、實現高度可自訂的系統和建置可插拔的元件方面非常有用。
C++ 函數命名中參數順序的考慮
Apr 24, 2024 pm 04:21 PM
在C++函數命名中，考慮參數順序至關重要，可提高可讀性、減少錯誤並促進重構。常見的參數順序約定包括：動作-物件、物件-動作、語意意義和遵循標準函式庫。最佳順序取決於函數目的、參數類型、潛在混淆和語言慣例。
excel函數公式大全
May 07, 2024 pm 12:04 PM
1. SUM函數，用於對一列或一組單元格中的數字進行求和，例如：=SUM(A1:J10)。 2、AVERAGE函數，用於計算一列或一組儲存格中的數字的平均值，例如：=AVERAGE(A1:A10)。 3.COUNT函數，用於計算一列或一組單元格中的數字或文字的數量，例如：=COUNT(A1:A10)4、IF函數，用於根據指定的條件進行邏輯判斷，並返回相應的結果。
C++ 函式預設參數與可變參數的優缺點比較
Apr 21, 2024 am 10:21 AM
C++函數中預設參數的優點包括簡化呼叫、增強可讀性、避免錯誤。缺點是限制靈活性、命名限制。可變參數的優點包括無限彈性、動態綁定。缺點包括複雜性更高、隱式型別轉換、除錯困難。
C++ 函式回傳參考型別有什麼好處？
Apr 20, 2024 pm 09:12 PM
C++中的函數傳回參考類型的好處包括：效能提升：引用傳遞避免了物件複製，從而節省了記憶體和時間。直接修改：呼叫方可以直接修改傳回的參考對象，而無需重新賦值。程式碼簡潔：引用傳遞簡化了程式碼，無需額外的賦值操作。
自訂 PHP 函數和預定義函數之間有什麼區別？
Apr 22, 2024 pm 02:21 PM
自訂PHP函數與預定義函數的差異在於：作用域：自訂函數僅限於其定義範圍，而預定義函數可在整個腳本中存取。定義方式：自訂函數使用function關鍵字定義，而預先定義函數則由PHP核心定義。參數傳遞：自訂函數接收參數，而預先定義函數可能不需要參數。擴充性：自訂函數可以根據需要創建，而預定義函數是內建的且無法修改。
C++ 函式異常進階：客製化錯誤處理
May 01, 2024 pm 06:39 PM
C++中的異常處理可透過自訂異常類別增強，提供特定錯誤訊息、上下文資訊以及根據錯誤類型執行自訂操作。定義繼承自std::exception的異常類，提供特定的錯誤訊息。使用throw關鍵字拋出自訂異常。在try-catch區塊中使用dynamic_cast將捕獲到的異常轉換為自訂異常類型。在實戰案例中，open_file函數會拋出FileNotFoundException異常，捕捉並處理該異常可提供更具體的錯誤訊息。
