FRAMEWORK JAVASCRIPT : MANIPULASI HTML & CSS DENGAN JQUERY

Transkripsi

1 BAB 15 FRAMEWORK JAVASCRIPT : MANIPULASI HTML & CSS DENGAN JQUERY A. TUJUAN: 1. Mempelajari dan dapat mengimplementasikan manipulasi HTML dengan jquery 2. Mempelajari dan dapat mengimplementasikan manipulasi CSS dengan jquery B. LANDASAN TEORI: 1. MANIPULASI HTML DENGAN JQUERY jquery memiliki kemampuan yang powerfulldalam hal memanipulasi, mengambil atau menambah konten dan sebagainya terhadap HTML. Ada banyak metode untuk melakukan maniulasi pada HTML, berikut ini penjelasannya: a. Get Content dan set Content- text(), html(), dan val() 1. Text() Metode text(), digunakan untuk mengatur atau mengambil isi teks dari elemen yang dipilih. 1. Mengambil isi teks: $ (selector).text () 2. Mengatur isi teks: $ (selector).text (konten) 3. Mengatur konten teks menggunakan fungsi: $ (selector).text (function (index, currentcontent)) Keterangan: Content : Menentukan isi teks baru untuk unsur unsur yang dipilih. Function : Menentukan fungsi yang mengembalikan konten teks baru untuk unsur-unsur yang dipilih. Manipulasi HTML dan CSS dengan jquery 1

2 Indeks : Mengembalikan posisi indeks dari elemen yang dipilih Currentcontent : konten saat elemen yang dipilih 2. Html() Metode html (), digunakan untuk mengatur atau mengambil konten (innerhtml) dari elemen yang dipilih. 1. Mengembalikan konten: $ (selector).html () 2. Mengatur Konten : $ (selector).html (content) 3. Mengatur konten dengan menggunakan fungsi: $ (selector).html (function (index, currentcontent)) Keterangan: Content : Menentukan konten baru untuk unsur-unsur yang dipilih (dapat berisi tag HTML) Function : Menentukan fungsi yang mengembalikan konten baru untuk unsur-unsur yang dipilih Index : Mengambil posisi indeks dari elemen yang dipilih Currentcontent : Mengembalikan konten HTML dari elemen yang dipilih 3. Val() Metode val (),digunakan untukmengatur atau mengambil nilai atribut dari elemen yang dipilih. 1. Mengembalikan nilai atribut: $ (selector) val () 2. Mengatur nilai atribut: $ (selector) val (value) Manipulasi HTML dan CSS dengan jquery 2

3 3. Mengatur nilai atribut menggunakan fungsi: $ (selector) val (function (index, CurrentValue)) Keterangan: Val :Menentukan nilai atribut. Function :Menentukan fungsi untuk mengembalikan nilai yang diatur. Index :Mengambil posisi indeks dari elemen yang diubah. Current value :Mengambil nilai atribut saat elemen yang dipilih. b. Get Attribute dan Set Attribute attr() Metode Attr (), digunakan untuk mengatur atau mengambil atribut dan nilai-nilai dari elemen yang dipilih. 1. Mengembalikan nilai dari atribut: $ (selector) attr (attribute) 2. Mengatur atribut dan nilai: $ (selector) attr (attribute, value) 3. Mengatur atribut dan nilai menggunakan fungsi: $ (selector) attr (attribute, function (index, CurrentValue)) 4. Mengatur beberapa atribut dan nilai-nilai: $ (selector) attr ({attribute: value, attribute: value,...}) Keterangan: Attribute :Menentukan nama atribut Value :Menentukan nilai atribut Function :Menentukan fungsi untukmengambil nilai atribut yang diatur. Index :Menerima posisi indeks dari elemen yang diatur CurrentValue :Menerima nilai atribut dari elemen yang dipilih Manipulasi HTML dan CSS dengan jquery 3

4 c. Adding inner content Ada empat metode yang digunakan untuk menambah konten baru ke dalam konten html, yaitu: 1. Append() Metode append() digunakan untuk menyisipkan konten tertentu pada akhir elemen yang dipilih. $(selector).append(content,function(index,html)) Keterangan: Content :Menentukan konten untuk menyisipkan (dapat berisi tag HTML) Function :Menentukan fungsi yang mengembalikan konten untuk menyisipkan Index :Mengembalikan posisi indeks dari elemen dalam diubah. html :Mengambil HTML dari elemen yang dipilih 2. Prepend() Metode prepend(), merupakan kebalikan dari metode append(). Metode prepend() digunakan untuk menyisipkan konten tertentu pada awal elemen yang dipilih. $(selector).prepend(content,function(index,html)) 3. AppendTo() Metode appendto(), digunakan untuk menyisipkan elemen HTML di akhir di elemen yang dipilih. $(content).appendto(selector) Keterangan: Content : Menentukan konten yang akan dimasukkan. Selector : Menentukan elemen yang akan disisipi. Manipulasi HTML dan CSS dengan jquery 4

