jQuery mempunyai kemampuan yang powerfull dalam hal memanipulasi, mengambil atau
menambah konten, dan sebagainya terhadap HTML.
html()
Untuk me-set konten (biasanya kita sebut innerHTML) dari elemen HTML yang dipilih kita gunakan
$(selector).html(content). Apabila parameter content tidak kita tentukan maka fungsi
html() berguna untuk mendapatkan konten dari HTML.
Contoh :
Kode 19. Contoh html()
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#lihat").click(function(){
var isinya = $("#paragraf").html();
});
$("#isikan").click(function(){
var isilagi = $("#isi").val();
alert(isilagi);
$("#paragraf").html(isilagi);
});
});
</script>
<body>
<button id=lihat>Lihat</button>
<p id=paragraf>
jQuery mempunyai kemampuan yang powerfull dalam hal memanipulasi,
mengambil atau menambah konten, dan sebagainya terhadap HTML
</p>
Teks :
<input type=text id=isi>
<p>
<button id=isikan>Isikan</button>
</body>
</html>
val()
Pada contoh di atas kita lihat ada kode
var isilagi = $("#isi").val();
Kode ini berarti kita mengambil nilai dari <input type=text id=isi> dan memasukkannya ke
variabel isilagi. Sama dengan fungsi html(), apabila kita masukkan nilai dari val(), maka
artinya kita me-set nilai dari elemen yang dipilih. Biasanya val() digunakan pada elemen-elemen
HTML <input>, contoh :
$(“#isi”).val(“hallo apa kabar”);
Kode di atas berarti kita me-set nilai <input type=text id=isi> dengan “hallo apa kabar”.
attr()
Dengan menggunakan fungsi attr(), ini membuat mudah bagi kita untuk mendapatkan nilai dari
suatu properti elemen HTML yang kita pilih.
Sintaks :
$(selector).attr(properties,nilai);
Parameter properties adalah nama properti yang ingin kita ambil atau set. Contoh properti
misalnya : id, class, title, src, href dan sebagainya.
Parameter nilai, apabila kita isi artinya kita me-set nilai properti yang kita tetukan, apabila
kosong artinya kita mengambil nilai properti yang kita tentukan.
Contoh :
Kode 20. Contoh attr()
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('.link').click(function(){
var id=$(this).attr("id");
var class=$(this).attr("class");
var href=$(this).attr("href");
alert(id);
alert(class);
alert(href);
});
});
</script>
<a href="http://www.desrizal.com" class="link" id="13">link</a>
</body>
</html>
addClass()
Berguna untuk menambahkan atau mengubah class untuk elemen yang dipilih.
Sintaks :
$(selector).addClass(namakelas)
Contoh :
Kode 21. Contoh addClass()
<html>
<head>
<style>
.besar
{
font-size:106px;
}
.kecil
{
font-size:12px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('.ubahclass').click(function(){
$(".besar").addClass("kecil");
});
});
</script>
<a href="#" class="ubahclass" >Klik </a>
<div class="besar">www.desrizal.com</div>
</body>
</html>
Ada banyak fungsi-fungsi lainnya untuk memanipulasi HTML :
Manipulasi Description
$(selector).html(content) Set konten (inner HTML) dari elemen yang dipilih
$(selector).text(text) Sama seperti html(), tapi tag akan di-escape
$(selector).attr(attr,value) Set atribut dan nilainya dari elemen yang dipilih
$(selector).val(value) Set nilai dari elemen yang dipilih
Getting Contents
$(selector).html() Mengambil konten (inner HTML) dari elemen yang dipilih
$(selector).text() Mengambil konten teks dari elemen yang dipilih
$(selector).attr(attr) Mengambil nilai dari suatu atribut elemen yang dipilih.
$(selector).val() Mengambil nilai/value dari elemen yang dipilih.
Adding Content
$(selector).after(content) Menambah konten setelah elemen dipilih.
$(selector).before(content) Menambah konten sebelum elemen dipilih.
$(selector).insertAfter(selector) Menambah elemen yang ditentukan setelah elemen yang
dipilih.
$(selector).insertBefore(selector) Menambah elemen yang ditentukan sebelum elemen yang
dipilih.
Manipulate CSS Description
$(selector).addClass(content) Menambah atau mengubah class elemen yang dipilih.
$(selector).removeClass(content) Menghilangkan class dari elemen yang dipilih
$(selector).toggleClass(content) Toggle antara penambahan dan penghilangan class dari elemen
yang dipilih.
$(selector).hasClass(content) Cek apakah elemen memiliki class.
Adding Inner Content
$(selector).append(content) Menambahkan konten ke dalam konten dar elemen yang dipilih
$(selector).prepend(content) "Prepend" konten ke dalam konten dar elemen yang dipilih
$(content).appendTo(selector) Menambahkan elemen ke dalam konten dari elemen yang
dipilih.
$(content).prependTo(selector) "Prepend" elemen ke dalam konten dari elemen yang dipilih.
Wrapping
$(selector).wrap(content) Wrap elemen yang dipilih dalam sebuah konten
$(selector).wrapAll(content) Wrap semua elemen yang dipilih menjadi satu konten
$(selector).wrapinner(content) Wrap konten inner child yang dipilih
$(selector).unwrap() Remove dan replace parents dari elemen yang dipilih
Copy, Replace, Remove
$(content).replaceAll(selector) Menukar elemen yang dipilih dengan elemen yang ditentukan
$(selector).replaceWith(content) Menukar elemen yang dipilih dengan konten yang baru
$(selector).empty() Remove semua konten dan child elements dari elemen yang
dipilih
$(selector).remove() Remove elemen yang dipilih
$(selector).removeAttr(attr) Remove atribut yang ditentukan dari elemen yang dipilih
$(selector).clone() Clone elemen yang dipilih
$(selector).detach() Remove elemen yang dipilih dari DOM
Sumber : http://blog.codingwear.com/
18 comments:
wah, cukup ribet juga ya...
Keeerraan Broh,,,
:D
KmbangKan lg!!!
Artikel yang bagus sur apa lagi tentang javascript framework dari jquery . Jquery dapat memaksimalkan tampilan dan user experience dengan user. Terus belajar ya sur
ini tugas dari dosen ya?
@Indigo : ya memang ribet, saya juga baru belajar.
@Ida Bagus Putu Eka Putra : makasi bro.
@Kurniawan Joko P : trmakasi Mas
@Agus Pranajaya : iya ni, perancangan web.
apakah ini??
@Prabandana Manuarta : jQuey, buat memperkeren HTML. coba deh.
ih..keyenn cekayi....
lumayan menguras otak juga
wew.. ini yah jQuery
perlu belajar ni.. hehe
@all : ayyookk blajar bareng.. kalo dah pinter sharing2 yah...
eehh aku juga lagi pelajarin jQuery nih. kita sharing2 ya...
makasi infonya bro :)
kren postingan nya bro,,,
sangat membantu..hehe
keren.... nambah ilmu lagiii
Makasi tutorialnya
Putu wulandari : bagus2, sama2 belajar.
Dwi Mahendra : sama2 :)
herman : makasi bro
Putu Indra Dewi : coba deh check tutorial ini, baru aku buat kemaren, semoga membantu.
http://surya-udayana.blogspot.com/2011/11/membuat-menu-vertikal-sederhana-dengan.html
Post a Comment