1. jQuery core 2. Selectors 3. Attributes 4. Traversing 5. Manipulation
6. CSS 7. Events 8. Effects 9. AJAX 10. Plugin/jQuery UI ( User Interface 11. Utilities
6. CSS 7. Events 8. Effects 9. AJAX 10. Plugin/jQuery UI ( User Interface 11. Utilities
Namun lebih baik kita mempelajari dan memahami yang mendasar dari jQuery, yaitu Selectors, Events, dan Effects.
Dasar - dasar pemograman dalam jQuery
Sebelum masuk ke dalam dasar pemograman jQuery ada baiknya kita memahami terlebih dahulu tentang filosofinya. karena pada nantinya pemograman jQuery akan mengacu kedalam filosofi dasar, Contoh:
jQuery("div").addClass("xyz");penjelasan dasar dari kode diatas:
jQuery = jQuery function
("div") = element/expression
.addClass("xyz"); = jQuery methodDalam pemograman umum, jQuery di ganti dengan logo dolar ($) yang merupakan simbol resmi dari fungsi jQuery. sehingga sering di tulis seperti berikut:
$("div").addClass("xyz");penjelasan kode di atas:
$ = jQuery function
("div") = cari element tertentu
.addClass("xyz"); = lakukan sesuatu pada element tersebutInti dari fungsi jQuery akan mencari suatu element yang telah di definisikan di bagian dalam element body, kemudian sesuatu tindakan akan dilakukan pada element tersebut. demikianlah filosofi dasar dari jQuery.
Selectors ( Memilih Element )
Selectors memiliki fungsi untuk memilih/mengambil elemen - elemen tertentu untuk di beri oprasi/manipulasi pada elemen tersebut. berikut ini adalah beberapa elemen dasar yang dapat di pilih oleh selector:
1.id 2.class 3.tag
untuk mengetahui bagaimana cara selectors dalam memilih elemen - elemen tersebut, penulis akan sajikan beberapa contoh sederhana pada sub bab berikutnya sehingga mempermudah anda dalam memahami selectors.
01Selectors id
Cara menggunakan selector id adalah dengan menyertakan tanda kres (#) sebelum nama elemennya $("#nama_elemen"). Untuk lebih jelasnya perhatikan kode dibawah ini
<html>
<head>
<script src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#target").addClass("birukuning");
});
</script>
<style type="text/css">
.birukuning {
color: blue;
font-weight: bold;
background-color: yellow;
padding-top: 10px;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div>
<p>Menu Favorit : </p>
</div>
<div>
<ul id="target">
<li>Nasi Goreng</li>
<li>Sop Buntut</li>
<li>Mie Ayam</li>
</ul>
</div>
</body>
</html>Penjelasan kode diatas :
Tag ul dengan id "daftar" akan terpilih oleh selectors, kemudian diberi operasi "birukuning" terhadap elemen terpilih tersebut, sehingga semua text yang berada didalam tag tersebut akan berwarna tersebut.
02Selectors class
Cara menggunakan selectors class adalah dengan menyertakan tanda titik (lihat warna biru) sebelum kode elemennya, $(".nama-elemen-isi"). untuk lebih jelas perhatikan kode dibawah ini
<html>
<head>
<script src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#target").addClass("birukuning");
$(".subtarget").addClass("hitamputih");
});
</script>
<style type="text/css">
.birukuning {
color: blue;
font-weight: bold;
background-color: yellow;
padding-top: 10px;
padding-bottom: 10px;
}
.hitamputih {
color: white;
background-color: black;
}
</style>
</head>
<body>
<div>
<p>Menu Favorit : </p>
</div>
<div>
<ul id="target">
<li>Nasi Goreng</li>
<li class="subtarget">Sop Buntut</li>
<li>Mie Ayam</li>
</ul>
</div>
</body>
</html>Penjelasan kode di atas:
Tag li dengan class "subtarget" akan terpilih oleh selectors kemudian di beri nilai oprasi "hitam putih". sehingga semua teks yang berada dalam tag li class "subtarget" (sop buntut) akan berwarna putih dan tebal dengan background hitam.
03Selector tag
Cara mengunakan selectors tag dengan langsung menyebutkan nama tag/elemennya $("div"). Untuk lebih jelasnya, perhatikan kode html pada gambar dibawah ini
<html>
<head>
<script src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").addClass("biru");
});
</script>
<style type="text/css">
.biru {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<p>Menu Favorit : </p>
</div>
<div>
<ul>
<li>Nasi Goreng</li>
<li>Sop Buntut</li>
<li>Mie Ayam</li>
</ul>
</div>
</body>
</html>Penjelasan kode di atas:
Dalam manipulasi tag di atas div akan terpilih oleh selectors dan memiliki operasi style "biru" yang telah didefinisikan pada head jadi tulisan akan berwarna biru tebal.
Demikian pemahaman dan contoh dari jQuery semoga bermanfaat...
2 komentar
komponen jquery apa ya mas?
BalasHapusini salah satunya $(document).ready(function(){
Hapus$("div").addClass("biru");
});
Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>