5 4. PrependTo() Metode prependto(), digunakan untuk menyisipkan elemen HTML di awal elemen yang dipilih. $(content).prependto(selector) 5. After() Metode after(), digunakan untuk menyisipkan konten tertentu setelah elemen yang dipilih. $(selector).after(content,function(index)) 6. Before() Metode before(), digunakan untuk menyisipkan konten tertentu di depan (sebelum) elemen yang dipilih. $(selector).before(content,function(index)) d. Menyalin, mengganti dan menghapuselemen / konten (Copy, Replace, Remove) Untuk menyalin, mengganti dan menghapus elemen atau konten, terdapat beberapa metode yaitu: 1. ReplaceAll() Metode replaceall(), digunakan untuk mengganti semua elemen yang dipilih dengan elemen HTML baru. $(content).replaceall(selector) 2. ReplaceWith() Metode replacewith(), digunakan untuk mengganti elemen yang dipilih dengan konten baru. $(selector).replacewith(content,function(index)) Manipulasi HTML dan CSS dengan jquery 5

6 3. Remove() Metode remove() digunakan untuk menghapus elemen yang dipilih, termasuk semua teks dan child nodes. Metode ini juga akan menghapus data dan event dari elemen yang dipilih. $(selector).remove() 4. RemoveAttr() Metode removeattr() digunakan untuk menghapus satu atau lebih atribut dari elemen yang dipilih. $(selector).removeattr(attribute) 5. Empty() Metode empty() digunakan untuk menghapus semua child nodes dan konten dari elemen yang dipilih. Metode ini tidak menghapus unsur itu sendiri atau atributnya. $ (selector).empty () 6. Clone() Metode clone(), digunakan untuk membuat salainan dari elemen yang dipilih. $(selector).clone(true false) 7. Detach() Metode detach(), digunakan untuk mengahpus elemen yang dipilih. Tetapi masih menyimpan data dan event.metode ini juga menyimpan salinan dari elemen yang dihapus, dan dapat memungkinkan elemen tersebut dimasukkan kembali suatu saat. $(selector).detach() Manipulasi HTML dan CSS dengan jquery 6

7 2. MANIPULASI CSS DENGAN JQUERY jquery juga mempunyai kemampuan dalam hal memanipulasi CSS. Ada banyak metode yang dapat digunakan untuk melakukan manipulasi pada CSS berikut ini penjelasannya: a. Manipulasi properti CSS 1. AddClass() Metode addclass() digunakan untuk menambah satu atau lebih nama class untuk elemen yang dipilih. Metode ini tidak menghapus atribut class yang ada, tetapi hanya menambah satu atau lebih namaclasske dalam atribut class.untuk menambahkan lebih dari satu class, pisahkan nama-nama class dengan spasi. $(selector).addclass(classname,function(index,oldclass)) Keterangan: Classname :Menentukan satu atau lebih nama kelas yang akan ditambahkan Function :Menentukan fungsi yang mengembalikan satu atau lebih nama kelas yang akan ditambahkan Index :Mengambilposisi indeks dari elemen yang dipilih Oldclass :Mengambil nama kelas saat elemen dipilih 2. RemoveClass() Metode removeclass(), digunakan untuk menghapus satu atau lebih nama class dari elemen yang dipilih. Jika tidak ada parameter yang ditentukan, maka metode ini akan menghapus semua nama class dari elemen yang dipilih. $(selector).removeclass(classname,function(index,currentclass)) 3. ToggleClass() Metode toggleclass(), digunakan untuk beralih antara menambah dan menghapus satu atau lebih nama class dari elemen yang dipilih. Metode Manipulasi HTML dan CSS dengan jquery 7

8 inimemeriksa setiap elemen untuk namaclass tertentu. Nama-nama class akan ditambahkan jika hilang, dan dihapus jika sudah diatur. Namun, dengan menggunakanparameter switch, Kita dapat menentukan hanya menghapus, atau hanya menambahkan namaclass. $(selector).toggleclass(classname,function(index,currentclass),switch) Keterangan: Switch:Menentukan jika kelas hanya boleh ditambahkan (true), atau hanya dihapus (false) 4. CSS() Metode css(), digunakan untuk mengatur atau mendapatkan satu atau lebih properti CSS untuk elemen yang dipilih. Namun, properti CSS singkatan (seperti background )tidak sepenuhnya didukung dan dapat memberikan hasil yang berbeda di browser yang berbeda. 1. Mengembalikan nilai properti CSS: $ (Selector) css (property) 2. Mengatur properti CSS dan nilai: $ (Selector) css (propery, value) 3. Mengatur properti CSS dan nilai menggunakan fungsi: $ (Selector) css (property, function (index, CurrentValue)) 4. Mengatur beberapa properti dan nilai-nilai: $ (Selector) css ({property: value, property: value,...}) Keterangan: Property :Menentukan CSS nama properti, seperti warna, font-weight, dll Value :Menentukan nilai properti CSS, seperti Red, bold, dll Index : Mengembalikan posisi indeks dari elemen yang diatur CurrentValue :Mengembalikan nilai saat ini dari properti CSS Manipulasi HTML dan CSS dengan jquery 8

