Selektor pada JQuery

Required skills :

Pemahaman struktur dasar HTML
Pengetahuan dasar JavaScript
Pemahaman dasar JQuery

Selektor pada jQuery memungkinkan kita untuk memilih elemen, satu elemen atau lebih pada DOM.

selektor	keterangan
Nama Tag	Dengan mengetikkan $(“ nama”) maka akan dipilih elemen berdasarkan nama tagnya Misalkan untuk memilih semua elemen <p>, kita dapat mengetikkan $(“p”)
Class tag (.)	Dengan mengetikkan $(“#id_tag”) maka akan dipilih elemen berdasarkan ID tagnya Misalkan untuk memilih semua elemen yang mengandung id foo, kita dapat mengetikkan $(“#foo”)
	Dengan mengetikkan $(“.class_tag”) maka akan dipilih elemen berdasarkan class tagnya Misalkan untuk memilih semua elemen yang mengandung class bar, kita dapat mengetikkan $(“.bar”)
Universal (*)	Memilih semua elemen pada dokumen html
Multi element	Dapat dilakukan dengan menuliskan elemen dan dipisahkan dengan tanda koma (,) Misalkan untuk memilih semua elemen <p> dan <div>, kita dapat mengetikkan $(“p, div”)

Variasi Selektor

Beberapa variasi selektor pada JQuery, selektor dibuat untuk dokomen HTML dibawah

<!-- MAIN DOCUMENT -->

<body>
   <section>
     <input type=”text” value=”isikan namamu”/>
   </section>

   <p class=”foo”>
      Daftar:
      <ul>
         <li class=”ganjil”>list pertama</li>
         <li>list kedua</li>
         <li class=”ganjil”>list ketiga</li>
      </ul>
   </p>

   <p>Selamat datang!</p>
</body>

<!-- MAIN DOCUMENT -->

$("*") --> memilih semua elemen pada dokumen html
$("ul > *") --> memilih semua anak (di dalam) elemen <ul>. Dalam hal ini yang dipilih adalah semua elemen <li>.
$("a[@rel]") --> Memilih semua elemen <a>, yang memiliki atribut rel.
$("input[@name=myname]") --> Memilih semua elemen <input> yang memiliki atribut name dan bernilai myname.
$("li:first") --> Memilih elemen <li> yang pertama di dalam ul.
$("li:last") --> Memilih elemen <li> yang terakhir.
$("li:odd") --> Memilih semua elemen <li> yang memiliki indeks ganjil.
$("li:even") --> Memilih semua elemen <li> yang memiliki indeks genap.
$("body:first-child") --> Memilih anak elemen <body>, yang memiliki indeks yang pertama.
$("body:last-child") --> Memilih anak elemen <body>, yang memiliki indeks yang terakhir.
$("p:empty") --> Memilih semua elemen <p> yang elemennya tidak memiliki anak elemen.

Contoh

contoh
<html>
<head>
<title>judul</title>
   <!-- FILE JQUERY -->
   <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script>


   <!-- SKRIP UTAMA -->
   <script type="text/javascript" language="javascript">
   $(document).ready(function() {
      var paragraf = $("p");
      $(".jumlah_paragraf").html("jumlah paragraf: "+paragraf.length+" paragraf");
      for( i=0; i<paragraf.length; i++ ) {
         alert("Paragraf: " + paragraf[i].innerHTML);
      }
   });
   </script>

</head>
<body>
   <div class="jumlah_paragraf"></div>
   <div>
      <p class="myclass">Paragraf pertama</p>
      <p id="myid">ini paragraf kedua</p>
      <p>ini paragraf ketiga</p>
   </div>
</body>
</html>

le Journal de MVA

Pages

4/25/2014

Selektor pada JQuery

Variasi Selektor

Contoh

No comments:

Post a Comment