En este artículo, aprenderemos sobre las diferencias entre prop() y attr() en JQuery. jQuery es la biblioteca de JavaScript más rápida y liviana que se utiliza para simplificar las interacciones entre un documento HTML/CSS, o más precisamente el Modelo de objetos de documento (DOM) y JavaScript. JQuery es ampliamente famoso por su lema «Escribe menos, haz más». Simplemente significa que puede lograr su objetivo simplemente escribiendo unas pocas líneas de código.
Método jQuery .prop(): este método se utiliza para obtener el valor de una propiedad para el primer elemento en el conjunto de elementos coincidentes.
Sintaxis:
$(selector).prop(property)
Ejemplo:
HTML
<!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>
Producción:
Método jQuery .attr(): este método se usa para obtener el valor de un atributo del primer elemento en el conjunto coincidente o establecer valores de atributo en todos los elementos coincidentes.
Ejemplo:
HTML
<!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>
Producción:
Explicación: En el ejemplo anterior, puede notar que ‘Un portal de informática para geeks’ es un valor de GeeksForGeeks.
La diferencia entre el método .prop() y attr() es:
|
Método prop() |
Método attr() |
|---|---|
| Este método devuelve el valor actual. | Este método devuelve el valor predeterminado. |
| Este método se usa principalmente cuando el usuario quiere cambiar el valor del atributo de una etiqueta HTML. | Este método se usa principalmente para establecer el valor predeterminado para el atributo de una etiqueta HTML. |
| Cambia las propiedades de esa etiqueta HTML según el árbol DOM. | Cambia los atributos de esa etiqueta HTML. |
|
Su sintaxis es -: $(selector).prop(propiedad) |
Su sintaxis es -: $(selector).attr(atributo) |
| Toma tres parámetros Propiedad, valor y una función | Toma tres parámetros un atributo, valor y una función |
Publicación traducida automáticamente
Artículo escrito por krishnanand3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA