Memahami Selector Pada Jquery
Apa sih fungsi dari selector itu?
Selector berfungsi untuk memilih/mengambil elemen-elemen tertentu yang ingin dilakukan operasi terhadap elemen tersebut atau manipulas terhadap elemen-elemen tersebut. Adapun elemen-elemen dasar yang dapat dipilih oleh selector adalah sebagai berikut :
1. Nama Tag
2. Id
3. 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.
Latihan-latihan berikut untuk menjelaskan teori diatas.
Contoh 1
<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>
Contoh 2
<html>
<head>
<Script language="javascript" src="jquery-1.4.3.js" ></script>
<Script language="javascript">
$(document).ready(function(){
$("input").click(function(){
alert("hello jquery!");
});
});
</script>
</head>
<body>
<input type="submit" value="click me"/>
</body>
</html>
<head>
<script type="text/javascript" src="jquery-1.4.3.js"> </script>
<script type="text/javascript">
$("document").ready(function(){
$("#p1").css("color","red"); 8. });
</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>
Contoh 4
Selector berfungsi untuk memilih/mengambil elemen-elemen tertentu yang ingin dilakukan operasi terhadap elemen tersebut atau manipulas terhadap elemen-elemen tersebut. Adapun elemen-elemen dasar yang dapat dipilih oleh selector adalah sebagai berikut :
1. Nama Tag
2. Id
3. 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.
Latihan-latihan berikut untuk menjelaskan teori diatas.
Contoh 1
<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>
Contoh 2
<html>
<head>
<Script language="javascript" src="jquery-1.4.3.js" ></script>
<Script language="javascript">
$(document).ready(function(){
$("input").click(function(){
alert("hello jquery!");
});
});
</script>
</head>
<body>
<input type="submit" value="click me"/>
</body>
</html>
Contoh 3
<html><head>
<script type="text/javascript" src="jquery-1.4.3.js"> </script>
<script type="text/javascript">
$("document").ready(function(){
$("#p1").css("color","red"); 8. });
</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>
Contoh 4
<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>
0 Response to "Memahami Selector Pada Jquery "
Post a Comment