Tutorial selanjutnya adalah melakukan modifikasi atribut. Method yang akan kita bahas di tutorial ini adalah attr(), add(), remove() dan event mouseover dan mouseleave. 

index.html

jquery_custom_code.js

style.css

Result

Mari kita bahas satu-satu arti dari kode yang ada di jquery_custom_code.js

Untuk setiap paragraf yang mempunyai class ‘instruct_title’, untuk setiap div yang mempunyai id ‘closing_statement, dan h3, beri warna merah.

Sama seperti kode sebelumnya, namun method add() akan membuat komputasi lebih cepat, dan disarankan menggunakan yang ini daripada kode yang sebelumnya.

Disini ada penggunaan attr(). Arti dari kode di atas adalah ketika mouse berada di atas li yang mempunyai class ‘important’, maka berikan atribut id=big pada li tersebut. Dan ketika mouse tidak di atas li tersebut, berikan atribut id=small pada elemen li tersebut. Id big dan small refer ke file style.css.

Parameter pada attr() tidak hanya id saja, tapi bisa apapun. pada contoh di atas, parameter nya adalah class. Ketika heading H1 dengan id ‘title’ di klik, maka heading tersebut akan memilik class pretty dan class border yang refer ke file style.css.

Ketika gambar img yang punya id ‘the_img’ di klik, maka ukurannya akan menjadi dua kali lipatnya yaitu 40%, karena di index.html awalnya adalah 20%. Ada tiga cara untuk memberikan attribut width dan length seperti di atas, tapi yang disarankan adalah yang tidak diberikan comment (//), yaitu dalam bentuk object.

Ketika gambar img yang punya id ‘the_img’ di double klik, maka atribut “src” akan dihapus dan gambar akan hilang, namun masih akan muncul kotak border yang tidak sedap dipandang. Untuk mudahnya, gunakan saja method remove().