9 5. HasClass() Metode hasclass(), digunakan untuk cek apakah elemen memiliki nama class. Apabila elemen yang dipilih memiliki nama class, maka metode ini akan mengembalikan nilai TRUE. $(selector).hasclass(classname) b. Manipulasi CSS size Gambar 15.1 Dimensi jquery Gambar 15.1 menunjukkan beberapa metode yang digunakan untuk melakukan manipulasi ukuran pada CSS.Pada gambar diatas, dijelaskan metode yang digunakan berdasarkan area yang ingin diatur. Untuk memanipulasi ukuran dari elemen yang dipilih (tinggi dan lebar), maka ada beberapa metode yang digunakan untuk hal ini, yaitu: 1. Width() Metode width(), digunakan untuk mengatur atau mengambilukuran lebar elemen yang dipilih. Manipulasi HTML dan CSS dengan jquery 9

10 Gambar 15.2 Area Yang Diatur dengan Metode Width() Gambar 15.2menggambarkan bahwa metode width() tidak mengatur termasuk padding, border, atau margin, namun hanya mengatur lebar elemen. 1. Mengembalikan ukuran lebar $(selector).width() 2. Mengatur ukuran lebar $(selector).width(value) 3. Mengatur lebar menggunakan fungsi: $ (selector).width (function (index, currentwidth)) Keterangan: Value :Menentukan lebar dalam px, em, pt, dll defaultnya adalah px. Index :Mengambil posisi indeks dari elemen yang dipilih. currentwidth :Mengeambil ukuran lebar dari elemen yang dipilih. 2. Height() Metode height(), digunakan untuk mengatur atau mengambil ukurantinggi dari elemen yang dipilih. Area yang dapat diatur dengan menggunakan metode height() ditampilkan pada gambar Manipulasi HTML dan CSS dengan jquery 10

11 Gambar 15.3 Area Yang Diatur dengan Metode height() Gambar 15.3 menggambarkan bahwa metode height() tidak mengatur termasuk padding, border, atau margin, melainkan hanya tinggi elemen yang dipilih. 1. Mengambil ukuran tinggi $(selector).height() 2. Mengatur ukuran tinggi $(selector).height(value) 3. Mengatur tinggi menggunakan fungsi: $ (selector).height (function (index, currentheight)) Keterangan: Value :Menentukansetting tinggi dalam px, em, pt, dll defaultnya adalah px. Index :Mengambil posisi indeks dari elemen yang dipilih. currentheight :Mengambil ukuratinggidari elemen yang dipilih. 3. InnerWidth() Metode innerwidth(), digunakan untuk mengambil ukuran lebar bagian dalam (termasuk padding, tetapi tidak termasuk border) dari elemen yang dipilih. Manipulasi HTML dan CSS dengan jquery 11

12 Gambar 15.4 Area Yang Diatur dengan Metode innerwidth() Gambar 15.4 menggambarkan bahwa metode innerwidth() mengatur lebar bagian dalam (di dalam border) yaitu bagian elemen dan padding, tetapi tidak termasukborder atau margin. 1. Mengambil ukuran tinggi $(selector).height() 2. Mengatur ukuran tinggi $(selector).height(value) 3. Mengatur tinggi menggunakan fungsi: $ (selector).height (function (index, currentheight)) Keterangan: Value :Menentukansetting tinggi dalam px, em, pt, dll defaultnya adalah px. Index :Mengambil posisi indeks dari elemen yang dipilih. currentheight :Mengambil ukuratinggidari elemen yang dipilih. 4. InnerHeight() Metode innerheight(), digunakan untuk mengambil tinggi bagian dalam (teramsuk padding, tetapi tidak termasuk border) dari elemen yang dipilih. Manipulasi HTML dan CSS dengan jquery 12

13 Gambar 15.5 Area Yang Diatur dengan Metode innerheight() Gambar 15.5 menggambarkan bahwa metode innerheight mengatur tinggi termasuk padding, tetapi tidak termasukborder atau margin. $(selector).innerheight() 5. outerwidth() Metode outerwidth() digunakan untuk mengembalikan lebar bagian luar (termasuk padding dan border) dari elemen yang dipilih. Gambar 15.6 Area Yang Diatur dengan Metode outerwidth() Manipulasi HTML dan CSS dengan jquery 13

