Comment définir plusieurs valeurs d'attributd'un élément dans jquery : 1. Utilisez attr() pour définir, la syntaxe est "$(selector).attr({nom d'attribut : valeur d'attribut ; valeur d'attribut : valeur d'attribut ...})"; 2. Utilisez prop() pour définir, la syntaxe est "$(selector).prop({property name:property value;property value:property value...})".
L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6, ordinateur Dell G3.
Dans jquery, vous pouvez utiliser deux méthodes pour définir des attributs (valeurs) sur des éléments :
méthode attr()
méthode prop()
Ces deux méthodes peuvent être définies sur des éléments Une ou plus de valeurs d'attribut.
Voyons comment définir plusieurs valeurs d'attribut.
Méthode 1. Utilisez attr() pour définir plusieurs valeurs d'attribut
La méthode attr() définit ou renvoie la valeur d'attribut de l'élément sélectionné. Selon les paramètres de la méthode, son fonctionnement est également différent.
Syntaxe :
//多个属性
$(selector).attr({属性名:属性值;属性值:属性值...})Exemple : définissez les attributs de largeur et de hauteur de l'image
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("img").attr({
width: "50",
height: "80"
});
});
});
</script>
</head>
<body>
<img src="img/1.jpg" style="max-width:90%" / alt="Comment définir plusieurs valeurs d'attribut d'un élément dans jquery" >
<br />
<button>设置图像的 width 和 height 属性</button>
</body>
</html>
2. Utilisez prop() pour définir plusieurs valeurs d'attribut
prop() définit ou renvoie le attributs de l'élément et de la valeur sélectionnés.
Lorsque cette méthode est utilisée pour définir des valeurs d'attribut, une ou plusieurs paires attribut/valeur sont définies pour l'ensemble des éléments correspondants.
Grammaire :
//多个属性
$(selector).prop({属性名:属性值;属性值:属性值...})Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("img").prop({
width: "50",
height: "80"
});
});
});
</script>
</head>
<body>
<img src="img/1.jpg" style="max-width:90%" / alt="Comment définir plusieurs valeurs d'attribut d'un élément dans jquery" >
<br />
<button>设置图像的 width 和 height 属性</button>
</body>
</html>
Connaissances approfondies : La différence entre les méthodes attr() et prop()
La méthode prop() est similaire à la méthode attr(), les deux sont utilisés pour obtenir ou définir les attributs HTML de l'élément, mais il existe des différences essentielles entre les deux.
Recommandation officielle de jQuery : pour les attributs avec deux valeurs true et false, tels que vérifié, sélectionné, désactivé, etc., il est recommandé d'utiliser la méthode prop() pour fonctionner, tandis que d'autres attributs sont recommandés d'utiliser la méthode attr() pour fonctionner.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(function () {
$('input[type="radio"]').change(function(){
var bool = $(this).attr("checked");
if(bool){
$("p").text("你选择的是：" + $(this).val());
}
})
})
</script>
</head>
<body>
<div>
<label><input type="radio" name="fruit" value="苹果" />苹果</label>
<label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
<label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
</div>
<p></p>
</body>
</html>L'effet d'aperçu est illustré dans la figure 1.
Analyse
$().change(function(){
……
})Ce qui précède représente l'événement change dans jQuery, qui est le même que l'événement onchange en JavaScript. Nous le présenterons en détail plus tard.
Dans cet exemple, nous voulons en fait utiliser $(this).attr("checked") pour déterminer si le bouton radio est sélectionné. S'il est sélectionné, obtenez la valeur du bouton radio. Mais après avoir exécuté le code, j'ai trouvé : Cela n'a aucun effet ! Pourquoi est-ce ?
En fait, nous ne pouvons pas obtenir les attributs vérifiés, sélectionnés et désactivés de l'élément de formulaire en utilisant la méthode attr(), mais devons utiliser la méthode prop(). Par conséquent, cela fonctionnera si nous remplaçons la méthode attr() par la méthode prop().
En fait, la méthode prop() semble compenser les lacunes de la méthode attr() dans les opérations sur les attributs de formulaire. Rappelez-vous une phrase : si une propriété ne peut pas être obtenue ou définie à l'aide de la méthode attr(), elle peut être obtenue en modifiant la méthode prop().
【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end】
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
