Tutorial Jquery - Selector (Part 1)

Jquery - Selector :"Borrowing from CSS 1–3, and then adding its own, jQuery offers a powerful set of tools for matching a set of elements in a document".

Subpart pada Chapter Selector Part 1 ini adalah:

1. DOM
2. Basic Selector
3. Hierarchy Selector
4. Attribute Selector

 DOM

DOM merupakan kependekan dari Document Object Model. DOM adalah platform dan language-natural interface yang memberikan fasilitas suatu program atau skrip untuk dapat memodifikasi konten, struktur, dan style dari suatu dokumen (http://www.w3.org/DOM/). Dalam kasus penggunaan jquery, HTML lah yang akan diakses DOM-nya.

Basic Selector

Selector dalam Jquery merupakan content di dalam $(). Selector Jquery hampir mirip dengan selector CSS. Selector akan berusaha untuk mencari elemen pada DOM HTML sesuai dengan perintah yang ada dalam selector.

Selector           CSS                Jquery

Tag                 p                     $('p')

ID                  #idName         $('#idName')

Class             .className      $('.className')

Selector Hierarchy

Terdapat beberapa selector hierarchy pada jQuery. Selector-selector tersebut bisa dilihat pada contoh script dibawah ini.

$(document).ready(function(){
      $("#parent div").append('spasi ');
      $("#parent > div").append('lebih besar ');
      $("#prev + div").append('plus ');
      $("#prev ~ div").append('cacing ');
});

• $("#parent div").append('spasi ') merupakan hubungan parent dan child. Selector ini tidak dibatasi tingkatan jadi semua div yang memiliki parent #parent akan terselect.

• $("#parent > div").append('lebih besar ') merupakan hubungan parent dan child. Selector ini hanya men-select child tepat dibawah parent. Sehingga hanya div yang bener-benar dibawah id parent yang akan terselect.

• $("#prev + div").append('plus ') merupakan hubungan sibling (saudara). Selector in akan men-select tepat 1 div yang memiliki kakak dengan id #prev.

• $("#prev ~ div").append('cacing ') hapir sama denga selector sebelumnya (+). Bedanya, semua div yang satu parent dengan #prev tetapi sesudah prev akan terselect semuanya.

Contoh lengkap penggunaannya dapat dilihat pada source code ini. Dari contoh dapat terlihat secara rinci perbedaan 4 buah hierarchy selector.

Atribute Selector

Dari dokumentasi Jquery sebenarnya sudah sangat jelas. Dokumentasi bisa dilihat di sini http://api.jquery.com/category/selectors/attribute-selectors/. Beberapa contoh penggunaannya:

$(document).ready(function(){
 $("a[href*='coba']").addClass('contain'); 
 $("a[href^='mailto:']").addClass('mailto');
 $("a[href$='.pdf']").addClass('pdflink'); 
});

• $("a[href*='coba']").addClass('contain') akan men-select semua link a yang hrefnya mengandung 'coba'
• $("a[href^='mailto:']").addClass('mailto') akan men-select semua link a yang hrefnya diawali 'mailto:'
  
• $("a[href$='.pdf']").addClass('pdflink') akan men-select semua link a yang hrefnya diakhiri '.pdf

Contoh lengkap penggunaannya dapat didownload dari sini.