D. Sinaga, M.Kom - Kombinasi DOM Jquery PHP Ajax 2
Jquery
D. Sinaga, M.Kom
Universitas Dian Nuswantoro
Apa itu jQuery ?
jQuery adalah pustaka / library javascript sangat
ringkas dan sederhana untuk memanipulasi
komponen di dokumen HTML.
jQuery memiliki kemampuan menyederhanakan
(mengabstraksi) banyak hal kompleks pada javascript
seperti :
◦
◦
◦
◦
◦
◦
adaptasi pada cross browser environment.
penanganan event.
penggunaan AJAX.
manipulasi dan navigasi element halaman HTML.
efek animasi.
free dan open source.
Sejarah Jquery
Jquery Pertama kali dikembangkan oleh Jhon Resig
pertama kali pada tahun 2005, saat itu dia terinspirasi
dari kode Behavior, ketika itu Jhon merasa kode kode
behavior tidak elegan dan bahkan sangat jelek.
dia mulai memikirkan cara membuat library yang
handal dan ringan untuk javascript , dan lahirlah
JQUERY pada 14 januari 2006, direlease lah versi
pertama dari Jquery dan sampai sekarang masih terus
dikembangkan dan disempurnakan.
jQuery mempunyai semboyan “write less, do more”
Keunggulan Jquery
JQuery merupakan library JavaScript terhandal saat
ini. Faktanya, banyak perusahaan besar tingkat
dunia menggunakan jQuery dengan teknologi
Website mereka. Bahkan website-website lokal
pun tidak mau ketinggalan.
JQuery berhasil menyederhanakan fungsi-fungsi
JavaScript dan Ajax yang rumit, sehingga hanya
dengan beberapa baris kode, kita bisa membuat
website dengan tingkat interaktivitas yang tinggi
(responsif), bahkan membuat animasi yang
canggih tanpa memerlukan instalisasi plugin flash
pada browser.
Sebenarnya penggunaan JQuery sangatlah
mudah, karena tanpa harus dibekali
penguasaan pemograman JavaScript
sekalipun, karena semuanya sudah
dibungkus dalam bentuk library dan plugin,
Intinya kita hanya perlu tahu cara
menerapkan dalam website kita.
Kompatibel/cocok dengan semua browser
yang populer, seperti Mozzila, Internet
Explorer, safari, Chrome, dan Opera.
Kompetible dengan semua versi CSS (CSS 1 sampai
dengan CSS 3)
Dokumentasi, tutorial dan contoh-contohnya
lengkap , silahkan kunjungi website resminya di
http://jquery.com/
Didukung oleh komunitas yang besar dan aktif,
seperti forum, milis, Bliog, social engering (twitter
dan facebook), website dan tutorial.
Ketersediaan plugin yang sangat banyak
jumlahnya.
Plugin merupakan kemampuan tambahan yang bisa
disertakan pada jQuery.
File nya hanya satu dan ukuran nya pun
kecil, hanya sekitar 20 KB, sehingga cepat
aksesnya.
Open source/free (gratis) dengan lisensi dari
GNU General Public License dan MTT
License.
JQuery lebih banyak di gunakan oleh para
developer web dibandingkan Javascript
Library Lainnya.
Event-event dasar dalam
Jquery
Syntax dalam JQuery ada berbagai macam
dan dibuat untuk menyeleksi elemen - elemen
HTML dan menciptakan aksi / event pada satu
atau beberapa halaman website agar tampilan
website menjadi interaktif dan dinamis.
Penulisan Syantax JQuery.
Sintaks jquery biasanya dibuat untuk memilih
elemen-elemen HTML dan melakukan aksi
terhadap elemen yang dipilih.
Sintaks :$(selector).action()
Penulisan Sintaks
Sintaks jquery biasanya dibuat untuk
memilih elemen-elemen HTML dan
melakukan aksi terhadap elemen yang
dipilih.
Sintaks :$(selector).action()
Tanda dollar, untuk mendefinisikan jQuery
(selector), untuk menunjukkan elemen yang
dipilih atau dituju.
action(), adalah jQuery action yang akan
dilakukan terhadap elemen yang dipilih.
$(this).hide()
menyembunyikan elemen saat ini
$("p").hide()
menyembunyikan semua paragraf atau konten dari tag
$(".test").hide()
menyembunyikan elemen yang mempunya class=”test”
$("#test").show()
menampilkan elemen yang mempunyai id=”test”
Karena hampir segala sesuatu yang kita
lakukan bila menggunakan jQuery
membaca atau memanipulasi document
object model (DOM), kita perlu memastikan
bahwa kita mulai menambahkan event
segera setelah DOM siap.
Untuk melakukan hal ini, kita
menambahkan kode ready event untuk
dokumen.
$(document).ready(function()
{//kode anda di sini});
Kode di atas berarti kita ingin kode dijalankan
apabila halaman HTML telah di load semuanya.
Atau dengan kode javascript biasanya seperti ini :
window.onload = function(){ //kode anda di sini }
Sekarang mari kita lihat pada contoh
$(".tombol1").click(Kode $(“.tombol1″) adalah
jQuery selektor. Di mana kita memilih elemen yang
mempunyai class=”tombol1” untuk kita lakukan
sesuatu. $ sendiri adalah alias untuk jQuery class.
Oleh karena $() untuk membuat objek jQuery.
Kemudian kita tambahkan fungsi click().
Ini berguna untuk memberikan event
onclick untuk elemen yang kita pilih tadi
(dalam hal ini adalah elemen yang
mempunya class=’tombol1’).
Dan kemudian melaksanakan fungsi yang
diberikan apabila event onclick terjadi.
Jadi artinya apabila elemen
dengan class=”tombol1” diklik maka
lakukan fungsi $(“p”).hide(1000);
Event - Event Dasar yang sering
digunakan pada JQuery
click()
Sebuah event atau animasi akan terjadi jika suatu objek
yang di pilih atau selec di klik
$('.subjek').click(function() {
$('#area').fadeOut();
});
dblclick()
Sebuah event atau animasi akan terjadi jika suatu objek
yang di pilih atau selec di klik ganda / klik dua kali.
$('.subjek').dblclick(function() {
$('#area').fadeOut();
});
focus()
untuk membuat suatu anmasi atau peristiwa pada subjek/pemicu
(digunakan pada elemen-elemen seperti dan .
$('.subjek').focus(function() {
$('#area').fadeOut();
});
mouseover()
Menimbulkan kejadian atau peristiwa ketika pointer mouse berada
di atas suatu subjek yang dituju.
$('.subjek').mouseover(function() {
$('#area').fadeOut();
});
Atau dengan program diabawah ini :
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut()
});
$(".btn2").click(function(){
$("p").fadeIn();
});
});
This is a paragraph.
Fade out
Fade in
• mouseleave()
Sama seperti Mouseout(),menimbulkan peristiwa
apabila pointer mouse pergi dari subjek/pemicu.
Namun saat pointer mouse meninggalkan sebuah
anak elemen (dan masih dalam elemen induk),
itu tidak sudah tidak bisa dei sebut Mouseleaf(),
hingga ketika pointer benar-benar telah keluar
dari elemen induk baru bisa disebut mouseleve().
$('.subjek').mouseleave(function() {
$('#area').fadeOut();
});
mouseout()
Menimbulkan peristiwa jika pointer mouse meninggalkan sebuah sbjek
yang di tuju.
$('.subjek').mouseout(function() {
$('#area').fadeOut();
});
});
• mouseenter()
Sama dengan MouseOver(), menimbulkan peristiwa apabila pointer
mouse berada di atas subjek/pemicu. Namun saat pointer mouse
memasuki elemen induk (MouseOver()) dan pointer mendatangi anakanak elemen di dalamnya, itu tidak masuk hitungan Mouseenter().
$('.subjek').mouseenter(function() {
$('#area').fadeOut();
});
hover()
adalah gabungan antara Mouseenter dan
Mouseleave.
• scroll()
Untuk menimbulkan suatu peristiwa ketika scroll di
tarik(ini berlaku untuk semua yang memiliki scroll).
$('.subjek').scroll(function() {
$('#area').fadeOut();
});
select()
Untuk menimbulkan suatu peritiwa jika ada
yang di select / blok biasa di gunakan pada
dan .
$('.subjek').select(function() {
$('#area').fadeOut();
});
Cara Menginstal Jquery
Untuk dapat menginstalasi JQuery sebagai berikut :
download jQuery dari websitenya http://
jquery.com/.
Pilihan download Production dan
development,
Perbedaannya adalah production digunakan di
realsite(setelah upload) sedangkan development
untuk masa developmen(pembuatan).
Versi production sudah di kompresi sehingga kode
nya sudah tidak bisa dibaca lagi dan ukurannya
jauh lebih kecil.
Contoh sederhana program jquery
$(document).ready(function(){
$(".tombol1").click(function(){
$("p").hide(1000);});
$(".tombol2").click(function(){
$("p").show(1000);});});
Hello World!
Sembunyikan
Tampilkan
Terlihat function ini didefinisikan di dalam
tag setelah kita menambahkan file
pustaka jquery-1.7.min.js. Di dalam function ini kita
melakukan pengolahan elemen dengan id "link_satu"
yang ketika diklik akan diganti teksnya menjadi "Halo
Internet".
Elemen DOM "link_satu" adalah elemen dari
tag a (anchor) yang mengapit teks "Click Saya !". Jika
elemen ini sudah ready dan tampil di halaman browser
kita maka ketika diklik maka akan diubah teksnya
menjadi dari "Click Saya" menjadi "Halo Internet !".
Function $(document).ready() pada jQuery
merupakan function khusus yang digunakan oleh
jQuery untuk menganalisa / mendeteksi apakah DOM
pada halaman HTML / web kita sudah siap digunakan.
Apabila belum siap, maka kode yang didefinisikan pada
bagian dalam function ini tidak akan bisa dijalankan.
Demikian juga sebaliknya, jika DOM sudah siap maka
kode yang didefinisikan dapat dijalankan.
Dengan kontrol seperti ini, maka kita dapat
meminimalisasi kesalahan perilaku (behavior) script
yang tidak kita kehendaki.
jQuery Syntax
The jQuery syntax is tailor-made for
selecting HTML elements and performing
some action on the element(s).
Basic syntax is: $(selector).action()
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML
elements
A jQuery action() to be performed on the
element(s)
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
If you click on me, I will disappear.
Click me away!
Click me too!
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
This is a heading
This is a paragraph.
This is another paragraph.
Click me
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
This is a heading
This is a paragraph.
This is another paragraph.
Click me
Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all elements.
$(".test").hide() - hides all elements with
class="test".
$("#test").hide() - hides the element with
id="test".
Sintax
$(document).ready(function(){
// jQuery methods go here...
});
$(function(){
// jQuery methods go here...
});
The element Selector
The jQuery element selector selects
elements based on the element name.
You can select all elements on a page
like this:
$("p")
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
This is a heading
This is a paragraph.
This is another paragraph.
Click me to hide paragraphs
jQuery Syntax For Event Methods
In jQuery, most DOM events have an equivalent
jQuery method.
To assign a click event to all paragraphs on a page,
you can do this:
$("p").click();
The next step is to define what should happen when
the event fires. You must pass a function to the
event:
$("p").click(function(){
// action goes here!!
});
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
If you click on me, I will disappear.
Click me away!
Click me too!
Tag HTML
$(document).ready(function(){
$("button").click(function(){
$("p").html("Hello world!");
});
});
Change content of all p elements
This is a paragraph.
This is another paragraph.
load
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt");
});
});
Let jQuery AJAX Change This Text
Get External Content
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("Hello world!");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
});
This is a paragraph.
This is another paragraph.
Input field:
Set Text
Set HTML
Set Value
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
This is some text in the div.
This is a paragraph in the div.
This is another paragraph in the div.
Remove div element
css
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
});
.important {
font-weight: bold;
font-size: xx-large;
}
.blue {
color: blue;
}
Heading 1
Heading 2
This is a paragraph.
This is another paragraph.
This is some important text!
Add classes to elements
$(document).ready(function(){
$("button").click(function(){
alert("Background color = " + $("p").css("background-color"));
});
});
This is a heading
This is a paragraph.
This is a paragraph.
This is a paragraph.
Return background-color of p
$(document).ready(function(){
$("button").click(function(){
var txt = "";
txt += "Width of div: " + $("#div1").width() + "";
txt += "Height of div: " + $("#div1").height();
$("#div1").html(txt);
});
});
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
Display dimensions of div
width() - returns the width of an element.
height() - returns the height of an element.
JavaScript adalah sebuah bahasa yang
dipergunakan oleh website pada sisi
peramban pengguna.
AJAX adalah metode JavaScript memanggil
data dari peramban tanpa menyegarkan
(refresh) laman atau memblokir aplikasi.
jQuery adalah library JavaScript yang
dibangun untuk otomatisasi dan
menyederhanakan perintah-perintah umum
sepert AJAX atau animasi.
Tugas
Buatlah Program Game yang menggunakan
Jquery, uraikan setiap baris arti dari
program tersebut dan jelaskan logika
programnnya.
Di presentasikan !
Jumlah kelompok 2 orang.
D. Sinaga, M.Kom
Universitas Dian Nuswantoro
Apa itu jQuery ?
jQuery adalah pustaka / library javascript sangat
ringkas dan sederhana untuk memanipulasi
komponen di dokumen HTML.
jQuery memiliki kemampuan menyederhanakan
(mengabstraksi) banyak hal kompleks pada javascript
seperti :
◦
◦
◦
◦
◦
◦
adaptasi pada cross browser environment.
penanganan event.
penggunaan AJAX.
manipulasi dan navigasi element halaman HTML.
efek animasi.
free dan open source.
Sejarah Jquery
Jquery Pertama kali dikembangkan oleh Jhon Resig
pertama kali pada tahun 2005, saat itu dia terinspirasi
dari kode Behavior, ketika itu Jhon merasa kode kode
behavior tidak elegan dan bahkan sangat jelek.
dia mulai memikirkan cara membuat library yang
handal dan ringan untuk javascript , dan lahirlah
JQUERY pada 14 januari 2006, direlease lah versi
pertama dari Jquery dan sampai sekarang masih terus
dikembangkan dan disempurnakan.
jQuery mempunyai semboyan “write less, do more”
Keunggulan Jquery
JQuery merupakan library JavaScript terhandal saat
ini. Faktanya, banyak perusahaan besar tingkat
dunia menggunakan jQuery dengan teknologi
Website mereka. Bahkan website-website lokal
pun tidak mau ketinggalan.
JQuery berhasil menyederhanakan fungsi-fungsi
JavaScript dan Ajax yang rumit, sehingga hanya
dengan beberapa baris kode, kita bisa membuat
website dengan tingkat interaktivitas yang tinggi
(responsif), bahkan membuat animasi yang
canggih tanpa memerlukan instalisasi plugin flash
pada browser.
Sebenarnya penggunaan JQuery sangatlah
mudah, karena tanpa harus dibekali
penguasaan pemograman JavaScript
sekalipun, karena semuanya sudah
dibungkus dalam bentuk library dan plugin,
Intinya kita hanya perlu tahu cara
menerapkan dalam website kita.
Kompatibel/cocok dengan semua browser
yang populer, seperti Mozzila, Internet
Explorer, safari, Chrome, dan Opera.
Kompetible dengan semua versi CSS (CSS 1 sampai
dengan CSS 3)
Dokumentasi, tutorial dan contoh-contohnya
lengkap , silahkan kunjungi website resminya di
http://jquery.com/
Didukung oleh komunitas yang besar dan aktif,
seperti forum, milis, Bliog, social engering (twitter
dan facebook), website dan tutorial.
Ketersediaan plugin yang sangat banyak
jumlahnya.
Plugin merupakan kemampuan tambahan yang bisa
disertakan pada jQuery.
File nya hanya satu dan ukuran nya pun
kecil, hanya sekitar 20 KB, sehingga cepat
aksesnya.
Open source/free (gratis) dengan lisensi dari
GNU General Public License dan MTT
License.
JQuery lebih banyak di gunakan oleh para
developer web dibandingkan Javascript
Library Lainnya.
Event-event dasar dalam
Jquery
Syntax dalam JQuery ada berbagai macam
dan dibuat untuk menyeleksi elemen - elemen
HTML dan menciptakan aksi / event pada satu
atau beberapa halaman website agar tampilan
website menjadi interaktif dan dinamis.
Penulisan Syantax JQuery.
Sintaks jquery biasanya dibuat untuk memilih
elemen-elemen HTML dan melakukan aksi
terhadap elemen yang dipilih.
Sintaks :$(selector).action()
Penulisan Sintaks
Sintaks jquery biasanya dibuat untuk
memilih elemen-elemen HTML dan
melakukan aksi terhadap elemen yang
dipilih.
Sintaks :$(selector).action()
Tanda dollar, untuk mendefinisikan jQuery
(selector), untuk menunjukkan elemen yang
dipilih atau dituju.
action(), adalah jQuery action yang akan
dilakukan terhadap elemen yang dipilih.
$(this).hide()
menyembunyikan elemen saat ini
$("p").hide()
menyembunyikan semua paragraf atau konten dari tag
$(".test").hide()
menyembunyikan elemen yang mempunya class=”test”
$("#test").show()
menampilkan elemen yang mempunyai id=”test”
Karena hampir segala sesuatu yang kita
lakukan bila menggunakan jQuery
membaca atau memanipulasi document
object model (DOM), kita perlu memastikan
bahwa kita mulai menambahkan event
segera setelah DOM siap.
Untuk melakukan hal ini, kita
menambahkan kode ready event untuk
dokumen.
$(document).ready(function()
{//kode anda di sini});
Kode di atas berarti kita ingin kode dijalankan
apabila halaman HTML telah di load semuanya.
Atau dengan kode javascript biasanya seperti ini :
window.onload = function(){ //kode anda di sini }
Sekarang mari kita lihat pada contoh
$(".tombol1").click(Kode $(“.tombol1″) adalah
jQuery selektor. Di mana kita memilih elemen yang
mempunyai class=”tombol1” untuk kita lakukan
sesuatu. $ sendiri adalah alias untuk jQuery class.
Oleh karena $() untuk membuat objek jQuery.
Kemudian kita tambahkan fungsi click().
Ini berguna untuk memberikan event
onclick untuk elemen yang kita pilih tadi
(dalam hal ini adalah elemen yang
mempunya class=’tombol1’).
Dan kemudian melaksanakan fungsi yang
diberikan apabila event onclick terjadi.
Jadi artinya apabila elemen
dengan class=”tombol1” diklik maka
lakukan fungsi $(“p”).hide(1000);
Event - Event Dasar yang sering
digunakan pada JQuery
click()
Sebuah event atau animasi akan terjadi jika suatu objek
yang di pilih atau selec di klik
$('.subjek').click(function() {
$('#area').fadeOut();
});
dblclick()
Sebuah event atau animasi akan terjadi jika suatu objek
yang di pilih atau selec di klik ganda / klik dua kali.
$('.subjek').dblclick(function() {
$('#area').fadeOut();
});
focus()
untuk membuat suatu anmasi atau peristiwa pada subjek/pemicu
(digunakan pada elemen-elemen seperti dan .
$('.subjek').focus(function() {
$('#area').fadeOut();
});
mouseover()
Menimbulkan kejadian atau peristiwa ketika pointer mouse berada
di atas suatu subjek yang dituju.
$('.subjek').mouseover(function() {
$('#area').fadeOut();
});
Atau dengan program diabawah ini :
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut()
});
$(".btn2").click(function(){
$("p").fadeIn();
});
});
This is a paragraph.
Fade out
Fade in
• mouseleave()
Sama seperti Mouseout(),menimbulkan peristiwa
apabila pointer mouse pergi dari subjek/pemicu.
Namun saat pointer mouse meninggalkan sebuah
anak elemen (dan masih dalam elemen induk),
itu tidak sudah tidak bisa dei sebut Mouseleaf(),
hingga ketika pointer benar-benar telah keluar
dari elemen induk baru bisa disebut mouseleve().
$('.subjek').mouseleave(function() {
$('#area').fadeOut();
});
mouseout()
Menimbulkan peristiwa jika pointer mouse meninggalkan sebuah sbjek
yang di tuju.
$('.subjek').mouseout(function() {
$('#area').fadeOut();
});
});
• mouseenter()
Sama dengan MouseOver(), menimbulkan peristiwa apabila pointer
mouse berada di atas subjek/pemicu. Namun saat pointer mouse
memasuki elemen induk (MouseOver()) dan pointer mendatangi anakanak elemen di dalamnya, itu tidak masuk hitungan Mouseenter().
$('.subjek').mouseenter(function() {
$('#area').fadeOut();
});
hover()
adalah gabungan antara Mouseenter dan
Mouseleave.
• scroll()
Untuk menimbulkan suatu peristiwa ketika scroll di
tarik(ini berlaku untuk semua yang memiliki scroll).
$('.subjek').scroll(function() {
$('#area').fadeOut();
});
select()
Untuk menimbulkan suatu peritiwa jika ada
yang di select / blok biasa di gunakan pada
dan .
$('.subjek').select(function() {
$('#area').fadeOut();
});
Cara Menginstal Jquery
Untuk dapat menginstalasi JQuery sebagai berikut :
download jQuery dari websitenya http://
jquery.com/.
Pilihan download Production dan
development,
Perbedaannya adalah production digunakan di
realsite(setelah upload) sedangkan development
untuk masa developmen(pembuatan).
Versi production sudah di kompresi sehingga kode
nya sudah tidak bisa dibaca lagi dan ukurannya
jauh lebih kecil.
Contoh sederhana program jquery
$(document).ready(function(){
$(".tombol1").click(function(){
$("p").hide(1000);});
$(".tombol2").click(function(){
$("p").show(1000);});});
Hello World!
Sembunyikan
Tampilkan
Terlihat function ini didefinisikan di dalam
tag setelah kita menambahkan file
pustaka jquery-1.7.min.js. Di dalam function ini kita
melakukan pengolahan elemen dengan id "link_satu"
yang ketika diklik akan diganti teksnya menjadi "Halo
Internet".
Elemen DOM "link_satu" adalah elemen dari
tag a (anchor) yang mengapit teks "Click Saya !". Jika
elemen ini sudah ready dan tampil di halaman browser
kita maka ketika diklik maka akan diubah teksnya
menjadi dari "Click Saya" menjadi "Halo Internet !".
Function $(document).ready() pada jQuery
merupakan function khusus yang digunakan oleh
jQuery untuk menganalisa / mendeteksi apakah DOM
pada halaman HTML / web kita sudah siap digunakan.
Apabila belum siap, maka kode yang didefinisikan pada
bagian dalam function ini tidak akan bisa dijalankan.
Demikian juga sebaliknya, jika DOM sudah siap maka
kode yang didefinisikan dapat dijalankan.
Dengan kontrol seperti ini, maka kita dapat
meminimalisasi kesalahan perilaku (behavior) script
yang tidak kita kehendaki.
jQuery Syntax
The jQuery syntax is tailor-made for
selecting HTML elements and performing
some action on the element(s).
Basic syntax is: $(selector).action()
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML
elements
A jQuery action() to be performed on the
element(s)
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
If you click on me, I will disappear.
Click me away!
Click me too!
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
This is a heading
This is a paragraph.
This is another paragraph.
Click me
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
This is a heading
This is a paragraph.
This is another paragraph.
Click me
Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all elements.
$(".test").hide() - hides all elements with
class="test".
$("#test").hide() - hides the element with
id="test".
Sintax
$(document).ready(function(){
// jQuery methods go here...
});
$(function(){
// jQuery methods go here...
});
The element Selector
The jQuery element selector selects
elements based on the element name.
You can select all elements on a page
like this:
$("p")
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
This is a heading
This is a paragraph.
This is another paragraph.
Click me to hide paragraphs
jQuery Syntax For Event Methods
In jQuery, most DOM events have an equivalent
jQuery method.
To assign a click event to all paragraphs on a page,
you can do this:
$("p").click();
The next step is to define what should happen when
the event fires. You must pass a function to the
event:
$("p").click(function(){
// action goes here!!
});
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
If you click on me, I will disappear.
Click me away!
Click me too!
Tag HTML
$(document).ready(function(){
$("button").click(function(){
$("p").html("Hello world!");
});
});
Change content of all p elements
This is a paragraph.
This is another paragraph.
load
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt");
});
});
Let jQuery AJAX Change This Text
Get External Content
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("Hello world!");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
});
This is a paragraph.
This is another paragraph.
Input field:
Set Text
Set HTML
Set Value
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
This is some text in the div.
This is a paragraph in the div.
This is another paragraph in the div.
Remove div element
css
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
});
.important {
font-weight: bold;
font-size: xx-large;
}
.blue {
color: blue;
}
Heading 1
Heading 2
This is a paragraph.
This is another paragraph.
This is some important text!
Add classes to elements
$(document).ready(function(){
$("button").click(function(){
alert("Background color = " + $("p").css("background-color"));
});
});
This is a heading
This is a paragraph.
This is a paragraph.
This is a paragraph.
Return background-color of p
$(document).ready(function(){
$("button").click(function(){
var txt = "";
txt += "Width of div: " + $("#div1").width() + "";
txt += "Height of div: " + $("#div1").height();
$("#div1").html(txt);
});
});
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
Display dimensions of div
width() - returns the width of an element.
height() - returns the height of an element.
JavaScript adalah sebuah bahasa yang
dipergunakan oleh website pada sisi
peramban pengguna.
AJAX adalah metode JavaScript memanggil
data dari peramban tanpa menyegarkan
(refresh) laman atau memblokir aplikasi.
jQuery adalah library JavaScript yang
dibangun untuk otomatisasi dan
menyederhanakan perintah-perintah umum
sepert AJAX atau animasi.
Tugas
Buatlah Program Game yang menggunakan
Jquery, uraikan setiap baris arti dari
program tersebut dan jelaskan logika
programnnya.
Di presentasikan !
Jumlah kelompok 2 orang.