Hallo Sobat Tekno! Sesuai Tutorial JQuery sebelumnya yaitu JQuery Tutorial #1 Nah, sekarang kita masuk ke yang #2
Selamat Belajar Sobat Tekno!
dapat memanipulasi atribut yang ditetapkan ke elemen HTML dengan mudah melalui jQuery.
href, src, id, class, style adalah semua contoh atribut HTML.
href, src, id, class, style adalah semua contoh atribut HTML.
Metode attr () digunakan untuk mendapatkan nilai atribut.
Sebagai contoh:
HTML:
Sebagai contoh:
HTML:
<a href="https://teknologi-game.blogspot.com"> Click here </a>
Javascript:
Metode attr () juga memungkinkan kita untuk menetapkan nilai atribut dengan menetapkannya sebagai parameter kedua.
Sebagai contoh:
$(function() {
var val = $("a").attr("href");
alert(val);
});
// alerts "teknologi-game.blogspot.com"
var val = $("a").attr("href");
alert(val);
});
// alerts "teknologi-game.blogspot.com"
Metode attr () juga memungkinkan kita untuk menetapkan nilai atribut dengan menetapkannya sebagai parameter kedua.
Sebagai contoh:
$(function() {
$("a").attr("href", "http://www.jquery.com");
});
$("a").attr("href", "http://www.jquery.com");
});
Anda juga dapat menghapus atribut dari elemen HTML.
Metode removeAttr () digunakan untuk menghapus atribut elemen apa pun.
Dalam contoh di bawah ini kami menghapus atribut perbatasan dan kelas dari tabel:
Dapatkan Konten
Ada beberapa metode untuk memanipulasi konten elemen HTML melalui jQuery.
Metode html () digunakan untuk mendapatkan konten dari elemen yang dipilih, termasuk markup HTML.
Sebagai contoh:
JavaScript:
Metode html () digunakan untuk mendapatkan konten dari elemen yang dipilih, termasuk markup HTML.
Sebagai contoh:
$("table").removeAttr("border");
$("table").removeAttr("class");
HTML:$("table").removeAttr("class");
<p>
JQuery is <b>fun</b>
</p>
JQuery is <b>fun</b>
</p>
JavaScript:
$(function() {
var val = $("p").html();
alert(val);
});
// alerts "JQuery is <b>fun</b>"
var val = $("p").html();
alert(val);
});
// alerts "JQuery is <b>fun</b>"
Setel Konten
Metode html () dan teks () yang sama dapat digunakan untuk mengubah konten elemen HTML.
Konten yang akan ditetapkan disediakan sebagai parameter untuk metode ini, misalnya:
HTML:
JavaScript:
Konten yang akan ditetapkan disediakan sebagai parameter untuk metode ini, misalnya:
HTML:
<div id="test">
<p>some text</p>
</div>
<p>some text</p>
</div>
JavaScript:
$(function() {
$("#test").text("hello!");
});
$("#test").text("hello!");
});
val ()
Kita telah melihat dalam pelajaran sebelumnya bagaimana kita dapat memanipulasi konten elemen HTML menggunakan metode text () dan html ().
Metode lain yang bermanfaat adalah metode val (), yang memungkinkan kita untuk mendapatkan dan mengatur nilai bidang formulir, seperti kotak teks, dropdown, dan input serupa.
Sebagai contoh:
HTML:
<input type="text" id="name" value="Nama Sobat">
JavaScript:
$(function() {
alert($("#name").val());
});
//alerts "Nama Sobat"
alert($("#name").val());
});
//alerts "Nama Sobat"
Kesimpulan
Metode jQuery berikut tersedia untuk mendapatkan dan mengatur konten dan atribut elemen HTML yang dipilih:
text () mengatur atau mengembalikan konten teks dari elemen yang dipilih.
html () mengatur atau mengembalikan konten elemen yang dipilih (termasuk markup HTML).
val () menetapkan atau mengembalikan nilai bidang formulir.
attr () menetapkan atau mengembalikan nilai atribut.
removeAttr () menghapus atribut yang ditentukan.
Metode jQuery berikut tersedia untuk mendapatkan dan mengatur konten dan atribut elemen HTML yang dipilih:
text () mengatur atau mengembalikan konten teks dari elemen yang dipilih.
html () mengatur atau mengembalikan konten elemen yang dipilih (termasuk markup HTML).
val () menetapkan atau mengembalikan nilai bidang formulir.
attr () menetapkan atau mengembalikan nilai atribut.
removeAttr () menghapus atribut yang ditentukan.
Menambahkan Konten
Metode append () menyisipkan konten DI AKHIR elemen HTML yang dipilih.
Sebagai contoh:
HTML:
Metode append () menyisipkan konten DI AKHIR elemen HTML yang dipilih.
Sebagai contoh:
HTML:
<p id="demo">Hi </p>
JavaScript:
Metode jQuery after () dan before () menyisipkan konten SETELAH dan SEBELUM elemen HTML yang dipilih.
Sebagai contoh:
HTML:
JavaScript:
$(function() {
$("#demo").append("Sobat");
});
//Outputs "Hi Sobat"
$("#demo").append("Sobat");
});
//Outputs "Hi Sobat"
Metode jQuery after () dan before () menyisipkan konten SETELAH dan SEBELUM elemen HTML yang dipilih.
Sebagai contoh:
HTML:
<p id="demo">Hi</p>
JavaScript:
$(function() {
$("#demo").before("<i>Some Title</i>");
$("#demo").after("<b>Welcome</b>");
});
$("#demo").before("<i>Some Title</i>");
$("#demo").after("<b>Welcome</b>");
});
Menambahkan Elemen Baru
Metode append (), prepend (), before () dan after () juga dapat digunakan untuk menambahkan elemen yang baru dibuat.
Cara termudah untuk membuat elemen HTML baru dengan jQuery adalah sebagai berikut:
var txt = $("<p></p>").text("Hi");
Metode append (), prepend (), before () dan after () juga dapat digunakan untuk menambahkan elemen yang baru dibuat.
Cara termudah untuk membuat elemen HTML baru dengan jQuery adalah sebagai berikut:
var txt = $("<p></p>").text("Hi");
Kode di atas membuat elemen <p> baru, yang berisi teks Hai dan menetapkannya ke variabel yang disebut txt.
Sekarang, kita dapat menggunakan variabel itu sebagai parameter dari metode yang disebutkan di atas untuk menambahkannya ke HTML kita, misalnya:
HTML:
JavaScript:
Oke,demikian artikel kali ini Sobat, gimana belajarnya seru tidak? Yah, kalo Sobat belajarnya kurang seru! Sobat bisa mendengarkan musik sambil belajar. Itu dapat membuat Sobat santai dalam belajar.
Ya mumpung Social Dsitancing. Yaudah sampai jumpa di next arrikel ya sob!
Salam Tekno~
Sekarang, kita dapat menggunakan variabel itu sebagai parameter dari metode yang disebutkan di atas untuk menambahkannya ke HTML kita, misalnya:
HTML:
<p id="demo">Hello</p>
JavaScript:
$(function() {
var txt = $("<p></p>").text("Hi");
$("#demo").after(txt);
});
var txt = $("<p></p>").text("Hi");
$("#demo").after(txt);
});
Oke,demikian artikel kali ini Sobat, gimana belajarnya seru tidak? Yah, kalo Sobat belajarnya kurang seru! Sobat bisa mendengarkan musik sambil belajar. Itu dapat membuat Sobat santai dalam belajar.
Ya mumpung Social Dsitancing. Yaudah sampai jumpa di next arrikel ya sob!
Salam Tekno~
Mantap kak, semangat terus buat artikelnya..
ReplyDeleteOk gan. Thanks
DeleteViomagz by sugeng v3.2 gan + udah saya remake sedikit.
ReplyDelete