Detaillierte Erläuterung der Attributzuweisung und der Attributerfassung der Jquery-Methode attr() von Jquery-js-Tutorial-php.cn

Detaillierte Erläuterung der Attributzuweisung und der Attributerfassung der Jquery-Methode attr() von Jquery

WBOY

Freigeben： 2016-05-16 15:05:19

Original

2571 Leute haben es durchsucht

Die Methode attr() wird in jQuery verwendet, um Elementattribute abzurufen und festzulegen. Attr() ist die Abkürzung für Attribut, das häufig in jQuery-DOM-Operationen verwendet wird.

1. attr(attribute name) //Den Wert des Attributs abrufen (den Attributwert des ersten übereinstimmenden Elements abrufen. Mit dieser Methode kann der Wert eines Attributs problemlos vom ersten übereinstimmenden Element abgerufen werden. Wenn dies bei dem Element nicht der Fall ist ein entsprechendes Attribut haben, gibt undefiniert zurück)

2. attr(Attributname, Attributwert) //Legen Sie den Wert des Attributs fest (Legen Sie einen Attributwert für alle übereinstimmenden Elemente fest.)

3. attr(Attributname, Funktionswert) //Legen Sie den Funktionswert des Attributs fest (Legen Sie einen berechneten Attributwert für alle übereinstimmenden Elemente fest. Geben Sie keinen Wert an, sondern eine Funktion und den dadurch berechneten Wert Funktion ist Attributwert )

4. attr(properties) // Mehrere Attributwerte für das angegebene Element festlegen, nämlich: {Attributname eins: „Attributwert eins“, Attributname zwei: „Attributwert zwei“, ... .. .}. (Dies ist die beste Möglichkeit, viele Attribute stapelweise für alle übereinstimmenden Elemente festzulegen. Beachten Sie, dass Sie „className“ als Attributnamen verwenden müssen, wenn Sie das Klassenattribut eines Objekts festlegen möchten. Alternativ können Sie „class“ direkt verwenden. oder 'id'. )

Beispielcode:

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

Nach dem Login kopieren

1.attr(name)//Den Wert des Attributs abrufen

1.1 Verwenden Sie attr(name), um den Titelwert zu erhalten:

<script>

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

</script>

Nach dem Login kopieren

Ergebnisse: Orangensaft anzeigen

1.2 Verwenden Sie attr(name), um den Alt-Wert zu erhalten:

<script>

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

</script>

Nach dem Login kopieren

Ergebnis:

Anzeige 123

2. attr(name,value) //Legen Sie den Wert des Attributs fest

2.1 Verwenden Sie attr(name,value), um den Titelwert wie folgt zu ändern: Essen Sie keine Orangen

<script>

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

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

</script>

Nach dem Login kopieren

Ergebnis:

Zeigen Sie, keine Orangen zu essen

3. attr(name,fn) //Legen Sie den Funktionswert des Attributs fest

3.1 Setzen Sie den Wert des alt-Attributs auf den Wert des title-Attributs.

<script>

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

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

</script>

Nach dem Login kopieren

Ergebnis:

Anzeige 123

4.attr(properties) //Legen Sie ein Objekt in der Form „Name/Wert“ als Attribute aller übereinstimmenden Elemente fest

4.1 Holen Sie sich das zweite

<script>

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

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

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

</script>

Nach dem Login kopieren

Ergebnis:

Anzeige 2, keinen Orangensaft trinken, nicht 123

4.2 Holen Sie sich die zweite

-Einstellungsklasse in
- Apfel
- Orange
- Ananas
- in
  - Apfel
  - Orange
  - Ananas
  - und legen Sie den Stil fest.
    <script> $("ul li:eq(1)").attr({style:"color:red"}); </script>
    Nach dem Login kopieren
    Ergebnis:
  - Apfel
  - Orange
  - Ananas