jQuery中的prop()和attr()方法的区别

在这篇文章中，我们将了解JQuery中prop()和attr()的区别。jQuery是最快的轻量级JavaScript库，用于简化HTML/CSS文档，或者更准确地说，文档对象模型（DOM）和JavaScript之间的互动。JQuery因其 “少写多做 “的格言而广为人知。它的意思很简单，你只需写几行代码就可以实现你的目标。

jQuery .prop() 方法：该方法用于获取匹配元素集合中第一个元素的属性值。

语法:

$(selector).prop(property)

示例:

<!DOCTYPE html>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
 
    <script>
        (document).ready(function () {
            ("button").click(function () {
                var val =("div");
                val.prop("font-size", "5px");
                val.append("Property value = "
                    + $val.prop("font-size"));
            });
        });
    </script>
 
    <style>
        body {
            text-align: center;
        }
 
        button {
            background-color: #4CAF50;
            /* Green */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green">
        GeeksForGeeks
    </h1>
     
    <button>Property</button>
    <br>
    <div></div>
</body>
 
</html>

输出:

jQuery中的prop()和attr()方法的区别

jQuery .attr()方法：该方法用于从匹配的第一个元素中获取属性值，或在所有匹配的元素上设置属性值。

示例:

<!DOCTYPE html>
<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">
        (document).ready(function () {
            var title =("h1").attr("title");
            $("#divid").text(title);
        });
    </script>
 
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <div>
        <h1 style="color:green"
            title="A computer science portal for Geeks">
            GeeksForGeeks
        </h1>
        <p id="myid">GeeksForGeeks</p>
 
 
 
 
 
        <div id="divid"></div>
    </div>
</body>
 
</html>

输出:

jQuery中的prop()和attr()方法的区别

解释：在上面的例子中，你可以注意到’一个为极客而设的计算机科学门户’是GeeksForGeeks的一个值。

.prop()和attr()方法之间的区别是：

prop() 方法	attr() 方法
该方法返回当前值。	该方法返回默认值。
这个方法主要是当用户想改变一个HTML标签的属性值时使用。	该方法主要用于设置HTML标签属性的默认值。
它根据DOM树改变该HTML标签的属性。	它改变该HTML标签的属性。
其语法为- `$(selector).prop(property)`。	其语法为-`$(selector).attr(attribute)`。
它需要三个参数属性、值和一个函数	它需要三个参数属性、值和一个函数