attributs et styles jquery (1)

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é

Formation continue

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

attributs et styles jquery (1)

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]