Dika Tekno Pusat Informasi dan Tutorial Terlengkap
Belajar Jquery : Mengenal dan Memahami Selector – Di artikel sebelumnya saya membahas tentang pengenalan Jquery, jadi yang belum baca saya sarankan untuk membacanya terlebih dahulu biar lebih afdol.
Baca Juga : Belajar JQUERY : Tak Kenal Maka Tak Sayang
Kali ini kita saya akan membahas tentang Selector, apa itu selector? fungsinya apa?. Saya akan mengupasnya secara detail dan mendalam, so pahami baik baik yah.
Belajar Jquery : Mengenal dan Memahami Selector
Selector berfungsi untuk memilih/mengambil elemen-elemen tertentu yang ingin dilakukan operasi terhadap elemen tersebut atau manipulas terhadap elemen-elemn tersebut. Adapun elemen-elemen dasar yang dapat dipilih oleh selector adalah sebagai berikut :
- Nama Tag
- Id
- dan Class
Untuk mengetahui bagaimana cara selector dalam memilih elemen-elemen tersebut, akan disajika beberapa contoh sederhana pada bagian berikutnya.
Selector Tag
Cara menggunakan selector tag adalah dengan langsung menyebut nama tag elemennya.
Selector Id
Cara menggunakan Selector id adalah dengan menyertakan tanda kres (#) sebelum nama
elemennya.
Selector Class
Cara menggunakan Selector class ini adalah dengan menyertakan tanda titik (.) sebelum nama elemennya.
Biar lebih gampang untuk memahaminya saya kasih latihan-latihan berikut untuk menjelaskan teori diatas.
Sebelum kita lanjut download file Jqueri-1.4.3 disini dan simpan dalam 1 folder dengan file latihan.
Latihan1.html
<html>
<head>
<script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript">
$("document").ready(function(){
alert ("Selamat datang");
});
</script>
</head>
<body>
</body>
</html>
Hasilnya akan seperti ini, jika kita menjalan file Latihan1
Latihan2.html
<html>
<head>
<Script language="javascript" src="jquery-v1.10.2.js" ></script>
<Script language="javascript">
$(document).ready(function(){
$("input").click(function(){
alert("Selamat Datang di Dika Tekno");
});
});
</script>
</head>
<body>
<input type="submit" value="Klik"/>
</body>
</html>
Ketika kita klik tombol “klik” maka akan tampil seperti dibawah ini
Latihan3.html
<html>
<head>
<script type="text/javascript" src="jquery-v1.10.2.js">
</script>
<script type="text/javascript">
$("document").ready(function(){
$("#p1").css("color","red");
});
</script>
<title>latihan 3</title>
</head>
<body>
<p id="p1">Ini isi paragraf 1 </p>
<p id="p2">Ini isi paragraf 2 </p>
</body>
</html>
Latihan4.html
<html>
<head>
<script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$("#judul").addClass("merahkuning");
$(".sub1").addClass("kuninghitam");
});
</script>
<style type="text/css">
.merahkuning {
color: red;
font-weight: bold;
background-color:yellow;
padding:3px;
}
.kuninghitam {
color:yellow;
background-color:black;
}
</style>
</head>
<body>
<h1>Judul Buku Kuliah Pemrograman Web </h1>
<ol id="judul">
<li class="sub1">Pemrograman PHP</li>
<li>Database mysql</li>
<li class="sub1">Mempercantik web dengan jquery</li>
</ol>
</body>
</html>
Baiklah mungkin itu saja pelajaran kita tentang Belajar Jquery : Mengenal dan Memahami Selector, jika ada yang ingin ditanyakan jangan segansegan untuk meninggalkan komentar. Salam Koding
I am sure this paragraph has touched all the internet users, its really really nice
article on building up new blog.