14 Gambar 15.6 menggambarkan bahwa metode outerwidth() mengatur lebar seluruh area termasuk padding, border danmargin. $(selector).outerwidth(includemargin) Keterangan: includemargin : Nilai Boolean yang menentukan apakah menyertakan margin atau tidak. (True dan False) False : Default. Tidak termasuk margin True : Termasuk margin. 6. outerheight() Metode outerheight(), digunakan untuk mengambil ukuran tinggi bagian luar (termasuk padding dan border) dari elemen yang dipilih. Gambar 15.7 Area Yang Diatur dengan Metode outerheight() Gambar 15.7 menggambarkan bahwa metode outerheight() mengatur tinggi elemen termasuk padding, border danmargin dari elemen yang dipilih. $(selector).outerheight(includemargin) c. Manipulasi Posisi 1. Offset() Metode offset(), digunakan untuk mengatur atau mengembalikan koordinat offset dari elemen yang dipilih, relatif terhadap dokumen. Manipulasi HTML dan CSS dengan jquery 14

15 Sintaks : 1. Mengambil koordinat ofset: $(selector).offset(coordinates) 2. Mengatur koordinat ofset : $(selector).offset({top:value,left:value}) 3. Mengatur koordinat offset dengan fungsi: $(selector).offset(function(index,currentoffset)) Parameter coordinates bisa berupa koordinat dari elemen yang dipilih, contoh :offset({top:100,left:0}) Jika kita mengosongkan parameter coordinates, artinya kita mengambil nilai offset dari elemenyang kita pilih.fungsi offset() akan menghasil objek yang mempunyai 2 properti yaitu top dan left. 2. OffsetParent() Metode offsetparent(), digunakan untuk mendapatkan elemen parent terdekat dengan posisi yang telah ditentukan. $(selector).offsetparent() 3. Position() Metode position() hampir sama dengan metode offset(), yaitu untuk mendapatkan atau menentukan posisi dari elemen, tetapi relative terhadap parent. Fungsi position() akan menghasilkan objek yang memiliki 2 properti, yaitu top dan left. $(selector).position() 4. scrollleft() Metode scrollleft(), digunakan untuk mendapatkan atau menentukan posisi scrollbar horizontal untuk elemen yang dipilih. 1. Mendapatkan posisi scrollbar horizontal: $(selector).scrollleft() Manipulasi HTML dan CSS dengan jquery 15

16 2. Menentukan posisi scrollbar horizontal: $(selector).scrollleft(position) 5. scrolltop() Metode scrolltopt(), digunakan untuk mendapatkan atau menentukan posisi scrollbar vertikal untuk elemen yang dipilih. 1. Mendapatkan posisi scrollbar vertikal: $(selector).scrolltop() 2. Menentukan posisi scrollbar vertikal: $(selector).scrolltop(position) d. Wrapping 1. Wrap() Metode wrap(), digunakan untuk membungkus elemen HTML tertentu disetiap elemen yang dipilih dalam sebuah konten. $(selector).wrap(wrappingelement,function(index)) 2. wrapall() Metode wrapall(), digunakan untuk membungkus elemen HTML tertentu disetiap semua elemen yang dipilih menjadi satu konten. $(selector).wrapall(wrappingelement) 3. wrapinner() Metode wrapinner(), digunakan untuk membungkus elemen HTML tertentu di sekitar konten (inner HTML) dari masing-masing elemen yang dipilih. $(selector).wrapinner(wrappingelement,function(index)) Manipulasi HTML dan CSS dengan jquery 16

17 4. unwrap() Metode unwrap(), digunakan untuk menghapus dan mengganti parent dari elemen yang dipilih. $(selector).unwrap() C. LANGKAH PERCOBAAN: 1. Get Content dan Set Content. Contoh sederhana dalam melakukan manipulasi HTML dengan jquery menggunakan metode html dapat dilihat dari contoh program berikut ini: 1. <html> 2. <head> 3. <script type="text/javascript" src="jquery min.js"></script> 4. <script type="text/javascript"> 5. $(function(){ 6. $("#lihat").click(function(){ 7. var isinya = $("#paragraf").html(); 8. alert(isinya); 9. }); 10. $("#isikan").click(function(){ 11. var isilagi = $("#isi").val(); 12. alert(isilagi); 13. $("#paragraf").html(isilagi); 14. }); 15. }); 16. </script> 17. <body> 18. <button id=lihat>lihat</button> 19. <p id=paragraf> 20. jquery mempunyai kemampuan yang powerfull dalam hal memanipulasi, mengambil atau menambah konten, dan sebagainya terhadap HTML 21. </p> 22. Teks : 23. <input type=text id=isi> 24. <p> 25. <button id=isikan>isikan</button> 26. </body> 27. </html> Penjelasan: Baris 3. Menyertakan file jquery kedalam kode javascript. Baris 6-8. Membuat fungsi onclick dengan id lihat, apabila event onclick terjadi, makakonten dari selector id paragraf akan diambil, yang kemudian akan ditampilkan dalam bentuk alert. Manipulasi HTML dan CSS dengan jquery 17

