Tutorial jQuery #2 : Selector pada jQuery

Tutorial jQuery #2 : Selector pada jQuery

HobbyTekno - Pada postingan ini saya akan membahas tentang Selector pada jQuery, Selector digunakan untuk memilih elemen atau objek berdasarkan tag, id, class dan attribut yang akan dimanipulasi.

Contoh Selector pada TAG (h1, p, div, span, dll)
$('h1').css('color'.'red');

Contoh Selector pada CLASS (.teks, .paragraf, .judul)
$('.judul').css('background-color','red');

Contoh Selector pada ID (#teks, #paragraf, #judul)
$('#judul').css('background-color','red');

Contoh Selector Gabungan (tag, .class, #id)
$('h1 .judul #text').css('background-color','red');

Tutorial jQuery #2 : Selector pada jQuery

1. Pertama, kita buat dulu folder dengan nama Project1. (BEBAS)

2. Lalu ketik dulu tag dasar HTML berikut, lalu simpan sebagai .html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar jQuery #2 - HobbyTekno</title>
</head>
<body>
 
</body>
</html>

2. Lalu, kita buat file dengan nama style.css untuk menyimpan CSS nya nanti, lalu tambahkan code berikut pada bagian <head> index.html untuk menghubungkannya ke style.css.
<link rel="stylesheet" href="style.css">

3. Pastikan file jQuery sudah ada dalam folder Project1, Silahkan baca Tutorial jQuery #1. (WAJIB)

4. Lalu kita buat file baru lagi dengan nama script.js, script js ini yang nantinya akan digunakan untuk menyimpan Script jQuery Custom kita.

5. Kita buat tag class dan id pada index.html
<h1>Saya sedang belajar jQuery</h1>
<h1 class="ini-kelas">Saya sedang belajar jQuery</h1>
<h1 id="ini-id">Saya sedang belajar jQuery</h1>
6. pada script.js kita ketik kode seperti berikut.
$(document).ready(function(){
});
Tag tersebut merupakan tag awal untuk jQuery ketika laman di load.

7. Kita akan melakukan selektsi pada h1 tadi dan mengubah warna font nya menjadi berwarna Merah.
$('h1).css('color','red');
8. Lalu, kita akan melakukan seleksi pada Class "ini-kelas" dan mengubah warna font nya menjadi biru.
$('.ini-kelas').css('color','blue');

9. Dan lakukan seleksi pada ID "ini-id" dan mengubah warna fontnya menjadi kuning
$('#ini-id').css('color','yellow');

Hasilnya akan seperti berikut :

Tutorial jQuery #2 : Selector pada jQuery

Sekian Tutorial jQuery #2 : Selector pada jQuery, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar

No comments for "Tutorial jQuery #2 : Selector pada jQuery"