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

Transkripsi

1 TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif Bagian 8. Menggunakan JQuery Manipulation 1

2 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" <p>pada suatu hari</p> Maka untuk mengambil textnya adalah dengan $('p').text() 2

3 Untuk kode selengkapnya adalah sebagai berikut : <script type="text/javascript" src="jquery min.js"> alert( $('p').text() ); <p>pada suatu hari</p> 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 min.js"> /* 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

4 var ambiltextdaridivhijau = $('div.hijau').text(); $('div.merah').html(ambiltextdaridivhijau); <style> div{ width:200px; float:left; margin:0 20px 0 0; height:200px;.hijau{ background:green;.merah{ background:red; </style> <div class="hijau"> <h1>judul artikel</h1> <p>pada suatu hari</p> </div> <div class="merah"> </div> Silahkan lihat di bagian var ambiltextdaridivhijau = $('div.hijau').text(); $('div.merah').html(ambiltextdaridivhijau); 4

5 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 min.js"> alert( $('div').html() ); <div> <h1>judul artikel</h1> <p>pada suatu hari</p> </div> 5

6 Sedangkan untuk mengeset nilai yang telah diambil menggunakan html() adalah sebagai berikut <script type="text/javascript" src="jquery min.js"> /* 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{ width:200px; float:left; margin:0 20px 0 0; height:200px;.hijau{ background:green;.merah{ background:red; </style> <div class="hijau"> <h1>judul artikel</h1> <p>pada suatu hari</p> </div> 6

7 <div class="merah"> </div> 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 min.js"> alert($('input.nama_mahasiswa').val()); <h1>form Input</h1> <label>nama Mahasiswa :</label> <input type="input" name="" class="nama_mahasiswa" value="tes NILAI" /><br /> <button>ambil Nilai</button> 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

8 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 min.js"> var ambildata = $('input.nama_mahasiswa').val(); $('input.nama_mahasiswa_kloningan').val(ambildata); <h1>form Input</h1> <label>nama Mahasiswa :</label> <input type="input" name="" class="nama_mahasiswa" value="tes NILAI" /><br /><br /> <button>ambil Nilai</button><br /><br /><br /> <label>nama Mahasiswa Kloningan</label> <input type="input" name="" class="nama_mahasiswa_kloningan" value="" /><br /> 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

9 Beginilah caranya : <script type="text/javascript" src="jquery min.js"> var ambilsourcegambar = $('img.gambar1').attr('src'); alert(ambilsourcegambar); <h1>mengganti Gambar Menggunakan Fungsi Attr</h1> <button>ganti Gambar</button> <img src="gambar1.png" class="gambar1"/> <img src="gambar2.png" class="gambar2"/> Silahkan perhatikan sebelah sini : 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 min.js"> 9

10 var ambilsourcegambar = $('img.gambar1').attr('src'); $('.gambar2').attr('src', ambilsourcegambar); <h1>mengganti Gambar Menggunakan Fungsi Attr</h1> <button>ganti Gambar</button> <img src="gambar1.png" class="gambar1"/> <img src="gambar2.png" class="gambar2"/> 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

11 Sebagai Contohnya adalah : <script type="text/javascript" src="jquery min.js"> $('#wadah').append( '<p>' + $('input.inputanuntukteks').val() + '</p>'); <h1>heading TES</h1> <label>isikan Apa saja :</label><input type="text" name="inputanuntukteks" class="inputanuntukteks" /><br /> <button>tambah Elemen</button> <div id="wadah"></div> 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

12 <script type="text/javascript" src="jquery min.js"> $('#wadah').prepend( '<p>' + $('input.inputanuntukteks').val() + '</p>'); <h1>heading TES</h1> <label>isikan Apa saja :</label><input type="text" name="inputanuntukteks" class="inputanuntukteks" /><br /> <button>tambah Elemen</button> <div id="wadah"></div> Untuk after() dan before() silahkan bereksperimen. Menghapus Elemen HTML dari halaman HTML 12

13 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; </style> <script src="jquery min.js"> <script> $(document).ready(function(){ $(this).parents('div').remove(); 13

14 <div><h3>satu</h3><p>satu dikenal dengan suatu yang istimewa, nomor satu, itu ibaratnya tidak terkalahkan</p><br /><button>hapus</button></div> <div><h3>dua</h3><p>dua merupakan Angka yang lumrah ditemukan pada anggota tubuh, dua tangan</p><br /><button>hapus</button></div> <div><h3>tiga</h3><p>ada sebuah desa bernama salatiga, yang dimana penduduknya menyenangi akan dunia web development</p><br /><button>hapus</button></div> <div><h3>empat</h3><p>empat, dan angka lainnya itu sama-sama bagusnya</p><br /><button>hapus</button></div> 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{ p{ background:red; color:#fff; padding:20px; </style> <script src="jquery min.js"> <script> 14

15 $(document).ready(function(){ $('p').addclass('red'); <p>ini adalah pragraph</p> <button>tambahkan Class Red</button> Sedangkan untuk removeclass, kebalikannya contohnya adalah sebagai berikut : <style>.red{ p{ background:red; color:#fff; padding:20px; </style> <script src="jquery min.js"> <script> $(document).ready(function(){ $('p').removeclass('red'); <p class="red">ini adalah pragraph</p> <button>hapus Class Red</button> 15

16 16