18 Baris Membuat fungsi onclick dengan id isikan, apabila event onclick terjadi, maka akan mengambil nilai dari <input type=text id=isi> yang kemudian akan ditampilkan dalam bentuk alert, dan memasukkannya ke variabel isilagi. Baris 18. Membuat button lihat Baris Membuat paragraf Baris 23. Membuat form untuk input isi Baris 25. Membuat button isikan Catatan: Untuk menyertakan library jquery, terdapat dua cara yaitu: 1. Salinan yang disajikan melalui server publik (CDN). Contoh: <script src="//code.jquery.com/jquery min.js"></script> 2. Ditautkan dalam sebuah laman web ke salinan pada server local (pada computer clien). Jika library terdapat pada komouter clien, lebih baik letakkan pada satu folder dengan file html. Contoh: <script type="text/javascript" src="jquery min.js"></script> Hasil: Gambar 15.8 Tampilan awal percobaan Manipulasi HTML dengan metode html() dan val() Gambar 15.8 merupakan tampilanawal hasil percobaan manipulasi HTML menggunakan metode html() dan val(). Manipulasi HTML dan CSS dengan jquery 18

19 Gambar 15.9 Gambar hasil percobaan manipulasi HTML dengan metode html() dan val Pada gambar 15.9menampilkan hasil saat kita memasukkan teks pada form teks dan menekan tombol isikan, maka akan tampil alert yang menampilkan teks yang kita masukkan pada form. Gambar Gambar hasil akhir percobaan manipulasi HTML dengan metode html() dan val() Gambar 15.10menampilkan teks ISI yang merupakan teks yang telah diinputkan pada form. Teks ISI menggantikan teks jquery mempunyai kemampuan yang Manipulasi HTML dan CSS dengan jquery 19

20 powerfull dalam hal memanipulasi,mengambil atau menambah konten, dan sebagainya terhadap HTML yang diset sebelumnya. Tampilan ini akan tampil saat button OK pada alert ditekan. 2. Get attribute dan Set attribute Berikut ini adalah contoh kode untuk melakukan percobaan manipulasi HTML get attribute dan set attribute dengan metode attr() untuk mengambil atribut dari elemen yang dipilih. 1. <html> 2. <head> 3. <script type="text/javascript" src="jquery min.js"></script> 4. <script> 5. $(document).ready(function(){ 6. $("button").click(function(){ 7. alert($("#a").attr("href")); 8. }); 9. }); 10. </script> </head> <body> 15. <p><a href=" id="a">google</a></p> <button>tampilkan Alamat Google</button> </body> 20. </html> Penjelasan: Baris 3. Menyertakan file jquery kedalam kode javascript. Baris 5.Mengikat sebuah fungsi ke ready event dari sebuah dokumen (ketika dokumen tersebut selesai diunduh) Baris 6. Membuat fungsi onclick umtuk elemen button, dan apabila event onclick terjadi, maka akan ditampilakn alert yang nilainya diambil dari selector id a, yang mengambil atribut dari href. Baris 15. Membuat sebuah paragraf yang bertindak sebagai link untuk mengakses google. Baris 17. Membuat button dengan teks Tampilkan alamat Google. Manipulasi HTML dan CSS dengan jquery 20

21 Hasil: Gambar Tampilan utama manipulasi HTML dengan metode attr() Pada gambar 15.11, terdapat teks Google yang merupakan link untuk sedangkan tombol Tampilkan Alamat Google akan berfungsi untuk menampilkan alamat Google. Gambar 15.12Tampilan hasil percobaan manipulasi HTML dengan metode attr() Gambar merupakan tampilan percobaan manipulasi HTML dengan metode attr() saat tombol Tampilkan Alamat Google ditekan, maka akan tampil alert yang berisi alamat Google. Manipulasi HTML dan CSS dengan jquery 21

