Home » Jquery » Selektor jQuery – Kode dan Contohnya

Selektor jQuery – Kode dan Contohnya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I
by Hanifah Nurbaeti
by Hanifah Nurbaeti

Selektor jQuery adalah salah satu bagian terpenting dari perpustakaan jQuery.

Selektor jQuery

Selektor jQuery berfungsi untuk memilih dan memanipulasi elemen HTML.

Selektor jQuery digunakan untuk “menemukan” (atau memilih) elemen HTML berdasarkan nama, id, kelas, tipe, atribut, nilai atribut, dan banyak lagi. Hal ini didasarkan pada Selektor CSS yang ada dan sebagai tambahan, selektor ini memiliki beberapa pemilih khusus sendiri.

Semua selektor di jQuery dimulai dengan tanda dolar dan tanda kurung: $().

Elemen Selektor

Elemen Selektor jQuery memilih elemen berdasarkan nama elemen.

Kita bisa memilih semua <p> elemen pada halaman seperti ini:

$("p")

Contoh

Saat pengguna mengklik tombol “Klik”, semua elemen <p> akan disembunyikan:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>

<h2>Ini  heading</h2>

<p>Ini paragraph 1.</p>
<p>Ini paragraph 2.</p>

<button>Klik, untuk sembunyikan elemen p </button>

</body>
</html>

Selektor #id

Selektor jQuery #id menggunakan atribut id dari tag HTML untuk menemukan elemen tertentu.

Sebuah id harus unik dalam sebuah halaman, jadi kita harus menggunakan selektor #id ketika ingin menemukan satu elemen unik.

Untuk menemukan elemen dengan id tertentu, tulis karakter hash, diikuti dengan id elemen HTML:

$ ("# test")

Contoh

Saat pengguna mengklik tombol “Klik”, elemen dengan id = “test” akan disembunyikan:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>
<body>

<h2> Ini heading</h2>

<p>Ini paragraph 1.</p>
<p id="test">Ini paragraph 2.</p>

<button>Klik</button>

</body>
</html>

Selektor .class

Selektor jQuery .class menemukan elemen dengan kelas tertentu.

Untuk mencari elemen dengan kelas tertentu, tulis karakter titik, diikuti dengan nama kelas:

$ (". test")

Contoh

Saat pengguna mengklik tombol “Klik”, elemen dengan class = “test” akan disembunyikan:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>
</head>
<body>

<h2 class="test">Ini heading</h2>

<p class="test">Ini paragraph 1.</p>
<p>Ini paragraph 2.</p>

<button>Klik</button>

</body>
</html>

Fungsi dalam File Terpisah

Jika situs web kita berisi banyak halaman dan ingin fungsi jQuery mudah dikelola, kita dapat meletakkan fungsi jQuery di file .js terpisah.

Pada tutorial berikut ini fungsinya ditambahkan langsung ke bagian <head>. Namun, terkadang lebih baik untuk menempatkannya dalam file terpisah, seperti ini (gunakan atribut src untuk merujuk ke file .js):

Contoh :

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>

Contoh Lain Selektor jQuery

  • Syntax : $(“*”)
  • Deskripsi : Memilih semua elemen
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("*").hide();
  });
});
</script>
</head>
<body>

<h2>Ini heading</h2>

<p>Ini paragraph 1.</p>
<p>Ini paragraph 2.</p>

<button>Klik</button>

</body>
</html>
  • Syntax : $(this)
  • Deskripsi : Memilih elemen HTML saat ini
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<h2>Ini heading</h2>

<p>Ini paragraph 1.</p>
<p>Ini paragraph 2.</p>

<button>Klik</button>

</body>
</html>
  • Syntax : $(“p.intro”)
  • Deskripsi : Memilih semua elemen <p> dengan class=”intro”
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p.intro").hide();
  });
});
</script>
</head>
<body>

<h2 class="intro">Ini heading</h2>

<p class="intro">Ini paragraph 1.</p>
<p>Ini paragraph 2.</p>

<button>Klik</button>

</body>
</html>
  • Syntax : $(“p:first”)
  • Deskripsi : Memilih elemen <p> pertama
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p:first").hide();
  });
});
</script>
</head>
<body>

<h2>Ini heading</h2>

<p>Ini paragraph 1.</p>
<p>Ini paragraph 2.</p>

<button>Klik</button>

