TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif www.ilmuwebsite.com

Bagian 4. Menggunakan Selector JQuery

1

Bagian 4. Menggunakan Selector JQuery Jquery selector memungkinkan seorang web designer untuk dapat menyeleksi dan memanipulasi elemen HTML. Jquery selector itu biasanya digunakan untuk mencari atau menyeleksi elemen-elemen HTML yang sudah anda definisikan, misalkan mencari id elementya, class-nya, type-nya, attributes, dan banyak lagi. Yang jelas Anda bisa mengkostumisasi proses pencarian dan manipulasi elemen HTML ini. Semua selector dalam jquery di awalin dengan tanda ini $( ) Sebagai contohnya saya sudah mempersiapkan sebuah dokumen HTML bagian ke 4

Latihan JQuery Bagian 4

<em class="author">Oleh : Loka Dwiartara

Saat ini kita akan memulai mempelajari lebih dalam JQuery Library

Klik Saya

Setelah itu saya meload (memasukkan) javascript library ke dalam halaman HTML, dan mempersiapkannya untuk bisa langsung digunakan

<script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function(){

2

});

Latihan JQuery Bagian 4

<em class="author">Oleh : Loka Dwiartara

Saat ini kita akan memulai mempelajari lebih dalam JQuery Library

Klik Saya

Nah, untuk penggunaan jquery selector, contohnya adalah seperti ini

<script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function(){ $("button").click(function(){ $("p").hide(); }); });

Latihan JQuery Bagian 4

<em class="author">Oleh : Loka Dwiartara

Saat ini kita akan memulai mempelajari lebih dalam JQuery Library

Klik Saya

Dalam jquerynya terdapat $("button").click(function(){ $("p").hide();

3

}); Kita lihat dalam script htmlnya terdapat sebuah button dengan text Klik saya. Dan juga terdapat paragraf "saat ini .... " . Ketika script di bawah ini $("button").click(function(){ $("p").hide(); });

Digunakan, maka jika buttonn-ya di klik, maka paragrafnya akan disembunyikan (hide). Sederhananya seperti itu. Yang dikatakan selector adalah $("button") –nya dan $("p"). Dua-duanya menggunakan selector jenis tag selector. Karena menggunakan nama elemen HTML nya langsung yakni button dan p. Mengapa dikatakan selector? Karena selector itu digunakan untuk menyeleksi elemen html apa yang akan dikenai suatu penderitaan. Bagian button di sini penderitaannya adalah mendapatkan perlakuan mouse yakni jika diklik, dan bagian p (paragraph) adalah disembunyikan. Dan p atau paragraph akan disembunyikan jika buttonnya di klik. Kurang lebih seperti itu.

Menggunakan Selector #id Pada JQUERY Setelah sebelumnya mempelajari contoh penggunaan selector pada Jquery, kali ini kita akan belajar lagi menggunakan Selector ID pada jquery. Selector #id pada jquery itu menggunakan atribut ID yang berada pada elemen HTML. Sebagai contohnya pada dokumen HTML sebelumnya kita telah mempersiapkan elemen H1 dengan Atribut ID nya adalah 'title-article'.

<script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function(){ $("button").click(function(){

4

$("p").hide(); });

});

Latihan JQuery Bagian 4

<em class="author">Oleh : Loka Dwiartara

Saat ini kita akan memulai mempelajari lebih dalam JQuery Library

Klik Saya

Maka bagaimana menggunakan Jquery selectornya, ketika button di klik maka si H1 dengan atribut 'title-article' ini ikut-ikutan di sembunyikan. Caranya adalah dengan menggunakan selector ID. H1 memiliki atribut ID nya adalah "title-article" maka penggunaan selectornya adalah

$("#title-article")

Contoh penggunaannya adalah seperti ini :

<script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function(){ $("button").click(function(){ $("p").hide(); $("#title-article").hide(); }); });

5

Latihan JQuery Bagian 4

<em class="author">Oleh : Loka Dwiartara

Saat ini kita akan memulai mempelajari lebih dalam JQuery Library

Klik Saya

Menggunakan Selector .class Pada JQUERY Jika selector #ID pada Jquery itu menggunakan atribut ID yang ada pada sebuah elemen HTML maka selector .class pun menggunakan atribut Class yang ada pada sebuah elemen HTML juga. Sebagai contohnya kita telah mempersiapkan elemen EM dengan CLASS-nya adalah "author". Selector .class pada jquery di wakili dengan tanda

$(".author")

Contoh lengkap penggunaannya adalah sebagai berikut :

<script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function(){ $("button").click(function(){ $("p").hide(); $("#title-article").hide(); $(".author").hide(); }); });

6

Latihan JQuery Bagian 4

<em class="author">Oleh : Loka Dwiartara

Saat ini kita akan memulai mempelajari lebih dalam JQuery Library

Klik Saya

Berikut adalah daftar lengkap selector Jquery yang bisa Anda gunakan : Selector

Example

Selects

*

$("*")

Selector untuk semua elemen pada halaman HTML

#id

$("#lastname")

Selector untuk elemen yang memiliki atribut id="lastname"

.class

$(".intro")

All elements with class="intro"

.class,.class

$(".intro,.demo")

Selector untuk elemen yang memiliki class "intro" ataupun "demo"

element

$("p")

Semua elemen

pada halaman HTML

el1,el2,el3

$("h1,div,p")

Selector hanya untuk elemen

,

dan

pada halaman html (bisa menggunakan koma untuk memilih banyak elemen)

:first

$("p:first")

Elemen pertama

(paragraph)

:last

$("p:last")

Elemen terakhir

(paragraph)

7

:even

$("tr:even")

Semua elemen yang berurutan genap. Biasanya dalam table terdapat banyak tr. Maka setiap tr itu memiliki urutan ganjil atau genap.

:odd

$("tr:odd")

Semua elemen yang beruturan ganjil

:first-child

$("p:first-child")

Semua elemen

yang merupakan anak pertama / paragraf awal dari setiap orang tuanya (misalkan orangtuanya adalah div)

:first-of-type

$("p:first-of-type")

Sama dengan atas

$("p:last-child")

Semua elemen

yang merupakan anak terakhir / paragraf akhir dari setiap orang tuanya (misalkan orangtuanya adalah div)

$("p:last-of-type")

Semua elemen p yang terakhir dari orang tuanya. Misalkan semua p yang terakhir anak dari div.

:nth-child(n)

$("p:nth-child(2)")

Semua elemen

yang merupakan anak urutan ke dua dari orang tuanya

:nth-last-child(n)

$("p:nth-last-child(2)")

Semua elemen

yang yang merupakan anak urutan ke dua dari belakang dari orang tuanya

:nth-of-type(n)

$("p:nth-of-type(2)")

Semua elemen p yang merupakan anak ke 2 dari orang tuanya

:nth-last-of-type(n)

$("p:nth-last-of-type(2)")

Semua elemen

yang yang merupakan anak urutan ke dua dari belakang dari orang tuanya

:last-child

:last-of-type

8

$("p:only-child")

Semua elemen

yang orang tuanya hanya memiliki satu anak, yakni

saja. Contoh div yang punya satu anak p saja.

$("p:only-of-type")

Semua elemen

yang merupakan anak tunggal dari orang tuanya. Sebagai contoh div yang hanya memiliki satu paragraph

parent > child

$("div > p")

Semua elemen

yang merupakan anak langsung dari elemen

parent descendant

$("div p")

Semua elemen

yang orang tuanya adalah elemen

element + next

$("div + p")

Elemen p yang disebelahnya itu me

element ~ siblings

$("div ~ p")

Semua elemen

yang merupakan siblings (saudara kandung) dari elemen

:eq(index)

$("ul li:eq(3)")

Elemen list urutan ke 4 karena (index elemen list di mulai dari angka 0)

:gt(no)

$("ul li:gt(3)")

Element list yang memiliki index (urutan) lebih dari tiga

:lt(no)

$("ul li:lt(3)")

Element list yang memiliki index (urutan) kurang dari 3

:not(selector)

$("input:not(:empty)")

Semua elemen input yang tidak kosong

:header

$(":header")

Semua elemen header HTML

,

,

,

,

,

:only-child

:only-of-type

9

:animated

$(":animated")

Semua elemen yang animated

:focus

$(":focus")

Elemen yang saat ini sedang di gunakan (focus)

:contains(text)

$(":contains('Hello')")

Semua elemen yang di dalamnya itu terdapat mengandung kata 'Hello'

:has(selector)

$("div:has(p)")

Semua elemen div yang memiliki tag p di dalamnya

:empty

$(":empty")

Semua elemen yang kosong isinya, tidak ada teks didalamnya atau tidak memiliki nilai sama sekali

:parent

$(":parent")

Semua elemen yang merupakan orang tua dari suatu elemen

:hidden

$("p:hidden")

Semua elemen

yang tidak tampil atau disembunyikan

:visible

$("table:visible")

Semua table yang ditampilkan

:root

$(":root")

Semua element root pada dokumen html, root di sini adalah orang tua tertinggi

:lang(language)

$("p:lang(de)")

Semua elemen

yang atribut lang -nya memiliki nilai dimulai dengan kata "de"

[attribute]

$("[href]")

Semua elemen yang memiliki atribut href

[attribute=value]

$("[href='default.htm']")

All elements with a href attribute value equal to "default.htm"

[attribute!=value]

$("[href!='default.htm']")

Semua elemen yang atribut hrefnya itu tidak sama dengan

10

atau tidak mengandung "default.htm" $("[href$='.jpg']")

Semua elemen yang atribut hrefnya di akhiri dengan kata ".jpg"

[attribute|=value]

$("[title|='Tomorrow']")

Semua elemen yang atribut titlenya sama dengan 'Tomorrow', atau dimulai dengan kata 'Tomorrow' di ikuti dengan tanda penghubung

[attribute^=value]

$("[title^='Tom']")

Semua elemen yang atribut titlenya "Tom"

[attribute~=value]

$("[title~='hello']")

Semua elemen yang atribut titlenya mengandung kata "hello"

[attribute*=value]

$("[title*='hello']")

Semua elemen yang atribut titlenya mengandung kata "hello"

:input

$(":input")

Semua elemen input yang memiliki

:text

$(":text")

Semua elemen input yang memiliki type="text"

:password

$(":password")

Semua elemen input yang memiliki type="password"

:radio

$(":radio")

Semua elemen input yang memiliki type="radio"

:checkbox

$(":checkbox")

Semua elemen input yang memiliki type="checkbox"

:submit

$(":submit")

Semua elemen input yang memiliki type="submit"

:reset

$(":reset")

Semua elemen input yang memiliki type="reset"

[attribute$=value]

11

:button

$(":button")

Semua elemen input yang memiliki type="button"

:image

$(":image")

Semua elemen input yang memiliki type="image"

:file

$(":file")

Semua elemen input yang memiliki type="file"

:enabled

$(":enabled")

Semua elemen input yang kondisinya adalah enabled

:disabled

$(":disabled")

Semua elemen input yang kondisinya adalah disabled

:selected

$(":selected")

Semua element input yang diselect

:checked

$(":checked")

Semua elemen input checkbox yang telah di ceklis

12