Jquery教程
Jquery动效
Jquery HTML/CSS
Jquery 事件
jquery常用

jQuery prop()

jQuery prop()方法用于两个目的。
用于返回一组匹配元素中第一个元素的属性值。 用于设置一组匹配元素的属性值。
jQuery prop()方法通常用于检索属性值,即DOM属性(例如tagName,nodeName,defaultChecked)或自己定制的属性。这是设置属性值(尤其是多个属性)的非常方便的方法。
如果要检索HTML属性,则应改用attr()方法。
注意: removeProp()方法用于删除属性。
语法:
要返回属性值:
$(selector).prop(property)
设置属性和值:
$(selector).prop(property,value)
使用功能设置属性和值:
$(selector).prop(property,function(index,currentvalue))
要设置多个属性和值:
$(selector).prop({property:value, property:value,...})

jQuery prop()方法的参数

参数 说明
property 它指定属性的名称。
value 它定义属性的值。
function(index,currentvalue) 它指定一个函数,该函数返回要设置的属性的值。 index:它提供元素在集合中的索引位置。 currentvalue:它提供所选元素的当前属性值。

jQuery prop()方法的示例

我们来看一个简单的jQuery prop()方法的示例。
<!DOCTYPE html>
<html>
<head>
<script src="/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="/jquery-1.10.2.js"></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()方法的位置。它们之间的差异在特定情况下非常重要。
以下是它们之间的确切差异:
jQuery attr()方法用于检索HTML属性值,而jQuery prop()方法用于检索属性值。 根据DOM树,attr()方法更改HTML标签的属性,而prop()方法更改HTML标签的属性。 属性通常比属性更易于处理,因此大多数使用jQuery prop()方法而不是attr()方法。
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4