Memilih Elemen dengan jQuery

Halo,

jQuery menggunakan sintaks XPath untuk memilih elemen DOM.

Jadi, jika Anda menggunakan CSS atau pernah menggunakan XPath untuk memilih node dalam XML, Anda sudah mengetahui cara memilih elemen dengan jQuery!

Mari kita gunakan bersama jQuery 🚀

Elemen dalam class yang diinginkan dipilih menggunakan operator titik(.).

Pada contoh di bawah, semua elemen yang memiliki class title akan dipilih dan warnanya diubah. 

<p class="title">Hello</p>
<p class="title">CoddyKit</p>
<p class="title">Learning</p>
<p class="title">jQuery</p>

<script>
$('.title').css('color','pink')
</script>

kita akan memperkenalkan metode css() pada pelajaran berikutnya. 

Untuk saat ini, cukup ketahui bahwa metode css() digunakan untuk menentukan gaya elemen

Elemen dengan id yang diinginkan dapat dipilih menggunakan operator #(tanda pagar). Seperti yang kita ketahui, tnilai id yang sama hanya dapat diberikan kepada satu elemen pada halaman HTML.

Pada contoh di bawah, elemen yang memiliki id title akan dipilih dan warnanya diubah.

<p id="title">Hello</p>
<p id="title1">CoddyKit</p>
<p id="title2">Learning</p>
<p id="title3">jQuery</p>

<script>
$('#title').css('color','pink')
</script>

Elemen dengan tag yang diinginkan dapat dipilih hanya dengan menggunakan nama tag tersebut

Pada contoh di bawah, elemen yang memiliki tag span akan dipilih dan warnanya diubah.

<p>Hello</p>
<span>Hello</span>
<span>CoddyKit</span>

<script>
$('span').css('color','pink')
</script>

Pemilih Child

Jika kita ingin memilih children dari sebuah elemen, kita menggunakan operator lebih besar dari(>).

Pada contoh di bawah, semua children dari elemen yang diinginkan akan dipilih.

<p>
  <span>Hello</span>
  <span>CoddyKit</span>
</p>

<script>
$('p>span').css('color','pink')
</script>

Kita dapat memilih elemen yang diinginkan dengan memeriksa apakah attribute suatu elemen memiliki nilai.

Pada contoh di bawah, elemen yang memiliki tag <a> dan attribute target dengan nilai _blank akan dipilih.

<a target="_blank" 
     href="http://coddykit.com">
   CoddyKit
 </a>

<script>
$ ('a[target = "_blank"]').css('color','pink')
</script>

jQuery mempermudah pemilihan elemen dalam DOM dengan menyediakan beberapa metode serta pemilih XPath.

Mari kita pelajari.

Metode parent()

Kita dapat memilih parent dari elemen yang diinginkan menggunakan metode parent() yang disediakan oleh jQuery.

Pada contoh di bawah, parent elemen dipilih dan warna teks elemen parent diubah.

<div>
Parent Element Text
<a target="_blank"  href="http://coddykit.com">
   CoddyKit
 </a>
</div>

<script>
$ ('a').parent().css('color','pink')
</script>

Metode children()

Kita dapat memilih semua children dari elemen yang diinginkan menggunakan metode children() yang disediakan oleh jQuery.

Pada contoh di bawah, semua children elemen dipilih dan warna teks children tersebut diubah.

<div>
<a target="_blank"  href="http://coddykit.com">
   CoddyKit
 </a>
<span>Children Element Text</span>
</div>

<script>
$ ('div').children().css('color','pink')
</script>

Metode parents()

Kita dapat memilih elemen leluhur dari elemen yang diinginkan menggunakan metode parents() yang disediakan oleh jQuery.

Pada contoh di bawah, leluhur elemen dipilih dan warna teks elemen parent diubah.

Perbedaan metode ini dari metode lain yang telah kita pelajari adalah metode ini dapat memiliki parameter.

Jadi, kita mengirim pemilih XPath sebagai parameter untuk menentukan leluhur yang akan dipilih.

<div class="wrapper">
Hello
<p>
<span>CoddyKit</span>
<p>
</div>

<script>
$ ('span').parents('.wrapper').css('color','pink')
</script>

Metode next()

Metode next() memilih sibling berikutnya dari elemen yang diinginkan.

Pada contoh di bawah, sibling pertama setelah elemen dengan tag a akan dipilih.

<a href="http://coddykit.com">CoddyKit</a>
<span>I am first sibling of a element</span>

<script>
$ ('a').next().css('color','pink')
</script>

Metode nextAll()

Metode nextAll() digunakan untuk memilih sibling berikutnya dari elemen yang diinginkan.

Pada contoh di bawah, semua sibling setelah elemen dengan tag div akan dipilih.

<span>I'm previous sibling<span>
<div></div>
<span>I'm next sibling<span>
<span>I'm next sibling too<span>


<script>
$ ('div').nextAll().css('color','pink')
</script>

Metode siblings()

Anda dapat memilih semua sibling dari elemen yang diinginkan menggunakan metode siblings().

Pada contoh di bawah, semua sibling elemen dengan tag p akan dipilih.

<p>Hello</p>
<div>jQuery</div>
<div>Methods</div>

<script>
$ ('p'). siblings().css('color','pink')
</script>

Metode prev()

Metode prev() digunakan untuk memilih sibling sebelumnya dari sebuah elemen.

Memilih sibling pertama sebelum elemen dengan tag a.

<span>Hello Coddy</span>
<div class="test"></div>

<script>
$ ('.test').prev().css('color','pink')
</script>

Metode prevAll()

Metode prevAll() digunakan untuk memilih sibling sebelumnya dari elemen yang diinginkan.

Pada contoh di bawah, semua sibling sebelum elemen dengan tag div akan dipilih.

<span>I'm previous sibling</span>
<span>I'm previous sibling too</span>
<div></div>
<span>I'm next sibling</span>

<script>
$('div').prevAll().css('color','pink')
</script>

Selamat 🎉

Bagian ini mengajarkan kita memilih elemen DOM.

Di bagian berikutnya, kita akan melanjutkan mempelajari manipulasi DOM.