Maison >interface Web >js tutoriel >Méthode Jquery attr() explication détaillée de l'affectation d'attribut et de l'acquisition d'attribut_jquery

Méthode Jquery attr() explication détaillée de l'affectation d'attribut et de l'acquisition d'attribut_jquery

WBOYoriginal: 2016-05-16 15:05:192614parcourir

La méthode attr() est utilisée dans jquery pour obtenir et définir les attributs des éléments. attr est l'abréviation d'attribut. Attr() est souvent utilisé dans les opérations jQuery DOM. attr() a 4 expressions.

1. attr(attribute name) //Obtenir la valeur de l'attribut (obtenir la valeur de l'attribut du premier élément correspondant. Cette méthode peut facilement obtenir la valeur d'un attribut à partir du premier élément correspondant. Si l'élément ne le fait pas avoir un attribut correspondant, renvoie undefined )

2. attr(nom de l'attribut, valeur de l'attribut) //Définissez la valeur de l'attribut (Définissez une valeur d'attribut pour tous les éléments correspondants.)

3. attr(nom de l'attribut, valeur de la fonction) //Définissez la valeur de fonction de l'attribut (Définissez une valeur d'attribut calculée pour tous les éléments correspondants. Ne fournissez pas de valeur, mais fournissez une fonction et la valeur calculée par celle-ci. la fonction est la valeur de l'attribut)

4. attr(properties) //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", ... .. .}. (C'est la meilleure façon de définir de nombreux attributs par lots sur tous les éléments correspondants. Notez que si vous souhaitez définir l'attribut de classe d'un objet, vous devez utiliser « className » comme nom d'attribut. Ou vous pouvez utiliser directement « class » ou 'identifiant' )

Exemple de code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery中attr()方法</title>

<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript" ></script>

<style>

p{color:red}

li{color:blue;}

.lili{font-weight:bold;color:red;}

#lili{font-weight:bold;color:red;}

</style>

</head>

<body>

<p title="你最喜欢的水果是。">你最喜欢的水果是？</p>

<ul>

<li title="苹果汁">苹果</li>

<li title="橘子汁" alt="123">橘子</li>

<li title="菠萝汁">菠萝</li>

</ul>

<script>

...

</script>

</body>

<html>

1.attr(name)//Obtenir la valeur de l'attribut

1.1 Utilisez attr(name) pour obtenir la valeur du titre :

<script>

alert($("ul li:eq(1)").attr("title"));

</script>

Résultats : Afficher le jus d'orange

1.2 Utilisez attr(name) pour obtenir la valeur alt :

<script>

alert($("ul li:eq(1)").attr("alt"));

</script>

Résultat :

2. attr(name,value) //Définir la valeur de l'attribut

2.1 Utilisez attr(name,value) pour modifier la valeur du titre en : Ne mangez pas d'oranges

<script>

$("ul li:eq(1)").attr("title","不吃橘子");

alert($("ul li:eq(1)").attr("title"));

</script>

Résultat :

Montrez de ne pas manger d'oranges

3. attr(name,fn) //Définir la valeur de fonction de l'attribut

3.1 Définissez la valeur de l'attribut alt sur la valeur de l'attribut title.

<script>

$("ul li:eq(1)").attr("title",function(){ return this.alt});

alert($("ul li:eq(1)").attr("title"));

</script>

Résultat :

4.attr(properties) //Définit un objet sous la forme de "nom/valeur" comme attributs de tous les éléments correspondants

4.1 Obtenez le deuxième 25edfb22a4f469ecb59f1190150159c6 dans ff6d136ddc5fdfeffaf53ff6ee95f185 et définissez les attributs title et alt.

<script>

$("ul li:eq(1)").attr({title:"不喝橘子汁",alt:"不是123"});

alert($("ul li:eq(1)").attr("title"));

alert($("ul li:eq(1)").attr("alt"));

</script>

Résultat :

Affichage 2, ne buvez pas de jus d'orange, pas 123

4.2 Obtenez la deuxième classe de paramètres 25edfb22a4f469ecb59f1190150159c6

<script>

$("ul li:eq(1)").attr({className:"lili"});

</script>

Résultat :

860a1770686ee916ff8f39e06bae5df4Pommebed06894275b65c1ab86501b08a632eb

e92a82637e3138577ede17865ccda52cOrangebed06894275b65c1ab86501b08a632eb

f5567805064004c45b79f71d71dd06dcAnanasbed06894275b65c1ab86501b08a632eb

4.3 Obtenez l'identifiant de paramètre du deuxième 25edfb22a4f469ecb59f1190150159c6 dans ff6d136ddc5fdfeffaf53ff6ee95f185.

<script>

$("ul li:eq(1)").attr({id:"lili"});

</script>

Résultat :

860a1770686ee916ff8f39e06bae5df4Pommebed06894275b65c1ab86501b08a632eb

93558e83714f2cb5d19a2cd10826e6d4Orangebed06894275b65c1ab86501b08a632eb

f5567805064004c45b79f71d71dd06dcAnanasbed06894275b65c1ab86501b08a632eb

4.4 Obtenez le deuxième 25edfb22a4f469ecb59f1190150159c6 dans ff6d136ddc5fdfeffaf53ff6ee95f185

<script>

$("ul li:eq(1)").attr({style:"color:red"});

</script>

Résultat :

860a1770686ee916ff8f39e06bae5df4Pommebed06894275b65c1ab86501b08a632eb

8bba38b293e7e58826f4ca0945b95ab7Orangebed06894275b65c1ab86501b08a632eb

f5567805064004c45b79f71d71dd06dcAnanasbed06894275b65c1ab86501b08a632eb

Il est faux d'ajouter alt dans li. Il ne peut être utilisé que dans les éléments img, area et input (y compris les éléments d'applet). Pour les éléments d'entrée, l'attribut alt est destiné à remplacer l'image du bouton de soumission. Afin d'expliquer la méthode attr() en détail ici, il n'y a pas d'attribut approprié, donc alt est utilisé comme exemple. C'est uniquement pour l'apprentissage et la référence de l'utilisation de la méthode attr().

