TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif www.ilmuwebsite.com

Bagian 8. Menggunakan JQuery Manipulation

1

Bagian 8. Menggunakan JQuery Manipulation JQuery manipulation digunakan untuk memanipulasi HTML maupun CSS. Manipulasi di sini maksudnya adalah, baik itu menambahkan, menghapus, mengedit, mendapatkan nilai, mengeset nilai, terhadap suatu elemen html, berdasarkan selectornya.

Mendapatkan dan Men-Set Content/Value dan Attributes Elemen HTML Untuk mendapatkan content/value, maupun Atribut Elemen HTML, ada beberapa fitur yang diberikan oleh jquery, yakni text(), html(), dan val().

Mengambil dan Men-Set Text Pada Elemen HTML dengan Text() Text() itu digunakan untuk mengambil isi text dari suatu elemen, misalkan ketika ada paragraph yang berisi "pada suatu hari"

pada suatu hari

Maka untuk mengambil textnya adalah dengan

$('p').text()

2

Untuk kode selengkapnya adalah sebagai berikut :

<script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function( ){ alert( $('p').text() ); });

pada suatu hari

Hasil dari kode tersebut adalah akan muncul alert / kotak dialog yang berisi pada suatu hari Apabila sebelumnya kita telah mengambil isi text suatu elemen html, kita pun bisa mengeset atau mengisikan text yang telah di ambil tersebut ke dalam suatu elemen HTML, contohnya adalah sebagai berikut: <script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function( ){ /* var digunakan untuk mendefinisikan suatu variable data, yang bisa di isi dengan suatu nilai, dalam hal ini adalah isinya di ambil dari text yang berada di dalam div hijau */

3

var ambiltextdaridivhijau = $('div.hijau').text(); $('div.merah').html(ambiltextdaridivhijau); }); <style> div{

} .hijau{

width:200px; float:left; margin:0 20px 0 0; height:200px;

background:green;

} .merah{ background:red; }

Silahkan lihat di bagian var ambiltextdaridivhijau = $('div.hijau').text(); $('div.merah').html(ambiltextdaridivhijau);

4

Barisan kode ini berarti ambil text dari div.hijau, masukkan ke dalam variable (wadah), lalu isikan ke dalam isian html milik div.merah. Men-set nilai seperti ini pun berlaku untuk html.

Mengambil dan Mengeset Elemen-Elemen HTML dengan html() Jika pada text() itu digunakan hanya untuk mengambil text() pada suatu elemen html, berbeda dengan html(), fungsi html() ini mampu mengambil tidak hanya textnya saja tetapi juga elemen-elemen html berada dibawah elemen html yang terpilih/didefinisikan di selectornya. Cara penggunaannya adalah sebagai berikut : <script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function( ){ alert( $('div').html() ); });

5

Sedangkan untuk mengeset nilai yang telah diambil menggunakan html() adalah sebagai berikut <script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function( ){ /* var digunakan untuk mendefinisikan suatu variable data, yang bisa di isi dengan suatu nilai,dalam hal ini adalah isinya di ambil dari text yang berada di dalam div hijau */ var ambiltextdaridivhijau = $('div.hijau').html(); $('div.merah').html(ambiltextdaridivhijau); }); <style> div{

} .hijau{ }

width:200px; float:left; margin:0 20px 0 0; height:200px;

background:green;

.merah{ background:red; }

6



Mengambil dan Mengeset Suatu Nilai dari HTML input dengan val() Sebelumnya kita telah menggunakan html() dan text() untuk mengambil html pada suatu elemen html, maupun text yang berada pada suatu elemen html. Sekarang kita akan mengambil suatu nilai yang ada di dalam inputan form. Bagaimana caranya ? <script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function( ){ $('button').click(function(){ alert($('input.nama_mahasiswa').val()); }); });

Form Input

Nama Mahasiswa :
Ambil Nilai Apabila kita ganti isi dari input textnya dari TES NILAI misalkan menjadi pada suatu hari. Kemudian kita klik button ambil nilai, maka yang terjadi adalah muncul kotak

7

dialog alert yang mana isinya itu diambil sesuai dengan yang ada di dalam inputan text. Lalu bagaimana mengesetnya atau memasukkan suatu nilai ke dalam form inputan? <script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function( ){ $('button').click(function(){ var ambildata = $('input.nama_mahasiswa').val(); $('input.nama_mahasiswa_kloningan').val(ambildata); }); });

Form Input

Nama Mahasiswa :

Ambil Nilai


Nama Mahasiswa Kloningan


