詳解jQuery中的prop()使用方法
prop()定義和用法
prop() 方法設置或返回被選元素的屬性和值。
當該方法用于返回屬性值時，則返回第一個匹配元素的值。
當該方法用于設置屬性值時，則為匹配元素集合設置一個或多個屬性/值對。
注意：prop() 方法應該用于檢索屬性值，例如 DOM 屬性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。
提示：如需檢索 HTML 屬性，請使用 attr() 方法代替。
提示：如需移除屬性，請使用 removeProp() 方法。
prop() 語法
返回屬性的值：
$(selector).prop(property)
設置屬性和值：
$(selector).prop(property,value)
使用函數設置屬性和值：
$(selector).prop(property,function(index,currentvalue))
設置多個屬性和值：
$(selector).prop({property:value, property:value,...})
| 參數 | 描述 |
|---|---|
| property | 規(guī)定屬性的名稱。 |
| value | 規(guī)定屬性的值。 |
| function(index,currentvalue) | 規(guī)定返回要設置的屬性值的函數。
|
實例
添加并移除名為 "color" 的屬性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>腳本之家</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var $x = $("div");
$x.prop("color","FF0000");
$x.append("color 屬性值為: " + $x.prop("color"));
$x.removeProp("color");
$x.append("<br>現在 color 屬性值為: " + $x.prop("color"));
});
});
</script>
</head>
<body>
<button>添加和刪除屬性</button>
<br><br>
<div></div>
</body>
</html>
prop() 和 attr() 之間的不同
prop() 和 attr() 可能返回不同的值。本實例演示了當用于返回復選框的 "checked" 狀態(tài)時的不同。
在jQuery中，attr()函數和prop()函數都用于設置或獲取指定的屬性，它們的參數和用法也幾乎完全相同。
但不得不說的是，這兩個函數的用處卻并不相同。下面我們來詳細介紹這兩個函數之間的區(qū)別。
1、操作對象不同
很明顯，attr和prop分別是單詞attribute和property的縮寫，并且它們均表示"屬性"的意思。
不過，在jQuery中，attribute和property卻是兩個不同的概念。attribute表示HTML文檔節(jié)點的屬性，property表示JS對象的屬性。
<!-- 這里的id、class、data_id均是該元素文檔節(jié)點的attribute -->
<div id="message" class="test" data_id="123"></div>
<script type="text/javascript">
// 這里的name、age是Person的property
var Person = { name: "小明", age: 18};
</script>
在jQuery中，prop()函數的設計目標是用于設置或獲取指定DOM元素(指的是JS對象，Element類型)上的屬性(property)；attr()函數的設計目標是用于設置或獲取指定DOM元素所對應的文檔節(jié)點上的屬性(attribute)。
2、應用版本不同
attr()是jQuery 1.0版本就有的函數，prop()是jQuery 1.6版本新增的函數。毫無疑問，在1.6之前，你只能使用attr()函數；1.6及以后版本，你可以根據實際需要選擇對應的函數。
3、用于設置的屬性值類型不同
由于attr()函數操作的是文檔節(jié)點的屬性，因此設置的屬性值只能是字符串類型，如果不是字符串類型，也會調用其toString()方法，將其轉為字符串類型。
prop()函數操作的是JS對象的屬性，因此設置的屬性值可以為包括數組和對象在內的任意類型。
4、其他細節(jié)問題
在jQuery 1.6之前，只有attr()函數可用，該函數不僅承擔了attribute的設置和獲取工作，還同時承擔了property的設置和獲取工作。例如：在jQuery 1.6之前，attr()也可以設置或獲取tagName、className、nodeName、nodeType等DOM元素的property。
直到jQuery 1.6新增prop()函數，并用來承擔property的設置或獲取工作之后，attr()才只用來負責attribute的設置和獲取工作。
此外，對于表單元素的checked、selected、disabled等屬性，在jQuery 1.6之前，attr()獲取這些屬性的返回值為Boolean類型：如果被選中(或禁用)就返回true，否則返回false。
但是從1.6開始，使用attr()獲取這些屬性的返回值為String類型，如果被選中(或禁用)就返回checked、selected或disabled，否則(即元素節(jié)點沒有該屬性)返回undefined。并且，在某些版本中，這些屬性值表示文檔加載時的初始狀態(tài)值，即使之后更改了這些元素的選中(或禁用)狀態(tài)，對應的屬性值也不會發(fā)生改變。
因為jQuery認為：attribute的checked、selected、disabled就是表示該屬性初始狀態(tài)的值，property的checked、selected、disabled才表示該屬性實時狀態(tài)的值(值為true或false)。
因此，在jQuery 1.6及以后版本中，請使用prop()函數來設置或獲取checked、selected、disabled等屬性。對于其它能夠用prop()實現的操作，也盡量使用prop()函數。
<button>按鈕</button>
<input type="checkbox" name="" id="" checked="checked">
<script src="jquery.js"></script>
<script>
// $('button').on('click',function(){
// });
// var r = $('input');
$('button').on('click',function(){
console.log(11)
if ($('input').prop('checked')) {
$('input').prop('checked',false);
}else{
$('input').prop('checked',true);
}
})
</script>
// attr / prop
// attr ==> getAttribute() / setAttribute()
// 用于操作 自定義的屬性，對于DOM對象自身的布爾值類型的屬性，只能
// 通過這個兩個方法來設置或者讀取默認值，而不能動態(tài)改變值
//
// prop ==> dom.checked = true;
// 對于 布爾值的屬性（selected/checked/diabled） 都需要通過直接訪問屬性
// 方式來操作（點語法、[]）
大家都知道原生js可以獲取匹配元素的內部html和外部html，內部是innerHTML，外部是outerHTML，原生js的dom對象是存在這兩個屬性的，
document.getElementById("linkType").outerHTML；
如果用jQuery如何獲取匹配元素（包括自身元素的html）呢？
既然存在這個屬性，我們就可以用$("#linkType").prop("outerHTML")來獲?。?/p>
可以通過$("#linkType").prop("outerHTML",outerHTML)賦值來改變outerHTML的內容；
值得注意的是jQuery的attr是獲取不到這個屬性值的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>腳本之家(jb51.net)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1").html("attr('checked'): " + $("input").attr('checked')
+ "<br>prop('checked'): " + $("input").prop('checked'));
});
});
</script>
</head>
<body>
<p><b>注意:</b>確認或取消選中該復選框,然后單擊按鈕刷新內容。</p>
<button>查看attr() 和 prop() 的值</button>
<br><br>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p id="p1"></p>
</body>
</html>
jQuery removeProp() 方法
定義和用法
removeProp() 方法移除由 prop() 方法設置的屬性。
注意：不要使用該方法來移除諸如 style、id 或 checked 之類的 HTML 屬性。請使用 removeAttr() 方法代替。
語法
$(selector).removeProp(property)
| 參數 | 描述 |
|---|---|
| property | 規(guī)定要移除的屬性的名稱。 |
實例
添加并移除名為 "color" 的屬性：
$("button").click(function(){
var $x = $("div");
$x.prop("color","FF0000");
$x.append("The color 屬性： " + $x.prop("color"));
$x.removeProp("color");
});
完整實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>腳本之家(jb51.net)</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var $x = $("div");
$x.prop("color","FF0000");
$x.append("color 屬性值為: " + $x.prop("color"));
$x.removeProp("color");
$x.append("<br>現在 color 屬性值為: " + $x.prop("color"));
});
});
</script>
</head>
<body>
<button>添加和刪除屬性</button>
<br><br>
<div></div>
</body>
</html>
jQuery removeAttr() 方法
定義和用法
removeAttr() 方法從被選元素移除一個或多個屬性。
語法
$(selector).removeAttr(attribute)
| 參數 | 描述 |
|---|---|
| attribute | 必需。規(guī)定要移除的一個或多個屬性。如需移除若干個屬性，請使用空格分隔屬性名稱。 |
實例
從所有的 <p> 元素移除樣式屬性：
$("button").click(function(){
$("p").removeAttr("style");
});
完整實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>腳本之家 jb51.net</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").removeAttr("style");
});
});
</script>
</head>
<body>
<h1>這是一個標題</h1>
<p style="font-size:120%;color:red">這是一個段落。</p>
<p style="font-weight:bold;color:blue">這是另一個段落。</p>
<button>移除所有P元素的樣式屬性</button>
</body>
</html>
好了，這篇關于jquery prop()的文章就介紹到這，希望大家以后多多支持腳本之家。
- jquery獲取自定義屬性(attr和prop)實例介紹
- jquery中prop()方法和attr()方法的區(qū)別淺析
- js與jquery實時監(jiān)聽輸入框值的oninput與onpropertychange方法
- jQuery學習之prop和attr的區(qū)別示例介紹
- jquery下onpropertychange事件的綁定方法
- Jquery阻止事件冒泡 event.stopPropagation
- jQuery中prop()方法用法實例
- jquery 獲取自定義屬性(attr和prop)的實現代碼
- jQuery中attr()和prop()在修改checked屬性時的區(qū)別
- jQuery獲取attr()與prop()屬性值的方法及區(qū)別介紹
相關文章
這篇文章主要介紹了一款非常酷炫的jQuery全屏3D焦點圖動畫效果其特點是整個焦點圖基本是全屏顯示的，非常大氣，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要介紹了js 實現一些跨瀏覽器的事件方法詳解及實例的相關資料,需要的朋友可以參考下2016-10-10
因為jquery的易用性，很多朋友使用jquery，但仍然需要注意的是性能的問題，下面是曾祥展特為大家整理的一些技巧。2010-12-12
這篇文章主要介紹了jQuery實現經典的網頁3D輪播圖封裝功能,結合實例形式詳細分析了基于jQuery插件Figure_3D.js實現3D輪播圖功能的具體步驟與相關操作技巧,需要的朋友可以參考下2019-02-02
電腦屏幕大小是固定的，那么如何在有限的空間放更多的內容呢，jquery的tab切換式瀏覽卻可以解決這個問題2013-04-04
這篇文章主要介紹了JavaScript函數庫jQuery的一些基本概念,包括其的添加方法和最基本的使用示例,需要的朋友可以參考下2015-06-06
JQUERY 獲取IFrame中對象及獲取其父窗口中對象示例
經常會用到iframe，難免會碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素，下面為大家簡單介紹下本人的使用心得2013-08-08
詳解jQuery中的getAll()和cleanData()
這篇文章主要介紹了jQuery之getAll()和cleanData()函數的實例代碼解析，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2019-04-04
這里所說的，用jquery去驗證某一組多選至少要有一個選中，某一組單選至少有一個選中，，大家都知道單一的一個用js比較好驗證，但是想要用jquery的驗證并且用到jquery驗證的提示信息，那么這就不好辦了2013-08-08
jQuery EasyUI API 中文文檔 可調整尺寸，學習jQuery EasyUI的朋友可以參考下。2011-09-09