22 3. Adding inner Content Berikut ini adalah contoh percobaan dalam menyisipkan konten diakhir elemen HTML menggunakan metode append() 1. <html> 2. <head> 3. <script type="text/javascript" src="jquery min.js"></script> 4. <script type="text/javascript"> 5. $(document).ready(function(){ 6. $("#btn1").click(function(){ 7. $("p").append(" <b>appended text</b>."); 8. }); $("#btn2").click(function(){ 11. $("ol").append("<li>appended item</li>"); 12. }); 13. }); 14. </script> 15. </head> 16. <body> <p>this is a paragraph.</p> 19. <p>this is another paragraph.</p> <ol> 22. <li>list item 1</li> 23. <li>list item 2</li> 24. <li>list item 3</li> 25. </ol> <button id="btn1">prepend text</button> 28. <button id="btn2">prepend list item</button> 29. </html> Penjelasan: Baris 3. Menyertakan file jquery kedalam kode javascript. Baris 5. Mengikat sebuah fungsi ke ready event dari sebuah dokumen (ketika dokumen tersebut selesai diunduh) Baris 6-7. Membuat event onclick untuk elemen dengan id = btn1, apabila event onclick dipicu, maka di akhir elemen p akan disisipi kata appended text. Baris Membuat event onclick untuk elemen dengan id = btn2, apabila event onclick dipicu, maka di akhir elemen ol akan disisipi kata appended text. Baris Membuat isi paragraph (elemen <p>). Baris Membuat list (elemen <ol>) Baris 27. Membuat button preppend text dengan id= btn1. Baris 28. Membuat button preppend list item dengan id= btn2. Manipulasi HTML dan CSS dengan jquery 22

23 Hasil: Gambar Tampilan awal percobaan manipulasi html dengan metode append() Gambar merupakan tampilan awalhasil percobaan manipulasi html adding inner content dengan metode append(). Gambar Tampilan hasil percobaan Gambar manipulasi html dengan metode append(), saat button prepend text ditekan. Gambar menampilkan adanya penambahan text baru yaitu Appended Text diakhir elemen paragraph yang dibuat sebelumnya.hal ini terjadi saat button prepend text ditekan. Manipulasi HTML dan CSS dengan jquery 23

24 Gambar Tampilan hasil percobaan Gambar manipulasi html dengan metode append(), saat button prepend list item ditekan. Gambar menampilkan adanya penambahan list baru yaitu Appended item diakhir elemen list item yang dibuat sebelumnya. Hal ini terjadi saat button prepend list item ditekan. 4. Copy, Replace, Remove Berikut ini merupakan contoh percobaan manipulasi elemen HTML menggunakan metode remove() yang berfungsi untuk menghapus elemen html yang dipilih. 1. <html> 2. <head> 3. <script type="text/javascript" src="jquery min.js"></script> 4. <script> 5. $(document).ready(function(){ 6. $("button").click(function(){ 7. $("#div1").remove(); 8. }); 9. }); 10. </script> 11. </head> 12. <body> 13. <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;"> 14. This is some text in the div. 15. <p>this is a paragraph in the div.</p> 16. <p>this is another paragraph in the div.</p> 17. </div> 18. <br> <button>remove div element</button> </body> 23. </html> Manipulasi HTML dan CSS dengan jquery 24

25 Penjelasan: Baris 3. Menyertakan file jquery kedalam kode javascript. Baris 5. Mengikat sebuah fungsi ke ready event dari sebuah dokumen (ketika dokumen tersebut selesai diunduh) Baris 6-7. Membuat selector button dengan event onclick, apabila event onclick berjalan(tombol diklik) maka isi dari selector p akan terhapus dengan pengaturan yang sudah dibuat ("<div></div>"). Baris 13. Membuat style untuk wrapping yaitu dengan background warna kuning, tinggi 100 px, lebar 300px, tebal border 1px berwarna hitam solid. Baris Isi dari elemen <p>. Baris 20. Membuat button dengan teks Remove div element Hasil: Gambar Tampilan hasil dari percobaan manipulasi HTML dengan metode remove(). Gambar merupakan tampilan awal hasil percobaan manipulasi elemen HTML dengan metode remove(). Manipulasi HTML dan CSS dengan jquery 25

26 Gambar Tampilan percobaan setelah button ditekan Gambar merupakan tampilan hasil percobaan saat tombol Remove div elemen ditekan, maka kotak berisi teks yang sebelumnya akan hilang. 5. Manipulasi Properti CSS Berikut ini adalah contoh percobaan manipulasi properti CSS menggunakan metode addclass() yang menunjukkan bagaimana menambahkan elemen class yang berbeda. Dan dapat memilih beberapa elemen serta menambah class. 1. <html> 2. <head> 3. <script type="text/javascript" src="jquery min.js"></script> 4. <script> 5. $(document).ready(function(){ 6. $("button").click(function(){ 7. $("h1, h2, p").addclass("blue"); 8. $("div").addclass("important"); 9. }); 10. }); 11. </script> 12. <style> 13..important { 14. font-weight: bold; 15. font-size: xx-large; 16. } blue { 19. color: blue; 20. } 21. </style> 22. </head> 23. <body> <h1>heading 1</h1> 26. <h2>heading 2</h2> 27. <p>this is a paragraph.</p> Manipulasi HTML dan CSS dengan jquery 26

