Saturday, May 28, 2016

jQuery : Memahami Selector & Instal, latihan jQuery

Memahami Selector

Selector berfungsi untuk memilih/mengambil elemen-elemen tertentu yang ingin dilakukan operasi terhadap elemen tersebut atau manipulasi 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
disajikan 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 pagar(#) 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.


Sekarang untuk penginstalan JQuery silakan kalian copykan code berikut yang ada didalam link kotak listing lalu beri nama jquery-1.12.4.min.js :


Taruh File didalam folder yang sama seperti kalian membuat file latihan yang akan saya berikan, sebagai contoh htdocs/latihanjQuery/jquery-1.12.4.min.js .


Untuk Contoh pertama silakan kalian buka notepad, notepad++, sublime text,atau dream weaver kalian dan masukkan listing berikut :
Latihan1
<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
alert ("Selamat datang");
});
</script>
</head>
<body>
</body>
</html>


Latihan2
<html>
<head>
<Script language="javascript" src="jquery-1.12.4.min.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>



Latihan3
<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.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>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.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>



Jika ada pertanyaan silakan melalui komentar :)













Reviewer: FajarYusuf.Com
ItemReviewed: jQuery : Memahami Selector & Instal, latihan jQuery

Seseorang yang ingin membagi pengalaman dan ilmu yang berguna untuk para pembaca FajarYusuf.Com :)

TENTANG SITUS

SITUS INI ADALAH SITUS PEMBELAJARAN PEMROGRAMAN DAN JUGA PEMAHAMAN TERHADAP TEKNOLOGI KOMPUTER. KALIAN BISA MENGIKUTI PEMBELAJARAN PEMROGRAMAN DENGAN BERTAHAP PADA MATERI YANG SUDAH SAYA SEDIAKAN, JIKA ADA MATERI YANG MEMBINGUNGKAN SILAKAN LAKUKAN KOMENTAR PADA MATERI YANG ANDA TANYAKAN ATAU KALIAN BISA MENGHUBUNGI SAYA DIHALAMAN KONTAK.