Beranda
  • Beranda
  • Kursus Programming
  • Karir
  • Layanan Kami
    • IT Outsourcing
    • Jasa Pembuatan Software
    • Jasa Programmer
    • Jasa Pembuatan Website
      • Jasa Pembuatan Website Toko Online
      • Jasa Pembuatan Website Company Profile
      • Jasa Pembuatan Website Rental Mobil
      • Jasa Pembuatan Website Pribadi
      • Jasa Pembuatan Website Marketplace
  • Tutorial IT
    • Tutorial HTML
    • Tutorial JavaScript
    • Tutorial JQuery
    • Tutorial SQL
    • Tutorial Java
    • Tutorial CSS
    • Tutorial Dart
    • Tutorial PHP
    • Tutorial Flutter
  • Blog

Tutorial JQuery

  • Tutorial Belajar jQuery
  • Cara Download jQuery
  • Apa Itu jQuery
  • Mengenal Selector
  • Menangkap Event
  • Fungsi Hide Dan Show
  • Mengambil Elemen Dan Konten
  • Mengisi Elemen Dan Konten
  • Menambah Elemen Dan Konten
  • Menghapus Elemen Dan Konten
  • Mengenal Traversing
  • Mencari Elemen Induk
  • Mencari Elemen Anak
  • Mencari Elemen Sejajar
  • Memfilter Elemen
  • Belajar Ajax JQuery
  • Beranda
  • Tutorial
  • Mengenal Selector

Mengenal Selector

Daftar Isi
  • Selector Tag
  • Selector Id
  • Selector class
  • Daftar Selector jQuery
  • jQuery Pada File Terpisah

Selector adalah bagian penting pada perintah jQuery. Selector adalah perintah untuk mencari atau memilih elemen HTML. Dari hasil perintah selector kita akan mendapatkan akses kepada elemen HTML tersebut. Kita juga dapat melakukan suatu aksi (action) kepada elemen HTML tersebut.

Selector dapat memilih elemen HTML berdasarkan atribut name, id, class, tipe elemen atau nama tag atribut, nilai dari atribut dan lain sebagainya. Perintah selector dimulai dengan penulisan $().

Referensi Selector Lengkap

Selector Tag #

Selector tag mencari elemen HTML berdasarkan jenis atau nama tag. Contoh di bawah ini mencari semua tag p (elemen paragraf).

$("p")

Contoh di bawah ini memperlihatkan ketika suatu tombol diklik maka semua tag p akan hilang.

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

Selector Id #

Selector id mencari elemen HTML berdasarkan nilai atribut id. Contoh di bawah ini mencari tag dengan atribut id bernilai test.

$("#test")

Karena nilai atribut id adalah unik untuk setiap elemen atau tag maka selector id hanya akan dapat mencari satu elemen saja.

Contoh di bawah ini memperlihatkan ketika suatu tombol diklik maka tag dengan atribut id bernilai test akan hilang.

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

Selector class #

Selector id mencari elemen HTML berdasarkan nilai atribut class. Contoh di bawah ini mencari tag dengan atribut class bernilai test.

$(".test")

Contoh di bawah ini memperlihatkan ketika suatu tombol diklik maka tag dengan atribut class bernilai test akan hilang.

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

Daftar Selector jQuery #

Di bawah ini selector-selector lain yang bisa dipakai pada jQuery beserta contoh pemakaiannya.

Sintak Penjelasan Contoh Pemakaian
$(“*”) Memilih semua elemen
$(this) Memilih elemen yang sekarang sedang diakses
$(“p.intro”) Memilih semua elemen paragraf (tag p) dengan atribut class=”intro”
$(“p:first”) Memilih elemen paragraf (tag p) pertama
$(“ul li:first”) Memilih elemen li pertama di dalam elemen ul pertama
$(“ul li:first-child”) Memilih elemen li pertama di dalam setiap elemen ul
$(“[href]”) Memilih semua elemen yang mempunyai atribut href
$(“a[target=’_blank’]”) Memilih semua elemen a dengan atribut target bernilai sama dengan _blank
$(“a[target!=’_blank’]”) Memilih semua elemen a dengan atribut target bernilai tidak sama dengan _blank
$(“:button”) Memilih semua elemen button dan semua input dengan atribut type bernilai button

Daftar Selector jQuery Lainnya

jQuery Pada File Terpisah #

Apabila dalam proses pengembangan web terdapat banyak sekali perintah jQuery yang harus dibuat maka sebaiknya perintah-perintah tersebut dimasukkan kedalam file terpisah. File jQuery sama seperti file JavaScript yaitu memakai ekstensi js. Kita kemudian bisa memasukkan url atau tautan file terpisah tersebut di dalam tag script di dalam tag head.

<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>
What are your Feelings
Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Apa Itu jQueryMenangkap Event

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Daftar Isi
  • Selector Tag
  • Selector Id
  • Selector class
  • Daftar Selector jQuery
  • jQuery Pada File Terpisah

Marketing Office

Epicentrum Walk Office Suite 529A, Jl. HR. Rasuna Said, Jakarta Selatan 12940

Workshop

Nextgen Training Center, Jl. Raya Tanah Baru no 3, Pancoran Mas, Depok

Email

sales@nextgen.co.id

@2020 PT Nextgen Inovasi Indonesia

PT. Nextgen Inovasi Indonesia

PT Nextgen Inovasi Indonesia adalah perusahaan IT yang didirikan pada tahun 2015. Lini bisnis kami adalah inovasi dalam cara belajar teknologi informasi dengan cepat dan efisien.