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

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

WBOY

Libérer： 2016-05-16 15:05:19

original

2577 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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

dans

<script>

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

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

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

</script>

Copier après la connexion

Résultat :

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

4.2 Obtenez la deuxième classe de paramètres

<script>

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

</script>

Copier après la connexion

Résultat :

Pomme

Orange

Ananas

4.3 Obtenez l'identifiant de paramètre du deuxième

dans
- Pomme
- Orange
- Ananas
- dans
  - Pomme
  - Orange
  - Ananas