JQuery Itu Menyenangkan! #2

Hallo Sobat Tekno! Sesuai Tutorial JQuery sebelumnya yaitu JQuery Tutorial #1 Nah, sekarang kita masuk ke yang #2
Selamat Belajar Sobat Tekno!


Atribut
 dapat memanipulasi atribut yang ditetapkan ke elemen HTML dengan mudah melalui jQuery.
href, src, id, class, style adalah semua contoh atribut HTML.
Metode attr () digunakan untuk mendapatkan nilai atribut.
Sebagai contoh:
HTML:
<a href="https://teknologi-game.blogspot.com">

   Click here

   </a>


Javascript:
$(function() {
  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");

  });



Menghapus Atribut
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:
$("table").removeAttr("border");

$("table").removeAttr("class");
HTML:
<p>
  JQuery is <b>fun</b>
  </p>

JavaScript:
$(function() {
  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:
<div id="test">
   <p>some text</p>
   </div>

JavaScript:
$(function() {
  $("#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"

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.
Menambahkan Konten
Metode append () menyisipkan konten DI AKHIR elemen HTML yang dipilih.
Sebagai contoh:
HTML:
<p id="demo">Hi </p>

JavaScript:
$(function() {
  $("#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>");
    });

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");
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:
<p id="demo">Hello</p>

JavaScript:
$(function() {
  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~

4 Responses to "JQuery Itu Menyenangkan! #2"

CatatanMubaligh said...

Mantap kak, semangat terus buat artikelnya..

Cauull__ said...

Ok gan. Thanks

Muh.miftahudin said...

Pakek template apa ini gan?

Cauull__ said...

Viomagz by sugeng v3.2 gan + udah saya remake sedikit.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel