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

(1)

1

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

(2)

2

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 <!DOCTYPE html> <html> <head> <title>JQuery</title> </head> <body>

<h1 id="title-article">Latihan JQuery Bagian 4</h1> <em class="author">Oleh : Loka Dwiartara</em>

<p>Saat ini kita akan memulai mempelajari lebih dalam JQuery Library</p> <button>Klik Saya</button>

</body> </html>

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

<!DOCTYPE html> <html>

<head>

<title>JQuery</title>

(3)

3 });

</script> </head>

<body>

</body> </html>

Nah, untuk penggunaan jquery selector, contohnya adalah seperti ini

<head>

</body> </html>

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

(4)

4 });

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'.

<head>

$(function(){

(5)

5 $("p").hide(); }); }); </script> </head> <body>

</body> </html>

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 :

<head>

(6)

6 <h1 id="title-article">Latihan JQuery Bagian 4</h1>

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

</body> </html>

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 :

<head>

(7)

7 <body>

</body> </html>

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 <p> pada _{halaman HTML}

el1,el2,el3 $("h1,div,p")

Selector hanya untuk elemen <h1>, <div> dan <p> pada halaman html (bisa

menggunakan koma untuk memilih banyak elemen)

:first $("p:first") Elemen pertama <p> _(paragraph)

(8)

8 :even $("tr:even")

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

:odd $("tr:odd") Semua elemen <tr> yang _{beruturan ganjil}

:first-child $("p:first-child")

Semua elemen <p> yang merupakan anak pertama / paragraf awal dari setiap orang tuanya (misalkan orangtuanya adalah div)

:first-of-type $("p:first-of-type") Sama dengan atas

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

Semua elemen <p> yang merupakan anak terakhir / paragraf akhir dari setiap orang tuanya (misalkan orangtuanya adalah div)

:last-of-type $("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 <p> yang merupakan anak urutan ke dua dari orang tuanya

:nth-last-child(n) $("p:nth-last-child(2)") Semua elemen <p> 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 <p> yang yang merupakan anak urutan ke dua dari belakang dari orang tuanya

(9)

9 :only-child $("p:only-child")

Semua elemen <p> yang orang tuanya hanya memiliki satu anak, yakni <p> saja. Contoh div yang punya satu anak p saja.

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

Semua elemen <p> yang merupakan anak tunggal dari orang tuanya. Sebagai contoh div yang hanya memiliki satu paragraph

parent > child $("div > p") Semua elemen <p> yang merupakan anak langsung dari elemen <div>

parent descendant $("div p") Semua elemen <p> yang orang _{tuanya adalah elemen <div>}

element + next $("div + p") Elemen p yang disebelahnya itu _me

element ~ siblings $("div ~ p") Semua elemen <p> yang merupakan siblings (saudara kandung) dari elemen <div>

: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

(10)

10 <h7>

: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 <p> 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 <p> 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"

(11)

11 atau tidak mengandung

"default.htm"

[attribute$=value] $("[href$='.jpg']") Semua elemen yang atribut hrefnya di akhiri dengan kata ".jpg"

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

Semua elemen yang atribut title-nya 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"}

(12)

12 :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