极客教程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 .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>
输出:
解释：在上面的例子中，你可以注意到’一个为极客而设的计算机科学门户’是GeeksForGeeks的一个值。
.prop()和attr()方法之间的区别是：
| prop() 方法 | attr() 方法 |
|---|---|
| 该方法返回当前值。 | 该方法返回默认值。 |
| 这个方法主要是当用户想改变一个HTML标签的属性值时使用。 | 该方法主要用于设置HTML标签属性的默认值。 |
| 它根据DOM树改变该HTML标签的属性。 | 它改变该HTML标签的属性。 |
其语法为- $(selector).prop(property)。 |
其语法为-$(selector).attr(attribute)。 |
| 它需要三个参数 属性、值和一个函数 | 它需要三个参数 属性、值和一个函数 |