Mengambil dan Mengeset Nilai Maupun Text dari Elemen HTML Berdasarkan attribut elemen menggunakan attr() Setelah belajar menggunakan val(), kita akan mempelajari yang terakhir dalam bagian ini yakni mengambil nilai suatu elemen HTML dengan fitur attr() maupun mengeset elemen HTML menggunakan fitur attr().

8

Beginilah caranya : <script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function( ){ $('button').click(function(){ var ambilsourcegambar = $('img.gambar1').attr('src'); alert(ambilsourcegambar); }); });

Mengganti Gambar Menggunakan Fungsi Attr

Ganti Gambar Silahkan perhatikan sebelah sini : $('button').click(function(){ var ambilsourcegambar = $('img.gambar1').attr('src'); alert(ambilsourcegambar); }); Hasilnya adalah akan muncul kotak dialog sesuai dengan isi dari attribut source milik gambar yang memiliki class gambar1.

Nah untuk mengeset menggunakan fasilitas attr, perlu cara tersendiri yang berbeda dengan sebelumnya. <script type="text/javascript" src="jquery-1.11.1.min.js">

9

<script type="text/javascript"> $(function( ){ $('button').click(function(){ var ambilsourcegambar = $('img.gambar1').attr('src'); $('.gambar2').attr('src', ambilsourcegambar); }); });

Mengganti Gambar Menggunakan Fungsi Attr

Ganti Gambar Hasil dari kode tersebut adalah img dengan class gambar2, itu akan berubah seperti img dengan class gambar.

Menambahkan Elemen HTML kedalam halaman HTML Sebelumnya kita telah mempelajari manipulasi HTML mengambil dan mengeset elemen HTML, kini kita akan mempelajari bagaimana menambahkan elemen HTML ke dalam halaman HTML, ada beberapa cara, diantaranya adalah append(), prepend(), after(), before().

Menambahkan Elemen HTML dengan Append Append digunakan khusus untuk menambahkan HTML pertama kali di letakkan di paling awal dari dalaman elemen HTML.

10

Sebagai Contohnya adalah : <script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function( ){ $('button').click(function(){ $('#wadah').append( '

' + $('input.inputanuntukteks').val() + '

'); }); });

Heading TES

Isikan Apa saja :
Tambah Elemen Maka apabila anda ketikan apa saja di form inputan textnya maka akan muncul di dalam wadah, dan yang pertama kali di isikan akan di letakkan di awal.

Menambahkan Elemen HTML dengan Prepend Jika append di letakkan diawal maka prepend adalah sebaliknya. Contohnya adalah sebagai berikut :

11

<script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function( ){ $('button').click(function(){ $('#wadah').prepend( '

' + $('input.inputanuntukteks').val() + '

'); }); });

Heading TES

Isikan Apa saja :
Tambah Elemen

Untuk after() dan before() silahkan bereksperimen.

Menghapus Elemen HTML dari halaman HTML

12

Jika sebelumnya kita telah mempelajari bagaimana memanipulasi dan menambahkan, maka kali ini kita akan mempelajari bagaimana menghapus elemen HTML pada suatu halaman HTML. Menggunakan remove(). Contohnya adalah seperti ini

<style> div{

} h3{

float:left; padding:10px; width:200px; height:auto; margin:0 20px 0 0; background:#eee;

margin:0;

} h3:hover{ cursor:pointer; } p{ margin:0; } <script src="jquery-1.11.1.min.js"> <script> $(document).ready(function(){ $('button').click(function(){ $(this).parents('div').remove(); }); });

13



Manipulasi CSS Menggunakan JQuery Manipulasi CSS begitu penting ketika kita akan menghandle aksi dan interaksi dari user, misalkan ketika ada user mengklik sesuatu maka akan berubah dari segi warna dan lain-lain, ketimbang menggunakan css(), lebih baik anda menggunakan AddClass, menambahkan class ke dalam suatu elemen html. Sedangkan RemoveClass adalah kebalikannya, untuk menghapus class dari suatu elemen html. <style> .red{

background:red; color:#fff;

} p{

padding:20px; } <script src="jquery-1.11.1.min.js"> <script>

14

$(document).ready(function(){ $('button').click(function(){ $('p').addClass('red'); }); });

Ini adalah pragraph

Tambahkan Class Red

Sedangkan untuk removeClass, kebalikannya contohnya adalah sebagai berikut :

<style> .red{

background:red; color:#fff;

} p{

padding:20px; } <script src="jquery-1.11.1.min.js"> <script> $(document).ready(function(){ $('button').click(function(){ $('p').removeClass('red'); }); });

Ini adalah pragraph

Hapus Class Red

15



16