27 28. <p>this is another paragraph.</p> 29. <div>this is some important text!</div><br> <button>add classes to elements</button> 32. </body> 33. </html> Penjelasan: Baris 3. Menyertakan file jquery kedalam kode javascript. Baris 5. Mengikat sebuah fungsi ke ready event dari sebuah dokumen (ketika dokumen tersebut selesai diunduh) Baris Membuat selector button dengan event onclick, apabila event onclick berjalan(tombol diklik) maka tampilan isi dari selector h1, h2 dan p akan sesuai dengan script class blue, sedangkan ta,pilan selector div akan berubah sesuai dengan script important yang telah dibuat. Baris merupakan scriptclass important yang mengatur selector div. Baris Merupakan script class blue untuk mengatur selector h1, h2, dan p. Baris Merupakan konten isi dari selector h1, h2, p dan div. Baris 31. Membuat button dengan teks Add classes to elements Hasil: Gambar Tampilan awal percobaan manipulasi CSS dengan metode AddClass() Gambar 15.18, merupakan tampilan awal dari percobaan manipulasi properti CSS dengan metode addclass(). Manipulasi HTML dan CSS dengan jquery 27

28 Gambar Tampilan hasil percobaan manipulasi CSS dengan metode AddClass(). Gambar merupakan tampilan hasil percobaan manipulasi properti CSS dengan metode AddClass() setelah tombol ditekan. Terlihat bahwa font pada tampilan tersebut berbeda dengan tampilan awal, yaitu warna font berubah menjadi biru dan pada teks terakhir, ukuran fontnya lebih besar dari sebelumnya. 6. Manipulasi CSS size Berikut ini adalah contoh code untuk melakukan manipulasi CSS size menggunakan metode width() dan height(). 1. <html> 2. <head> 3. <script type="text/javascript" src="jquery min.js"></script> 4. <script type="text/javascript"> 5. $(document).ready(function(){ 6. $("#tombol1").click(function(){ 7. $("#kotak").width("300px"); 8. $("#kotak").height("300px"); 9. }); 10. $("#tombol2").click(function(){ 11. var nilai = $("#kotak").width(); 12. alert(nilai); 13. }); 14. }); 15. </script> 16. </head> 17. <body> 18. <div id=kotak style="background-color:yellow;width:100px;height:100px;"> 19. Hello 20. </div> 21. <p> 22. <button id="tombol1">ubah ukuran kotak</button> 23. <button id="tombol2">ambil nilai ukuran kotak</button> 24. </body> 25. </html> Manipulasi HTML dan CSS dengan jquery 28

29 Penjelasan: Baris 3. Menyertakan file jquery kedalam kode javascript. Baris 5. Mengikat sebuah fungsi ke ready event dari sebuah dokumen (ketika dokumen tersebut selesai diunduh) Baris 6-8. Membuat tombol dengan id tombol1 dengan fungsi onclick, dan apabila event onclick terjadi, maka akan ditampilakan gambar kotak dengan ukuran lebar 300px dan tinggi 300 px. Baris Membuat tombol dengan id tombol2 dengan fungsi onclick, dan apabila event onclick terjadi, maka akan ditampilakan alert tentang ukuran lebar kotak. Baris 18. Membuat tampilan dengan id kotak, background berwarna kuning, lebar 100px, dan tinggi 100px. Baris 19. Menampilkan teks dalam kotak. Baris 22. Membuat button dengan teks Ubah ukuran kotak. Baris 23. Membuat button dengan teks Ambil ukuran kotak. Hasil: Gambar Tampilan awal percobaan manipulasi size CSS Pada gambar 15.20, merupakan tampilan awal percobaan manipulasi size CSS yang menampilkan kotak berwarna kuning dengan 2 buah tombol yang berfungsi untuk mengubah ukuran kotak dan menampilkan nilai dari kotak tersebut. Manipulasi HTML dan CSS dengan jquery 29

30 Gambar Tampilan percobaan manipulasi size CSS saat button ubah ukuran kotak diklik Pada gambar tampak bahwa ukuran kotak berubah menjadi lebih besar, hal ini terjadi setelah tombol ubah ukuran kotak diklik. Gambar Tampilan percobaan manipulasi size CSS saat button ambil nilai ukuran kotak diklik Pada gambar tampak bahwa terdapat alert yang menampilkan ukuran kotak saat ini, hal ini terjadi setelah tombol ambil nilai ukuran kotak diklik. Manipulasi HTML dan CSS dengan jquery 30

