Maison >interface Web >Questions et réponses frontales >Comment définir les attributs des éléments dans jquery
Comment définir les attributs des éléments dans jquery
- 青灯夜游original
- 2022-03-10 18:42:117055parcourir
Méthode de paramétrage : 1. Utilisez la méthode attr(), la syntaxe "$(selector).attr(attribute name, value)" ou "$(selector).attr({attribute name: value;})" ; Méthode prop(), syntaxe "$(selector).prop(property name, value)".
L'environnement d'exploitation de ce tutoriel : système windows7, version jquery1.10.2, ordinateur Dell G3.
jquery définit les attributs des éléments
1 Utilisez la méthode attr()
attr() pour définir ou renvoyer 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(属性名,值)
//多个属性
$(selector).attr({属性名:值;属性值:值...})2. Utilisez la méthode prop()
prop() pour définir ou renvoyer les attributs et les valeurs de l'élément sélectionné.
Lorsque cette méthode est utilisée pour définir des valeurs d'attribut, elle définit une ou plusieurs paires attribut/valeur pour l'ensemble des éléments correspondants.
Syntaxe :
//单个属性
$(selector).prop(属性名,值)
//多个属性
$(selector).prop({属性名:值;属性值:值...})3. La différence entre les méthodes attr() et prop()
La méthode prop() est similaire à la méthode attr(), les deux sont utilisées pour obtenir ou définir les attributs HTML du élément, mais les deux Il existe également des différences fondamentales.
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 pour 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!