jQuery prop() jQueryprop()|jQuery

本文概述

jQuery prop()方法的参数
jQuery prop()方法的示例
jQuery prop()示例2
jQuery attr()和jQuery prop()方法之间的区别

jQuery prop()方法用于两个目的。

它用于返回一组匹配元素中第一个元素的属性值。
它用于为一组匹配的元素设置一个或多个属性值。

jQuery prop()方法通常用于检索属性值, 即DOM属性（例如tagName, nodeName, defaultChecked）或自己定制的属性。这是设置属性值（尤其是多个属性）的非常方便的方法。
如果要检索HTML属性, 则应改用attr()方法。
removeProp()方法用于删除属性。句法：
要返回属性的值：

$(selector).prop(property)

设置属性和值：

$(selector).prop(property, value)

【jQuery prop()】通过使用函数设置属性和值：

$(selector).prop(property, function(index, currentvalue))

设置多个属性和值：

$(selector).prop({property:value, property:value, ...})

jQuery prop()方法的参数

参数	描述
Property	它指定属性的名称。
Value	它定义属性的值。
Function(index, currentvalue)	它指定一个函数, 该函数返回要设置的属性的值。索引：它提供元素在集合中的索引位置。当前值：提供所选元素的当前属性值。

jQuery prop()方法的示例我们来看一个简单的jQuery prop()方法示例。

< !DOCTYPE html> < html> < head> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> < /script> < script> $(document).ready(function(){ $("button").click(function(){ var $x = $("div"); $x.prop("color", "#e0eeee"); $x.append("The value of the color property: " + $x.prop("color")); $x.removeProp("color"); $x.append("< br> Now the value of the color property: " + $x.prop("color")); }); }); < /script> < /head> < body> < button> Add and remove a property< /button> < br> < br> < div> < /div> < /body> < /html>

立即测试
jQuery prop()示例2让我们看一下jQuery prop()方法的另一个示例。

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title> prop demo< /title> < style> p { margin: 20px 0 0; } b { color: red; } < /style> < script src="http://img.readke.com/220429/21204CT1-1.jpg"> < /script> < /head> < body> < input id="check1" type="checkbox" checked="checked"> < label for="check1"> Check me< /label> < p> < /p> < script> $( "input" ).change(function() { var $input = $( this ); $( "p" ).html( ".attr( \"checked\" ): < b> " + $input.attr( "checked" ) + "< /b> < br> " + ".prop( \"checked\" ): < b> " + $input.prop( "checked" ) + "< /b> < br> " + ".is( \":checked\" ): < b> " + $input.is( ":checked" ) ) + "< /b> "; }).change(); < /script> < /body> < /html>

立即测试
jQuery attr()和jQuery prop()方法之间的区别这是一个非常常见的问题, 因为大多数人对在哪里使用prop()方法和在哪里attr()方法感到困惑。它们之间的差异在特定情况下非常重要。
以下是它们之间的确切区别：