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

Please download to get full document.

View again

of 16
0 views
PDF
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Document Description
TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif Bagian 8. Menggunakan JQuery Manipulation
Document Share
Document Transcript
TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif 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 p pada suatu hari /p Maka untuk mengambil textnya adalah dengan $('p').text() 2 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 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 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 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 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 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 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 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 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 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 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 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 $(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
Similar documents
View more...
Search Related
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks