Halaman yang menyediakan link ke Google
DOM (Document Object Modeling) adalah suatu cara untuk memodelkan objekobjek dalam halaman web (dianggap sebagai suatu dokumen). Hal ini dilakukan untuk mempermudah manipulasi dan pengaksesan elemen-elemen dari halaman tersebut. <span> 
, dan
yang merupakan descendant dari elemen dengan id=’container’. 5. Child: untuk memilih elemen F yang merupakan child dari elemen E. Syntax: $(“E>F”) Contoh: $(‘li > ul’) digunakan untuk memilih semua elemen tag
, dan . 7. Semua Element: untuk memilih semua elemen, menggunakan tanda *. Syntax: $(“*”) Contoh: $(‘*’): digunakan untuk memilih semua elemen dalam dokumen/halaman HTML. $(‘p>*’): digunakan untuk memilih semua elemen yang merupakan child dari tag . Selector-selector lainnya 1. :odd dan :even : digunakan untuk memilih elemen yang memiliki index genap maupun ganjil. Syntax: :odd dan :even Contoh: $(“tr:odd”) digunakan untuk memilih elemen yang nilai indexnya ganjil.
Knowledge Sharing Program – jQuery Basic – 18 Desember 2010 @Sekolah Tinggi Teknik Surabaya
8
Contoh pemakaian praktis dari selector ini adalah untuk membuat alternating row suatu table, di mana warna dari baris ganjil dan genap suatu table berbeda. 2. Elemen ke-n : digunakan untuk memilih elemen sesuai dengan index yang diinginkan Syntax: :eq(n) atau :nth(n) Contoh: $(“li:eq(2)”) digunakan untuk memilih elemen
Knowledge Sharing Program – jQuery Basic – 18 Desember 2010 @Sekolah Tinggi Teknik Surabaya
9
Method manipulasi objek DOM -
-
-
Mendapatkan, mengganti, dan menghapus atribut suatu element Selector.attr(atribut) : digunakan untuk mendapatkan value dari suatu atribut dari element yang ditunjuk selector. Selector.attr(atribut, new_value) : digunakan untuk mengubah value dari suatu atribut dari element yang ditunjuk selector, sesuai dengan nilai yang dimasukkan pada parameter new_value. Selector.removeAttr(atribut) : digunakan untuk menghapus suatu atribut dari element tertentu. Mendapatkan dan mengganti nilai Style/CSS dari suatu element Selector.css(property) : digunakan untuk memperoleh nilai dari properti CSS suatu element yang ditunjuk selector. Selector.css(property, new_value) : digunakan untuk mengubah nilai dari properti CSS suatu elemen yang ditunjuk selector, sesuai dengan nilai new_value. Menambahkan dan mengurangi class yang dimiliki oleh suatu element. Selector.addClass(class) : digunakan untuk menambahkan class baru ke dalam elemen yang ditunjuk selector. Selector.removeClass(class) : digunakan untuk menghapus nama class yang tidak diinginkan dari elemen yang ditunjuk selector. Selector.toggleClass(class) : digunakan untuk men-toggle class, di mana sifatnya adalah akan menambahkan class jika elemen yang ditunjuk selector belum memiliki class ini, dan akan menghapus class jika class tersebut sudah dimiliki oleh elemen yang ditunjuk selector.
- Mendapatkan dan mengubah isi HTML dari suatu element. Selector.html() : digunakan untuk mendapatkan isi HTML dari suatu element. Selector.html(html) : digunakan untuk mengubah isi HTML dari suatu element yang ditunjuk selector.
Knowledge Sharing Program – jQuery Basic – 18 Desember 2010 @Sekolah Tinggi Teknik Surabaya
10
- Mendapatkan dan mengubah isi text dari suatu element. Yang dimaksud dengan teks adalah semua tulisan yang diapit dalam tag HTML. Misalkan elemennya adalah New Link , maka yang dimaksud teks adalah ‘New Link’ Selector.text() :Digunakan untuk mendapatkan isi teks dari setiap elemen yang sesuai dengan selector yang digunakan, termasuk descendant-nya. Selector.text(text) : Digunakan untuk mengganti isi teks dari setiap element. Sebagai catatan, method di atas akan mengganti karakter “<” dan “>” dengan “<” dan “>” sehingga penggunaannya harus diperhatikan - Mendapatkan dan mengubah nilai dari element form. Selector.val() : Digunakan untuk mendapatkan value dari suatu element, terutama untuk element form. Selector.val(value) : Digunakan untuk mengganti value dari suatu element, terutama untuk element form. - Beberapa method ini digunakan untuk menambahkan elemen baru ke dalam elemen lainnya. Yang berbeda adalah peletakkan elemen baru tersebut. Prepend dan Append termasuk dalam Inside Insertion, yaitu elemen baru akan ditambahkan di dalam elemen tersebut. Selector.prepend(content) dan Selector.prepend(object) : Digunakan untuk menambahkan elemen (baik berupa teks HTML yang ditulis dalam content ataupun objek lain dalam web yang dipilih dengan selector jQuery) dan diletakkan di bagian paling atas dari element yang ditunjuk selector. Contoh: $(“#divA”).prepend(“”), maka sebuah div baru akan ditambahkan pada bagian paling atas dari divA. $(“#divA”).prepend($(“#divB”)), maka div lain dengan id=divB akan ditambahkan pada bagian paling atas dari divA. Selector.append(content) dan Selector.append(object) : Digunakan untuk menambahkan elemen (baik berupa teks HTML yang ditulis dalam content ataupun objek lain dalam web yang dipilih dengan selector jQuery) dan diletakkan di bagian paling terakhir/bawah dari element yang ditunjuk selector. Contoh:
Knowledge Sharing Program – jQuery Basic – 18 Desember 2010 @Sekolah Tinggi Teknik Surabaya
11
$(“#divA”).append(“”), maka sebuah div baru akan ditambahkan pada bagian paling bawah dari divA. $(“#divA”).append($(“#divB”)), maka div lain dengan id=divB akan ditambahkan pada bagian paling bawah dari divA. Before dan After termasuk dalam Outside Insertion, yaitu elemen baru akan ditambahkan di dalam elemen tersebut. Selector.before(content) dan Selector.before(object) : Digunakan untuk menambahkan elemen (baik berupa teks HTML yang ditulis dalam content ataupun objek lain dalam web yang dipilih dengan selector jQuery) dan diletakkan sebelum/di atas element yang ditunjuk selector. Contoh: $(“#divA”).before(“”), maka sebuah div baru akan ditambahkan sebelum/di atas divA. $(“#divA”).before($(“#divB”)), maka div lain dengan id=divB akan ditambahkan sebelum/di atas divA. Selector.after(content) dan Selector.after(object) : Digunakan untuk menambahkan elemen (baik berupa teks HTML yang ditulis dalam content ataupun objek lain dalam web yang dipilih dengan selector jQuery) dan diletakkan sesudah/di bawah element yang ditunjuk selector. Contoh: $(“#divA”).after(“”), maka sebuah div baru akan ditambahkan sesudah/di bawah divA. $(“#divA”).after($(“#divB”)), maka div lain dengan id=divB akan ditambahkan sesudah/di bawah divA. - Menghapus elemen DOM. Selector.remove() : digunakan untuk menghapus semua elemen yang ditunjuk oleh selector.
Knowledge Sharing Program – jQuery Basic – 18 Desember 2010 @Sekolah Tinggi Teknik Surabaya
12
Event Handler Sama halnya dengan Javascript, jQuery juga dilengkapi dengan event handler. Event handler adalah event yang akan dipanggil (ditrigger) jika terjadi event-event tertentu. Contohnya, event onClick adalah event ketika kita melakukan penekanan mouse click. Jika kita memasangkan fungsi A sebagai handler pada event onClick, maka setiap kali terjadi penekanan mouse click, fungsi A akan dipanggil dan dijalankan. Method yang berkaitan dengan event handler pada jQuery adalah: - .bind(event_type, handler) : digunakan untuk memasangkan suatu fungsi handler terhadap event tertentu. Contoh: misalkan kita memiliki fungsi bernama showMessage(), dan kita ingin setiap terjadi penekanan mouse click pada div dengan ID = ‘myDiv’, fungsi showMessage akan dipanggil, maka kita lakukan binding seperti demikian. $(‘#myDiv’).bind(‘click’,showMessage); Jika kita tidak ingin memanggil fungsi lain, maka kita dapat langsung membuat anonymous function sebagai handler. Contoh: $(‘#myDiv’).bind(‘click’, function(){ alert(‘Hello World’); }); jQuery juga menyediakan short-cut untuk mempersingkat penulisan event handler, yaitu dengan langsung mengetikkan nama eventnya. Misalkan, untuk event mouse click, kita hanya perlu mengetikkan: $(‘#myDiv’).click(showMessage); Perintah di atas sama persis dengan perintah $(‘#myDiv’).bind(‘click’,showMessage); - .unbind() : digunakan untuk menghapus suatu handler dari event tertentu. Yang dihapus adalah event handlernya, bukan fungsi yang dipanggil oleh event tersebut.
Knowledge Sharing Program – jQuery Basic – 18 Desember 2010 @Sekolah Tinggi Teknik Surabaya
13
Contoh: untuk menghapus event handler ‘click’ dari suatu element, kita dapat memberikan perintah Selector.unbind(‘click’); -> untuk event handler dengan anonymous function Selector.unbind(‘click’, showMessage); -> untuk event handler dengan function showMessage() - .one() : merupakan method yang khusus, karena akan memasangkan fungsi handler dengan event tertentu, namun hanya dapat dipanggil sekali saja. Setelah terjadi event, maka event handler akan dihapus/di-unbind. Contoh: Selector.one(‘click’, oneMessage); -> dengan perintah ini, maka pada click pertama yang terjadi pada element sesuai selector, function oneMessage() akan dipanggil. Namun, setelah selesai, maka function akan di-unbind sehingga click-click berikutnya tidak akan memanggil function oneMessage(). - .trigger() : digunakan untuk memicu event handler tertentu secara manual. Contoh: Kita memasangkan handler function validate() pada saat submit form $(‘#myForm’).submit(validate); Namun, jika kita ingin menjalankan submit tersebut bukan hanya dari tombol submit, namun dari penekanan tombol lainnya, maka harus menggunakan trigger seperti berikut. $(‘#elemenLain’).click(function){ $(‘#myForm’).trigger(‘submit’); }); Dengan perintah di atas, maka event handler dari myForm akan dijalankan meskipun form tidak benar-benar mengalami event submit.
Knowledge Sharing Program – jQuery Basic – 18 Desember 2010 @Sekolah Tinggi Teknik Surabaya
14
Effect/Animation jQuery menyediakan beberapa fungsi bawaan siap pakai yang berhubungan dengan efek-efek animasi, seperti slide in, slide out, fade in, dll. Method-method yang dapat digunakan - Selector.show([speed][,callback]) : digunakan untuk menampilkan elemen sesuai selector, dari yang semula hidden/invisible menjadi visible. Parameter speed dapat diisi dengan kecepatan animasi dalam milisecond (misalkan diisi 100,200 dsb). Namun, jQuery juga menyediakan 3 jenis speed, yaitu fast (200 ms), normal (400 ms), dan slow (600ms). Jika parameter speed ini tidak diisi, maka kecepatan normal yang digunakan. Callback function adalah fungsi yang akan dijalankan setelah suatu method (dalam hal ini adalah .show() ) selesai dijalankan. - Selector.hidden([speed][,callback]): digunakan untuk menampilkan elemen sesuai selector, dari yang semula visible menjadi hidden/invisible. - Selector.toggle([speed][,callback]) : digunakan untuk men-toggle status visible/hidden dari elemen sesuai selector. Jika elemen visible, maka akan menjadi hidden. Sebaliknya, jika elemen hidden, maka akan dimunculkan/visible. - Selector.slideDown([speed][,callback]) : digunakan untuk menampilkan animasi slideDown (dari elemen yang tertutup menjadi terbuka dengan animasi slide down) pada elemen yang ditunjuk selector. - Selector.slideUp([speed][,callback]) : digunakan untuk menampilkan animasi slideUp (dari elemen yang terbuka menjadi tertutup dengan animasi slide up) pada elemen yang ditunjuk selector. - Selector.slideToggle([speed][,callback]) : digunakan untuk men-toggle slideUp dan slideDown. - Selector.fadeIn([speed][,callback]) : digunakan untuk menampilkan animasi fade in pada elemen yang ditunjuk selector. Knowledge Sharing Program – jQuery Basic – 18 Desember 2010 @Sekolah Tinggi Teknik Surabaya
15
- Selector.fadeOut([speed][,callback]) : digunakan untuk menampilkan animasi fade out pada elemen yang ditunjuk selector. - Selector.fadeTo(speed,opacity[,callback]) : digunakan untuk menampilkan animasi fade sesuai dengan opacity dan speed yang diinginkan user. Opacity yang dimasukkan bernilai antara 0 – 1.
Knowledge Sharing Program – jQuery Basic – 18 Desember 2010 @Sekolah Tinggi Teknik Surabaya
16
AJAX Berikut merupakan method-method yang digunakan untuk menangani AJAX via jQuery. - Selector.load(url [,data][,success]) : digunakan untuk me-load data yang diterima dari server dan meletakkan hasil HTML yang diperoleh pada elemen yang ditunjuk oleh selector. Parameter url diisi dengan alamat yang dikirimi request. Parameter data dapat diisi dengan data-data yang akan disertakan dengan request. Parameter success dapat diisi dengan function yang akan dijalankan jika request berhasil dijalankan. Request yang dijalankan secara default akan dikirimkan dengan metode ‘GET’, namun apabila terdapat data yang juga dikirimkan, maka request akan dikirimkan dengan metode ‘POST’. Contoh: o Siapkan dua halaman html, index.html dan content.html. o Content.html diisi dengan teks sembarang di dalam tag o Kita akan meload halaman content.html dari index.html dengan cara $(“#div1”).load(‘content.html’); Isi content.html akan diload ke dalam isi div1. - $.get(url [,data][,success]): digunakan untuk melakukan request AJAX dengan metode ‘GET’ terhadap url yang dituju. Contoh, kita akan melakukan sebuah request sederhana seperti demikian $.get("test.php", {username : us, password: ps}, function(data){ alert("Data Loaded: " + data); $("#result").html(data); });
Knowledge Sharing Program – jQuery Basic – 18 Desember 2010 @Sekolah Tinggi Teknik Surabaya
17
Dari perintah di atas, kita melakukan AJAX request terhadap test.php dan mengirimkan dua data dengan nama variabel ‘username’ dan ‘password’. Nama variable ini nantinya akan diakses dari PHP dengan $_GET[‘username’] dan $_GET[‘password’]. *perhatikan bahwa nama variable yang ditulis dalam jQuery akan digunakan untuk mengakses isi variable itu dalam PHP* Pada function callback, kita dapat menangkap parameter pertama yang berisi response dari server yang diperoleh. Dalam kasus di atas, hasil kembalian dari server ditampung dalam variable bernama data dan akan ditampilkan dalam div dengan id “result”. Isi file PHP yang berhubungan dengan contoh ini. "; echo "Password : " . $password; ?>
- $.post(url [,data][,success]): digunakan untuk melakukan request AJAX dengan metode ‘POST’ terhadap url yang dituju. Cara penggunaan sama persis dengan $.get(), hanya perlu mengganti kata ‘get’ dengan ‘post’.
Knowledge Sharing Program – jQuery Basic – 18 Desember 2010 @Sekolah Tinggi Teknik Surabaya
Sign In
Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close