Voici la différence entre alt et tite.

alt : Il s'agit du texte utilisé pour décrire les graphiques. Lorsque l'image ne peut pas être affichée, ces textes seront affichés à la place de l'image. Le texte sera également affiché lorsque la souris sera déplacée sur l'image.

titre : C'est le texte qui sera affiché une fois la souris placée dessus.

Alors comment supprimer des attributs ?

Le mot-clé pour supprimer les attributs dans jquery est : removeAttr. Notez que A est en majuscule. Voyez comment l'utiliser :

Le même code html en usage premier, je veux supprimer l'attribut title de li, alors ça y est :

<script>

$("ul li:eq(1)").removeAttr("title");

</script>

C'est aussi simple que cela, attr est en fait une implémentation simplifiée de getAttribute en js natif, et RemoveAttr est l'abréviation de RemoveAttribute.

Alors, existe-t-il un attribut similaire à attr() ?

val() dans jquery est similaire,

$(this).val(); Obtient la valeur d'un nœud d'élément, équivalent à $(this).attr("value");

$(this).val(value); Définir la valeur d'un nœud d'élément, équivalent à $(this).attr("value",value);

L'explication détaillée ci-dessus de l'attribution et de l'acquisition d'attributs de la méthode Jquery attr() est tout le contenu partagé par l'éditeur. J'espère qu'elle pourra vous donner une référence, et j'espère également que vous soutiendrez Script Home.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Window.Open ouvre le formulaire et s'il est imbriqué, les compétences code_javascriptArticle suivant：Window.Open ouvre le formulaire et s'il est imbriqué, les compétences code_javascript

Articles Liés

Voir plus