</body>
</html>
  • Syntax : $(“ul li:first”)
  • Deskripsi : Memilih elemen <li> pertama dari <ul> pertama
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("ul li:first").hide();
  });
});
</script>
</head>
<body>

<p>List 1:</p>
<ul>
  <li>Kopi</li>
  <li>Susu</li>
  <li>Teh</li>
</ul>

<p>List 2:</p>
<ul>
  <li>Kopi</li>
  <li>Susu</li>
  <li>Teh</li>
</ul>

<button>Klik</button>

</body>
</html>
  • Syntax : $(“ul li:first-child”)
  • Deskripsi : Memilih elemen <li> pertama dari setiap <ul>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("ul li:first-child").hide();
  });
});
</script>
</head>
<body>

<p>List 1:</p>
<ul>
  <li>Kopi</li>
  <li>Susu</li>
  <li>Teh</li>
</ul>

<p>List 2:</p>
<ul>
  <li>Kopi</li>
  <li>Susu</li>
  <li>Teh</li>
</ul>

<button>Klik</button>

</body>
</html>
  • Syntax : $(“[href]”)
  • Deskripsi : Memilih semua elemen dengan atribut href
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("[href]").hide();
  });
});
</script>
</head>
<body>

<h2>Ini heading</h2>

<p>Ini paragraph 1.</p>
<p>Ini paragraph 2.</p>
<p><a href="https://www.DosenIt.com/html/">HTML Tutorial</a></p>
<p><a href="https://www.DosenIT.com/css/">CSS Tutorial</a></p>

<button>Klik</button>

</body>
</html>
  • Syntax : $(“a[target=’_blank’]”)
  • Deskripsi : Memilih semua elemen <a> dengan nilai atribut target yang sama dengan “_blank”
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("a[target='_blank']").hide();
  });
});
</script>
</head>
<body>

<h2>Ini heading</h2>

<p>Ini paragraph 1.</p>
<p>Ini paragraph 2.</p>
<p><a href="https://www.DosenIt.com/html/" target="_blank">HTML Tutorial</a></p>
<p><a href="https://www.DosenIt.com/css/">CSS Tutorial</a></p>

<button>Klik</button>

</body>
</html>
  • Syntax : $(“a[target!=’_blank’]”)
  • Deskripsi : Memilih semua elemen <a> dengan nilai atribut target TIDAK sama dengan “_blank”
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("a[target!='_blank']").hide();
  });
});
</script>
</head>
<body>

<h2>Ini heading</h2>

<p>Ini paragraph 1.</p>
<p>Ini paragraph 2.</p>
<p><a href="https://www.DosenIt.com/html/" target="_blank">HTML Tutorial</a></p>
<p><a href="https://www.DosenIt.com/css/">CSS Tutorial</a></p>

<button>Klik</button>

</body>
</html>
  • Syntax : $(“:button”)
  • Deskripsi : Memilih semua elemen <button> dan elemen <input> type = “button”
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(":button").hide();
  });
});
</script>
</head>
<body>

<h2>Ini heading</h2>

<p>Ini paragraph 1.</p>
<p>Ini paragraph 2.</p>

<button>Klik</button>

</body>
</html>
  • Syntax : $(“tr:even”)
  • Deskripsi : Memilih semua elemen <tr> genap
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("tr:even").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Web Page Saya</h1>

<table border="1">
  <tr>
    <th>Perusahaan</th>
    <th>Negara</th>
  </tr>
  <tr>
    <td>Stark Industries</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Marvel</td>
    <td>Amerika</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
</table>

</body>
</html>
  • Syntax : $(“tr:odd”)
  • Deskripsi : Memilih semua elemen <tr> ganjil
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("tr:odd").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Web Page Saya</h1>

<table border="1">
  <tr>
    <th>Perusahaan</th>
    <th>Negara</th>
  </tr>
  <tr>
    <td>Stark Industries</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Marvel</td>
    <td>Amerika</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
</table>

</body>
</html>

You may also like

Cara Membuat Form Datepicker Bootstrap dan JQuery

List Properti jQuery dan Contoh Lainnya

List Metode Jquery Lainnya

List Metode AJAX JQuery dan Fungsinya

List Metode Traversing Jquery dan Fungsinya

List Metode HTML/CSS Jquery dan Fungsinya

List Metode Efek Jquery

List Selektor jQuery dan Fungsinya

List Metode Event JQuery

jQuery Filtering – Kode dan Contohnya