Recent Posts

    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~

    2 Komentar untuk "JQuery Itu Menyenangkan! #2"

    Harap perhatikan etika dalam berkomentar:

    1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata-kata.
    2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan artikel pada halaman ini.
    3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
    4. Jika sempat, semua komentar anda akan saya balas.

    Terima kasih atas perhatiannya. Terima kasih sudah berkunjung!

    Popular Posts

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Bawah Artikel