Mengenal selector .has() Pada Jquery Dan Cara Menggunakannya

by | Apr 21, 2017 | Javascript | 0 comments

jquery adalah salah satu library dari javascript yang dimana dengan menggunakan library jquery ini kita dapat membuat animasi yang tidak bisa kita buat dengan menggunakan css dikarenakan keterbatesan efek dari css, dan didalam jquery terdapat banyak sekali selector yang dapat kita gunakan untuk membantu kita membuat animasi dengan menggunakan jquery ini, dan pada tutorial kali ini kita akan belajar tentang mengenal selector .has() pada jquery dan cara menggunakannya.

Fungsi dari selector .has() didalam jquery adalah  untuk memilih elemen html yang memiliki indikator yang telah ditentukan sebenarnya hampir sama dengan pemanggilan selector pada jquery pada umumnya hanya saja berbeda sedikit penulisannya, untuk lebih jelasnya kita langsung saja praktekan, pertama silahkan teman-teman buat sebuah file html dan ketikan script berikut ini.

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>has demo</title>
  <style>
  .test {
    border: 3px inset red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
 
<div><p>Selamat pagi juara</p></div>
<div>Terbaik dan nomor satu</div>
 
<script>
$( "div:has(p)" ).addClass( "test" );
</script>
 
</body>
</html>

saya akan menjelaskan sedikit script diatas, pertama saya memanggil core dari jquery yang saya ambil dari jquery.com, mengapa harus memanggil corenya, karena script yang kita buat tidak akan berjalan jika file core dari jquery tidak kita sisipka, setelah itu saya membuat pengaturan css untuk class test seperti ini

  <style>
  .test {
    border: 3px inset red;
  }
  </style>

dan saya membuat pengaturan selector dengan menggunakan .has() selector, dimana saya memanggil div yang mempunyai element p didalamnya lalu saya menambuahkan fungsi addclass yang berfungsi  untuk menambahkan class test yang tadi sudah kita atur cssnya, scriptnya seperti ini :

<script>
$( "div:has(p)" ).addClass( "test" );
</script>

Jika teman-teman save maka hasilnya akan seperti berikut ini :

mengenal selector .has() pada jquery hasil

Element div yang mempunyai indikator p  akan memiliki style class test yang kita telah berikan atau atur sebelumnya,

Gimana teman-teman? cukup mudah bukan? saya rasa untuk tutorial kali ini tentang mengenal selector .has() pada jquery cukup sampai sini dulu, semoga tutorial kali ini bermanfaat untuk teman-teman semuanya, sampai bertemu lagi pada tutorial berikutnya.

Terimakasih