Chaque élément possède un ou plusieurs attributs. Le but de ces attributs est de donner des informations complémentaires sur l'élément correspondant ou son contenu. Par exemple : dans l'élément img, src est l'attribut de l'élément et sert à marquer l'adresse de l'image.
Il existe trois méthodes DOM principales pour exploiter les attributs, la méthode getAttribute, la méthode setAttribute et la méthode removeAttribute. Même ainsi, il y aura encore de nombreux problèmes dans le fonctionnement réel, qui ne seront pas abordés ici. Dans jQuery, utiliser attr() et removeAttr() peut tout résoudre, y compris les problèmes de compatibilité.
Dans jQuery, la méthode attr() est utilisée pour obtenir et définir les attributs des éléments. attr est l'abréviation d'attribut , attr. ()
attr() est souvent utilisé dans les opérations jQuery DOM. Il existe 4 expressions
attr (nom de l'attribut entrant) : Obtenez la valeur de l'attribut
<. 🎜> attr(nom de l'attribut, valeur de l'attribut) : Définir la valeur de l'attribut
attr(nom de l'attribut, valeur de la fonction) : Définir la valeur de la fonction de l'attribut
attr(attributs) : Définissez plusieurs valeurs d'attribut pour l'élément spécifié, à savoir : {Nom d'attribut un : "Valeur d'attribut un", Nom d'attribut deux : "Valeur d'attribut deux", … … }
removeAttr()Supprimer la méthode
.removeAttr(attributeName) : Supprimer un attribut (attribut) de chaque élément de l'ensemble d'éléments correspondant
Avantages :
attr et removeAttr sont encapsulés par jQuery pour les opérations d'attributs. L'appel de cette méthode directement sur un objet jQuery facilite l'utilisation des attributs, et il n'est pas nécessaire de comprendre spécialement le problème des différents noms d'attributs dans les navigateurs
Choses à noter :
Il existe une distinction conceptuelle dans DOM : Attribut et Propriété sont tous deux traduits par "attributs", et le livre "JS Advanced Programming" est traduit par "fonctionnalités" et " attributs ». Pour comprendre simplement, Attribute est l'attribut qui accompagne le nœud dom
Par exemple : id, class, title, align, etc. couramment utilisé en html :
<div id="phpcn" title="php中文网"></div>
Et Property est ce DOM élément en tant qu'objet et sa pièce jointe. Le contenu, tel que tagName, nodeName, nodeType,, defaultChecked et defaultSelected, utilise la méthode .prop() pour obtenir ou attribuer des valeurs, etc.
Pour pour obtenir l'attribut, vous devez utiliser attr, et pour obtenir la propriété, vous devez utiliser prop
Regardons un exemple pour changer la valeur d'attribut d'une image
Le code est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<img src="1.jpg" width="200" height="200" id="img">
<script type="text/javascript">
$("#img").attr('width','400');
</script>
</body>
</html>Remarque : vous devez d'abord avoir cette image 1 .jpg Vous pouvez trouver une image à essayer, puis exécuter les résultats
Comment utiliser l'attr( ) pour obtenir la valeur de l'attribut, veuillez consulter l'exemple ci-dessous
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<input type="text" value="php 中文网" id="ipt">
<script type="text/javascript">
alert($("#ipt").attr('value'));
</script>
</body>
</html>Vous pouvez voir la fenêtre contextuelle Le contenu affiché dans la boîte est un site Web chinois php
Voyons comment supprimer le contenu de l'élément removeAttr()
Le code est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<input type="text" value="php 中文网" id="ipt">
<script type="text/javascript">
$("#ipt").removeAttr("value");
</script>
</body>
</html>Remarque : notre zone de texte a à l'origine du contenu lorsque le langage de script est exécuté. , le contenu du texte sera supprimé
section suivante
