Memilih Elemen (X)HTML menggunakan JQuery #2013-10-10


Sebuah dokumen (X)HTML pada dasarnya terdiri dari elemen-elemen, tag, kelas, dan attribute. Semua komponen tersebut, akan kita akses ketika membuat web statis. Web statis itu adalah semacam konsep awal yang nantinya akan di kolaborasikan dengan script server side, seperti PHP, JSP, dan ASP.

Website yang baik adalah website yang mampu menghadirkan pengaturan dan interaktifitas yang baik dengan user, dan hal tersebut merupakan pondasi awal dari keberhasilan sebuah website. Tak bisa dipungkiri lagi javascript adalah script yang bisa kita gunakan dalam pengaturan dan interaktifitas, dalam hal ini kita akan menggunakan JQuery (javascript framework). Apalagi javascript merupaka sebuah script yang bersifat client side yang memberikan effect kecepatan, meskipun ada sisi negatifnya.

Pada bahasan berikut akan di jelaskan bagaimana memilih atau mengakses element dari dokumen (X)HTML.

Mengakses Nama Tag

Script yang digunakan dalam mengkases selector nama tag adalah

$("nama_tag")

Berikut contoh penggunaannya

$(document.ready(function() {
   $("img").css({"padding":"3px", "border":"1px solid #ccc"})
});

Dalam script tersebut, JQuery akan mengakses semua tag img yang terdapat dalam berkas (X)HTML tanpa ada batasan. Kemudian diberikan aturan CSS sesuai yang tertera dalam code tersebut.

Mengakses Nama ID
Biasanya ID yang terdapat dalam dokumen (X)HTML akan dihubungkan dengan file CSS yang menyertainya. Dalam CSS tersebut akan diatur output dari ID tersebut. Dalam JQuery script yang digunakan untuk mengakses ID adalah

 $("#nama_id")

Berikut contoh penggunaannya

$(document.ready(function() {
   $("#mybody").css({"background-color":"#666",
	"border":"1px solid #ccc"});
});

Dalam script tersebut, JQuery akan mengakses tag HTML yang ber-ID mybody. Kemudian isi dari tag tersebut akan diberikan aturan CSS sesuai yang tertera dalam code tersebut.

Mengakses Nama Class
Sama seperti ID, class juga slalu dihubungkan dengan CSS, yang membedakan ID dan Class adalah nama ID bersifat unik, artinya dalam satu berkas (X)HTML hanya ada satu nama ID, sedangakan class bisa digunakan oleh beberapa komponen (X)HTML. Berikut cara penggunaannya

$(".nama_class")

Berikut contoh penggunaanya

$(document.ready(function() {
	$(".juara").css({"background-color":"#666","border":"1px solid #ccc", "padding":"3px"});
});

Mengakses Atribut Elemen
Fungsi atribut adalah memberikan informasi tambahan tentang elemen (X)HTML. Berikut penggunaan dari atribut

<a href="http://www.ikhwansm.com">link to ikhwanSM</a>

Berikut contoh penggunaan atribut


$(document.ready(function() {
     $(".link").attr("src":"pathtofile/myfile.png");
});

Dalam script diatas menjelaskan class link dengan atribut src (dalam hal ini sebuah gambar) akan mempunyai nilai pathtofile/myfile.png 




Latest Blog


Instagram For Android »
12/05/2013
Bagi pengguna produk Apple tentunya sudah tidak asing lagi dengan Instagram. Software mobile ini mempunyai fungsi utama sebagai aplikasi pengunggah foto.

Fungsi lain dari Instagram adalah untuk memberikan efek-efek terhadap foto yang akan kita unggah. Sejauh ini paling tidak ada ... detail


Memilih Elemen (X)HTML menggunakan JQuery »
12/05/2013
Sebuah dokumen (X)HTML pada dasarnya terdiri dari elemen-elemen, tag, kelas, dan attribute. Semua komponen tersebut, akan kita akses ketika membuat web statis. Web statis itu adalah semacam konsep awal yang nantinya akan di kolaborasikan dengan script server side, seperti PHP, ... detail
CSS Framework (Introduction) »
12/05/2013
CSS framework adalah kerangka kerja berbasiskan CSS yang didalamnya terdapat berbagai macam fungsi dan pengaturan yang telah ditentukan. Dengan adanya sebuah framework akan membantu para developer dalam membangun sebuah aplikasi berbasis website.

Dalam tulisan sebelumnya, dituliskan fungsi utama dari CSS ... detail


Microblogging »
12/05/2013
Beberapa waktu lalu kita di kejutkan dengan informasi bahwa Indonesia adalah peringkat ke-3 dunia pengguna facebook dengan jumlah pengguna 43.60.360 (Feb 2012). Jumlah yang sangat besar jika di bandingkan dengan tingkat perkembangan internet yang tidak terlalu pesat jika dibandingkan dengan ... detail

Online Shop