Belajar jQuery Untuk Pemula

Belajar jQuery untuk pemula.

Belajar jQuery ?? Siapa takut. Untuk pemula yang baru kenal nama jQuery dan ingin belajar jQuery, untuk jaman sekarang kita tidak perlu lagi membeli buku di Toko Buku atau di Gramedia terdekat, sekarang jaman semuanya sudah canggih, cukup terhubung ke internet saja kita sudah dapat semuanya apa yang mau kita cari, buka begitu...

Di internet telah tersebar bermacam-macam tutorial yang kita perlukan, salah satunya ialah jQuery yang akan saya perkenalkan di pertemuan kali ini..

Kali ini saya akan memperkenalkan cara Menipulasi HTML dan CSS dengan jQuery. Hal ini sangat gampang kita praktek kan dan kita gunakan. Jika kita tidak mencoba dan berusahan maka kita tidak akan tau bagaimana cara kerja dan hasilnya.

Baiklah kita akan memulai cara-caranya.

Tujuan di sini adalah :

Memahami kemampuan Jquery dalam memanipulasi, mengambil, atau menambah konten terhadap HTML

Memahami kemampuan Jquery dalam memanipulasi CSS

Baca Juga : Belajar CSS, Manipulasi CSS dengan jquery.

Manipulasi HTML

jQuery html() method, untuk yang pertama kita akan mengenal yang namanya jQuery html() method.

jQuery mempunyai kemampuan yang powerfull dalam hal memanipulasi, mengambil atau menambah konten, dan sebagainya terhadap HTML.

Untuk me-set konten (biasanya kita sebut innerHTML) dari elemen HTML yang dipilih kita gunakan

html() method.

Sintaks :

$(selector).html(content).

Apabila parameter content tidak kita tentukan maka fungsi html() berguna untuk mendapatkan konten dari HTML.

Mari kita memcoba untuk Pelatihan bagaimana hasil dan maksut dari keterangan di atas. Tuliskan sintak dibawah ini dan simpan dengan nama htmlmethod.php, atau terserah dengan nama apa yangkita inginkan supaya kita ingat. Dan jangan lupa file jquery-2.1.0.min.js berada pada folder yang sama. Untuk yang belum ada file jQuery bisa langsung di Download di sini !!

Dan jika di situ tidak bisa mencarinya, bisa juga di Download lewat sini !!

<html>

<head>

<script type="text/javascript" src="jquery-2.1.0.min.js"></script>

<script type="text/javascript">

$(function(){

$("#isikan").click(function(){

var isilagi = $("#isi").val();

$("#paragraf").html(isilagi);

});

});

</script>

</head>

<body>

<p id=paragraf>

Ini Kalimat Asli dari pada file HTML

</p>

Manipulasikan Teks diatas :

<input type=text id=isi>

<p>

<button id=isikan>Manipulasikan</button>

</body>

</html>