31 7. Manipulasi Posisi CSS Berikut ini adalah contoh percobaan untuk melakukan manipulasi posisi CSS menggunakan metode offset() 1. <html> 2. <head> 3. <style> 4. #div1{ 5. background-color : pink; 6. width : 100px; 7. height : 100px; 8. position : relative; 9. left : 300; 10. } 11. </style> 12. <script type="text/javascript" src="jquery min.js"></script> 13. <script type="text/javascript"> 14. $(document).ready(function(){ 15. $("#tombol").click(function(){ 16. posisi=new Object(); 17. posisi.left=$("#x").val(); 18. posisi.top=$("#y").val(); 19. $("#div1").offset(posisi); 20. pos = $("#div1").offset(); 21. alert("x="+pos.left+",y="+pos.top); }); 22. }); 23. </script> 24. </head> 25. <body> 26. <div id=div1> 27. Hello World! 28. </div> 29. x = <input type=text size=5 id=x><br> 30. y = <input type=text size=5 id=y><br> 31. <button id=tombol>set Offset</button> 32. </body> 33. </html> Penjelasan: Baris Membuat style dg background warna pink, lebar=100px, tinggi=100px,posisi = relative, posisi dari kiri 300 Baris 12. Menyertakan file jquery kedalam kode javascript. Baris 14. Mengikat sebuah fungsi ke ready event dari sebuah dokumen (ketika dokumen tersebut selesai diunduh) Baris 15. Membuat event onclick untuk elemen dengan id = tombol. Baris 17. Mengambil nilai posisi dari kiri dari elemen dengan id = x. Baris 18. Mengambil nilai posisi dari atas dari elemen dengan id = y. Baris 19. Mengatur posisi tampilan elemen dengan id= div1 yang nilainya telah didapat dari elemen dengan id = x dan y Baris 20. Mengambil koordinat offset dari elemen dengan id= div1. Baris 21. Menampilkan alert yang berisi koordinat offset x dan y. Baris Membuat teks Hello World! pada elemen dengan id = div1. Manipulasi HTML dan CSS dengan jquery 31

32 Baris Membuat form input untuk elemen dengan id = x dan y, dengan ukuran 5 Baris 31. Membuat button set offset untuk elemen dengan id = tombol. Hasil: Gambar Tampilan awal percobaan manipulasi posisi css dengan metode offset() Gambar merupakan tampilan awal dari percobaan manipulasi posisi css dengan metode offset, dalam ambar tampak bahwa posisi kotak berada agak ke sisi sebelah kiri karena sebelumnya setting posisnya adalah 300 dari kiri. Gambar Hasil percobaan manipulasi posisi css dengan metode offset() Manipulasi HTML dan CSS dengan jquery 32

33 Gambar merupakan hasil dari percobaan manipulasi posisi css dengan metode offset(), yang menampilkan alert posisi kotak dari kiri (x) dan dari atas (y), yang didapat dari inputan pada form. Alert ditampilkan setelah button set offset ditekan. 8. Manipulasi html dengan metode wrap() Berikut ini adalah contoh percobaan manipulasi elemen HTML menggunakan metode wrap(). 1. <html> 2. <head> 3. <script type="text/javascript" src="jquery min.js"></script> 4. <script> 5. $(document).ready(function(){ 6. $("button").click(function(){ 7. $("p").wrap("<div></div>"); 8. }); 9. }); 10. </script> 11. <style> 12. div{background-color: yellow;} 13. </style> 14. </head> 15. <body> <p>this is a paragraph.</p> 18. <p>this is another paragraph.</p> <button>wrap a div element around each p element</button> </body> 23. </html> Penjelasan: Baris 3. Menyertakan file jquery kedalam kode javascript. Baris 5. Mengikat sebuah fungsi ke ready event dari sebuah dokumen (ketika dokumen tersebut selesai diunduh) Baris 6-7. Membuat selector button dengan event onclick, apabila event onclick berjalan(tombol diklik) maka isi dari selector p akan di-wrap dengan style yang sudah dibuat ("<div></div>");. Baris 12. Membuat style untuk wrapping yaitu dengan background warna kuning. Baris Isi dari elemen <p>. Baris 20. Membuat button dengan teks Wrap a div element around each p element Manipulasi HTML dan CSS dengan jquery 33

34 Hasil: Gambar Tampilan awal percobaan manipulasi HTML dengan metode wrap() Gambar merupakan Tampilan awal percobaan manipulasi HTML dengan metode wrap(), dimana terdapat 2 teks dan 1 tombol yang berfungsi untuk memberi wrap pada kedua teks tersebut. Gambar Tampilan hasil dari percobaan manipulasi HTML dengan metode wrap() Pada gambar berwarna kuning, hal ini terjadi karena tombol diklik. terihat adanya background pada kedua teks yang Manipulasi HTML dan CSS dengan jquery 34