Manipulasi HTML dengan jQuery
jQuery mempunyai kemampuan yang powerfull dalam hal memanipulasi, mengambil ataumenambah 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 html()
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#lihat").click(function(){
var isinya = $("#paragraf").html();
alert(isinya);
});
$("#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 kevariabel isilagi. Sama dengan fungsi html(), apabila kita masukkan nilai dari val(), makaartinya kita me-set nilai dari elemen yang dipilih. Biasanya val() digunakan pada elemen-elemenHTML <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 darisuatu properti elemen HTML yang kita pilih.
Sintaks :
$(selector).attr(properties,nilai);
Parameter properties adalah nama properti yang ingin kita ambil atau set. Contoh propertimisalnya : id, class, title, src, href dan sebagainya.
Parameter nilai, apabila kita isi artinya kita me-set nilai properti yang kita tetukan, apabilakosong artinya kita mengambil nilai properti yang kita tentukan.
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>
</head>
<body>
<a href="http://choirulzone.wordpress.com" id="13">link</a>
</body>
</html>
addClass()
Berguna untuk menambahkan atau mengubah class untuk elemen yang dipilih.
Sintaks :
$(selector).addClass(namakelas)
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");
});
});
<a href="#" >Klik </a>
<div>choirul.zone.wordpress.com</div>
</body>
</html>
dikutip dari buku PHP Ajax Javascript jQuery
makasih yah mas
makasih