jQuery - Atribut

Beberapa dari komponen paling dasar yang dapat kita manipulasi ketika berhubungan dengan elemen DOM adalah properti dan atribut yang ditetapkan ke elemen tersebut.

Sebagian besar atribut ini tersedia melalui JavaScript sebagai properti simpul DOM. Beberapa properti yang lebih umum adalah -

className
tagName
id
href
title
rel
src

Pertimbangkan markup HTML berikut untuk elemen gambar -

<img id = "imageid" src = "image.gif" alt = "Image" class = "myclass" 
   title = "This is an image"/>

Dalam markup elemen ini, nama tagnya adalah img, dan markup untuk id, src, alt, class, dan title mewakili atribut elemen, yang masing-masing terdiri dari nama dan nilai.

jQuery memberi kita cara untuk dengan mudah memanipulasi atribut elemen dan memberi kita akses ke elemen sehingga kita juga dapat mengubah propertinya.

Dapatkan Nilai Atribut

Itu attr() metode dapat digunakan untuk mengambil nilai atribut dari elemen pertama dalam set yang cocok atau menyetel nilai atribut ke semua elemen yang cocok.

Contoh

Berikut adalah contoh sederhana yang mengambil atribut judul dari tag <em> dan menyetel nilai <div id = "divid"> dengan nilai yang sama -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            var title = $("em").attr("title");
            $("#divid").text(title);
         });
      </script>
   </head>
	
   <body>
      <div>
         <em title = "Bold and Brave">This is first paragraph.</em>
         <p id = "myid">This is second paragraph.</p>
         <div id = "divid"></div>
      </div>
   </body>
</html>

Ini akan menghasilkan hasil sebagai berikut -

Tetapkan Nilai Atribut

Itu attr(name, value) metode dapat digunakan untuk mengatur atribut bernama ke semua elemen dalam set terbungkus menggunakan nilai yang diteruskan.

Contoh

Berikut ini adalah contoh sederhana yang mengatur src atribut dari tag gambar ke lokasi yang benar -

<html>
   <head>
      <title>The jQuery Example</title>
      <base href="https://www.tutorialspoint.com" />
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#myimg").attr("src", "/jquery/images/jquery.jpg");
         });
      </script>
   </head>
	
   <body>
      <div>
         <img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image" />
      </div>
   </body>
</html>

Ini akan menghasilkan hasil sebagai berikut -

Menerapkan Gaya

Itu addClass( classes )metode dapat digunakan untuk menerapkan lembar gaya yang ditentukan ke semua elemen yang cocok. Anda dapat menentukan beberapa kelas yang dipisahkan oleh spasi.

Contoh

Berikut ini adalah contoh sederhana yang mengatur class atribut dari tag para <p> -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("em").addClass("selected");
            $("#myid").addClass("highlight");
         });
      </script>
		
      <style>
         .selected { color:red; }
         .highlight { background:yellow; }
      </style>	
   </head>
	
   <body>
      <em title = "Bold and Brave">This is first paragraph.</em>
      <p id = "myid">This is second paragraph.</p>
   </body>
</html>

Ini akan menghasilkan hasil sebagai berikut -

Metode Atribut

Tabel berikut mencantumkan beberapa metode berguna yang dapat Anda gunakan untuk memanipulasi atribut dan properti -

Sr.No.	Metode & Deskripsi
1	attr (properti) Tetapkan objek kunci / nilai sebagai properti untuk semua elemen yang cocok.
2	attr (key, fn) Tetapkan satu properti ke nilai yang dihitung, di semua elemen yang cocok.
3	removeAttr (nama) Hapus atribut dari setiap elemen yang cocok.
4	hasClass (kelas) Mengembalikan nilai benar jika kelas yang ditentukan ada di setidaknya satu dari set elemen yang cocok.
5	removeClass (kelas) Menghapus semua atau kelas yang ditentukan dari himpunan elemen yang cocok.
6	toggleClass (kelas) Menambahkan kelas yang ditentukan jika tidak ada, menghapus kelas yang ditentukan jika ada.
7	html () Dapatkan konten html (innerHTML) dari elemen pertama yang cocok.
8	html (val) Setel konten html dari setiap elemen yang cocok.
9	teks () Dapatkan konten teks gabungan dari semua elemen yang cocok.
10	teks (val) Atur konten teks dari semua elemen yang cocok.
11	val () Dapatkan nilai input dari elemen pertama yang cocok.
12	val (val) Atur atribut nilai dari setiap elemen yang cocok jika dipanggil pada <input> tetapi jika dipanggil pada <select> dengan nilai <option> yang diteruskan maka opsi yang lewat akan dipilih, jika dipanggil pada kotak centang atau kotak radio maka semua kotak centang yang cocok dan kotak radio akan dicentang.

Contoh

Mirip dengan sintaks dan contoh di atas, contoh berikut akan memberi Anda pemahaman tentang penggunaan berbagai metode atribut dalam situasi yang berbeda -

Berikut adalah daftar lengkap metode atribut dalam situasi yang berbeda -

Sr.No.	Pemilih & Deskripsi
1	$("#myID").attr("custom") Ini akan mengembalikan nilai atribut khusus untuk elemen pertama yang cocok dengan ID myID.
2	$("img").attr("alt", "Sample Image") Ini mengatur alt atribut semua gambar ke nilai baru "Contoh Gambar".
3	$("input").attr({ value: "", title: "Please enter a value" }); Menyetel nilai semua <input> elemen ke string kosong, serta menyetel Contoh jQuery ke string Harap masukkan nilai .
4	$("a[href^=https://]").attr("target","_blank") Memilih semua tautan dengan atribut href yang dimulai dengan https: // dan menyetel atribut targetnya ke _blank .
5	$("a").removeAttr("target") Ini akan menghapus atribut target dari semua tautan.
6	$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); Ini akan mengubah atribut yang dinonaktifkan menjadi nilai "disabled" saat mengklik tombol Kirim.
7	$("p:last").hasClass("selected") Ini mengembalikan true jika tag <p> terakhir memiliki kelas terkait yang dipilih .
8	$("p").text() Mengembalikan string yang berisi konten teks gabungan dari semua elemen <p> yang cocok.
9	$("p").text("<i>Hello World</i>") Ini akan menetapkan "<I> Hello World </I>" sebagai konten teks dari elemen <p> yang cocok.
10	$("p").html() Ini mengembalikan konten HTML dari semua paragraf yang cocok.
11	$("div").html("Hello World") Ini akan mengatur konten HTML dari semua <div> yang cocok menjadi Hello World .
12	$("input:checkbox:checked").val() Dapatkan nilai pertama dari kotak centang.
13	$("input:radio[name=bar]:checked").val() Dapatkan nilai pertama dari serangkaian tombol radio.
14	$("button").val("Hello") Menetapkan atribut nilai dari setiap elemen <button> yang cocok.
15	$("input").val("on") Ini akan mencentang semua radio atau tombol kotak centang yang nilainya "on".
16	$("select").val("Orange") Ini akan memilih opsi Oranye di kotak dropdown dengan opsi Oranye, Mangga dan Pisang.
17	$("select").val("Orange", "Mango") Ini akan memilih opsi Jeruk dan Mangga dalam kotak dropdown dengan opsi Jeruk, Mangga dan Pisang.