Home » Jquery » Belajar Jquery : Mengenal dan Memahami Selector

Belajar Jquery : Mengenal dan Memahami Selector

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

Belajar Jquery

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

Belajar Jquery

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 Selectorjika ada yang ingin ditanyakan jangan segansegan untuk meninggalkan komentar. Salam Koding

Apa Komentar Anda ?

1 Komentar di "Belajar Jquery : Mengenal dan Memahami Selector"

Notify of
avatar
Chrinstine
Guest

I am sure this paragraph has touched all the internet users, its really really nice
article on building up new blog.

wpDiscuz
close