Belajar JQuery : Attributes

posted in: Tutorial Pemrograman | 0

Beberapa komponen yang paling dasar dapat kita manipulasi dalam bentuk DOM elemen adalah property dan atribut-nya.

Sebagian besar atribut ini tersedia melalui JavaScript sebagai properti DOM node. Beberapa sifat yang lebih umum adalah −

  • className
  • tagName
  • id
  • href
  • title
  • rel
  • src

Mendapatkan Nilai Attribute

Method attr() dapat digunakan untuk baik mengambil nilai dari atribut dari elemen pertama pada set cocok atau mengatur nilai atribut ke semua elemen cocok.

Contoh

Berikut ini adalah contoh sederhana yang mengambil atribut tag <em> dan menetapkan <div id = “divid”> nilai dengan nilai yang sama −


<html>

 <head>
 <title>Contoh JQuery</title>
 <script type = "text/javascript" 
 src = "http://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>


Set Attribute Value

Method attr(name, value) dapat dipakai untuk men-set atribut lengkap dengan nilainya..

Contoh

Berikut ini adalah contoh sederhana yang mengatur atribut src dari tag gambar ke lokasi yang tertentu −


<html>

 <head>
 <title>Contoh JQuery</title>
 <script type = "text/javascript" 
 src = "http://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>

Attribute Methods

Tabel berikut berisi daftar beberapa method yang dapat Anda gunakan untuk memanipulasi atribut dan properti −

S.N. Methods & Description
1 attr( properties )

Set a key/value object as properties to all matched elements.

2 attr( key, fn )

Set a single property to a computed value, on all matched elements.

3 removeAttr( name )

Remove an attribute from each of the matched elements.

4 hasClass( class )

Returns true if the specified class is present on at least one of the set of matched elements.

5 removeClass( class )

Removes all or the specified class(es) from the set of matched elements.

6 toggleClass( class )

Adds the specified class if it is not present, removes the specified class if it is present.

7 html( )

Get the html contents (innerHTML) of the first matched element.

8 html( val )

Set the html contents of every matched element.

9 text( )

Get the combined text contents of all matched elements.

10 text( val )

Set the text contents of all matched elements.

11 val( )

Get the input value of the first matched element.

12 val( val )

Set the value attribute of every matched element if it is called on <input> but
if it is called on <select> with the passed <option> value then passed option
would be selected,if it is called on check box or radio box then all the matching
check box and radiobox would be checked.

Leave a Reply