Rumah > hujung hadapan web > tutorial js > Kaedah Jquery attr() penerangan terperinci tentang penugasan atribut dan perolehan_jquery atribut

Kaedah Jquery attr() penerangan terperinci tentang penugasan atribut dan perolehan_jquery atribut

WBOY
Lepaskan: 2016-05-16 15:05:19
asal
2609 orang telah melayarinya

Kaedah attr() digunakan dalam jquery untuk mendapatkan dan menetapkan atribut elemen attr ialah singkatan daripada atribut Attr() sering digunakan dalam operasi DOM jQuery() mempunyai 4 ungkapan.

1. attr(nama atribut) //Dapatkan nilai atribut (dapatkan nilai atribut elemen padanan pertama. Kaedah ini boleh dengan mudah mendapatkan nilai atribut daripada elemen padanan pertama. Jika elemen tidak mempunyai atribut yang sepadan, mengembalikan tidak ditentukan )

2. attr(nama atribut, nilai atribut) //Tetapkan nilai atribut (Tetapkan nilai atribut untuk semua elemen yang sepadan.)

3. attr(nama atribut, nilai fungsi) //Tetapkan nilai fungsi atribut (Tetapkan nilai atribut yang dikira untuk semua elemen yang sepadan. Jangan berikan nilai, tetapi berikan fungsi dan nilai yang dikira oleh ini fungsi ialah nilai atribut )

4. attr(properties) //Tetapkan berbilang nilai atribut untuk elemen yang ditentukan, iaitu: {Nama atribut satu: "Nilai atribut satu", Nama atribut dua: "Nilai atribut dua", ... .. .}. (Ini ialah cara terbaik untuk menetapkan banyak atribut dalam kelompok merentas semua elemen yang sepadan. Ambil perhatian bahawa jika anda ingin menetapkan atribut kelas sesuatu objek, anda mesti menggunakan 'className' sebagai nama atribut. Atau anda boleh terus menggunakan 'class' atau 'id' )

Kod sampel:

<!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>
Salin selepas log masuk

1.attr(nama)//Dapatkan nilai atribut

1.1 Gunakan attr(nama) untuk mendapatkan nilai tajuk:

<script>

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

</script>
Salin selepas log masuk

Keputusan: Tunjukkan Jus Oren

1.2 Gunakan attr(nama) untuk mendapatkan nilai alt:

<script>

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

</script>
Salin selepas log masuk

Hasil:

Menunjukkan 123


2. attr(nama,nilai) //Tetapkan nilai atribut


2.1 Gunakan attr(nama,nilai) untuk mengubah suai nilai tajuk kepada: Jangan makan oren

<script>

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

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

</script>
Salin selepas log masuk

Hasil:

Tunjukkan untuk tidak makan oren

3. attr(nama,fn) //Tetapkan nilai fungsi atribut

3.1 Tetapkan nilai atribut alt kepada nilai atribut tajuk.

<script>

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

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

</script>
Salin selepas log masuk

Hasil:

Menunjukkan 123

4.attr(properties) //Tetapkan objek dalam bentuk "nama/nilai" sebagai atribut semua elemen yang sepadan

4.1 Dapatkan

  • kedua dalam

      <script>
      
      $("ul li:eq(1)").attr({title:"不喝橘子汁",alt:"不是123"});
      
      alert($("ul li:eq(1)").attr("title"));
      
      alert($("ul li:eq(1)").attr("alt"));
      
      </script>
      
      Salin selepas log masuk

      Hasil:

      Menunjukkan 2, jangan minum jus oren, bukan 123

      4.2 Dapatkan kelas tetapan

    • kedua dalam
        .

        <script>
        
        $("ul li:eq(1)").attr({className:"lili"});
        
        </script>
        
        Salin selepas log masuk

        Hasil:

      • Epal
      • Oren
      • Nenas
      • 4.3 Dapatkan id tetapan

      • kedua dalam
          .

          <script>
          
          $("ul li:eq(1)").attr({id:"lili"});
          
          </script>
          
          Salin selepas log masuk

          Hasil:

        • Epal
        • Oren
        • Nenas
        • 4.4 Dapatkan

        • kedua dalam

            <script>
            
            $("ul li:eq(1)").attr({style:"color:red"});
            
            </script>
            
            Salin selepas log masuk

            Hasil:

          • Epal
          • Oren
          • Nenas
          • Adalah salah untuk menambah alt dalam li Ia hanya boleh digunakan dalam img, kawasan dan elemen input (termasuk elemen applet). Untuk elemen input, atribut alt bertujuan untuk menggantikan imej butang hantar. Untuk menerangkan kaedah attr() secara terperinci di sini, tiada atribut yang sesuai, jadi alt digunakan sebagai contoh sahaja untuk pembelajaran dan rujukan penggunaan kaedah attr().

            Berikut ialah perbezaan antara alt dan tite.

            alt: Ini ialah teks yang digunakan untuk menerangkan grafik Apabila gambar tidak dapat dipaparkan, teks ini akan dipaparkan dan bukannya gambar. Teks juga akan dipaparkan apabila tetikus dialihkan ke atas imej.

            tajuk: Ia adalah teks yang akan dipaparkan selepas tetikus diletakkan di atasnya.

            Jadi bagaimana untuk memadamkan atribut?

            Kata kunci untuk memadamkan atribut dalam jquery ialah: removeAttr. Sila ambil perhatian bahawa A menggunakan huruf besar

            Kod html yang sama dalam penggunaan satu, saya mahu memadamkan atribut tajuk li, maka ini dia:


            <script>
            
            $("ul li:eq(1)").removeAttr("title");
            
            </script>
            
            Salin selepas log masuk

            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.

  • Label berkaitan:
    sumber:php.cn
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan