10 Kumpulan Code Livery atau Skin Mobil Fr Legends Tanpa Password

Memanipulasi CSS

jQuery memiliki beberapa metode untuk manipulasi CSS.
Metode addClass () menambahkan satu atau lebih kelas ke elemen yang dipilih.
Sebagai contoh:
HTML:

<div>Beberapa kata</div>

Css:

.header {
  color: blue;
    font-size:x-large;
    }

JavaScript:

$("div").addClass("header");

Kode di atas memberikan elemen div "header" class.
Untuk menentukan beberapa kelas dalam metode addClass (), pisahkan saja menggunakan spasi. Misalnya, $ ("div"). AddClass ("class1 class2 class3").

Metode removeClass () menghapus satu atau lebih nama kelas dari elemen yang dipilih.
Sebagai contoh:

$("div").removeClass("red");

Kode di atas menghapus kelas "merah" dari elemen div.
Sekali lagi, beberapa nama kelas dapat ditentukan dengan memisahkannya menggunakan spasi.

toggleClass ()

Metode toggleClass () beralih antara menambahkan / menghapus kelas dari elemen yang dipilih, yang berarti bahwa jika kelas yang ditentukan ada untuk elemen, itu dihapus, dan jika tidak ada, ditambahkan.

Untuk mendemonstrasikan ini dalam tindakan, kami akan menangani acara klik tombol untuk beralih kelas. Kita akan belajar lebih banyak tentang peristiwa dan sintaksisnya dalam modul yang akan datang.
HTML:

<p>Some text</p>
<button>Toggle Class</button>

CSS:

.red {
  color:red;
    font-weight: bold;
    }

JavaScript:

$(function() {
  $("button").click(function() {
      $("p").toggleClass("red");
        });
        });

Properti CSS

Mirip dengan metode html (), metode css () dapat digunakan untuk mendapatkan dan menetapkan nilai properti CSS.
Sebagai contoh:
HTML:

<p>Some text</p>

Css:

p {
  background-color:red;
    color: white;
    }

JavaScript:

$(function() {
  alert($("p").css("background-color"));
    $("p").css("background-color", "blue");
    });

Kode di atas mengingatkan properti warna latar belakang paragraf dan kemudian mengaturnya menjadi biru.

Beberapa Properti

Untuk mengatur beberapa properti CSS, metode css () menggunakan sintaks JSON, yaitu:

css({"property":"value","property":"value",...});

Seperti yang Anda lihat, sintaks terdiri dari pasangan "properti": "nilai", yang dipisahkan koma dan dilampirkan dalam kurung keriting {}.
Sebagai contoh:

$("p").css({"color": "red", "font-size": "200%"});

Ini akan mengatur properti warna dan ukuran font dari paragraf.
Anda dapat menentukan sejumlah properti menggunakan sintaks JSON ini.

Ukuran

Metode width () dan height () dapat digunakan untuk mendapatkan dan mengatur lebar dan tinggi elemen HTML.

Mari atur lebar dan tinggi div ke 100px, serta atur warna latar untuknya:

$("div").css("background-color", "red");
$("div").width(100);
$("div").height(100);

Metode lebar () dan tinggi () mendapatkan dan mengatur dimensi tanpa bantalan, batas, dan margin.
Metode innerWidth () dan innerHeight () juga termasuk padding.
Metode outerWidth () dan outerHeight () termasuk padding dan borders.
Lihat gambar ini untuk memahami cara kerjanya:

Contoh berikut menunjukkan cara kerja metode:
HTML:

<div></div>

Css:

div {
  width: 300px;
    height: 100px;
      padding: 10px;
        margin: 20px;
          border: 3px solid blue;
            background-color: red;
              color: white;
              }

JavaScript:

$(function() {
  var txt = "";
    txt += "width: " + $("div").width() + " ";
      txt += "height: " + $("div").height() + "<br/>";
        txt += "innerWidth: " + $("div").innerWidth() + "  ";
          txt += "innerHeight: " + $("div").innerHeight() + "<br/>";
            txt += "outerWidth: " + $("div").outerWidth() + "  ";
              txt += "outerHeight: " + $("div").outerHeight();   $("div").html(txt);
  });

 
Jalankan kode untuk melihat nilai yang dikembalikan oleh metode dimensi.

DOM

Saat Anda membuka halaman web di browser, HTML halaman dimuat dan ditampilkan secara visual di layar.
Untuk mencapai hal ini, browser membangun Document Object Model (DOM) dari halaman itu, yang merupakan model berorientasi objek dari struktur logisnya.

DOM dokumen HTML dapat direpresentasikan sebagai kumpulan kotak:

DOM mewakili dokumen sebagai struktur pohon tempat elemen HTML saling terkait di dalam pohon.

Node dapat memiliki node anak. Node pada tingkat pohon yang sama disebut saudara.
jQuery traversing adalah istilah yang digunakan untuk menggambarkan proses bergerak melalui DOM dan menemukan (memilih) elemen HTML berdasarkan hubungannya dengan elemen lainnya.
jQuery memudahkan untuk melintasi DOM dan bekerja dengan elemen HTML.

Traversal DOM

Misalnya, pertimbangkan HTML yang diwakili oleh struktur berikut:

Elemen <html> adalah induk dari <body> dan leluhur dari semua yang ada di bawahnya.
Elemen <body> adalah induk dari elemen <h1> dan <a>.
Elemen <h1> dan <a> adalah elemen turunan dari elemen <body> dan turunan dari <html>.
Elemen <h1> dan <a> adalah saudara kandung (mereka berbagi orang tua yang sama).

Ringkasan
Seorang leluhur adalah orangtua, kakek nenek, kakek buyut, dan sebagainya.
Keturunan adalah anak, cucu, cicit, dan sebagainya.
Saudara kandung memiliki orangtua yang sama.

Memahami hubungan antara elemen-elemen DOM adalah penting untuk dapat melintasi DOM dengan benar.

jQuery memiliki banyak metode yang berguna untuk traversal DOM.
Metode parent () mengembalikan elemen induk langsung dari elemen yang dipilih. Sebagai contoh:
HTML:

<div> elemen div
   <p> paragraf </p>
</div>

JavaScript

var e = $("p").parent();
e.css("border", "2px solid red");

Kode di atas memilih elemen induk paragraf dan menetapkan batas merah untuknya.

Traversal DOM

Metode induk () hanya dapat melintasi satu tingkat di atas pohon DOM.
Untuk mendapatkan semua leluhur dari elemen yang dipilih, Anda dapat menggunakan metode parent (). Sebagai contoh:
HTML:

<body>  body
  <div style="width:300px;"> div
      <ul> ul
            <li> li
                    <p>paragraph</p>
                          </li>
                              </ul>
                                </div>
                                </body>

JavaScript:

$(function() {
  var e = $("p").parents();
    e.css("border", "2px solid red");
    });

Kode di atas menetapkan batas merah untuk semua orang tua paragraf.

Beberapa metode traversal yang paling sering digunakan disajikan di bawah ini:

Metode eq () dapat digunakan untuk memilih elemen tertentu dari beberapa elemen yang dipilih.
Misalnya, jika halaman berisi beberapa elemen div dan kami ingin memilih yang ketiga:
$("div").eq(2);

Nomor indeks mulai dari 0, jadi elemen pertama akan memiliki nomor indeks 0.

Hapus Elemen

Kami menghapus elemen yang dipilih dari DOM menggunakan metode remove (). Sebagai contoh:
HTML:

<p style="color:red">Red</p>
<p style="color:green">Green</p>
<p style="color:blue">Blue</p>

JavaScript

$("p").eq(1).remove();

Ini menghilangkan Hijau, elemen paragraf kedua.
Anda juga dapat menggunakan metode remove () pada beberapa elemen yang dipilih, misalnya $ ("p"). Remove () menghapus semua paragraf.
Metode jQuery remove () menghapus elemen yang dipilih, serta elemen turunannya.

Menghapus Konten
Metode kosong () digunakan untuk menghapus elemen turunan dari elemen yang dipilih. Sebagai contoh:
HTML:

<div>
   <p style="color:red">Red</p>
      <p style="color:green">Green</p>
         <p style="color:blue">Blue</p>
         </div>

Css:

div {
  background-color: aqua;
    width: 300px;
      height: 200px;
      }

JavaScript:

$("div").empty();

Ini menghapus ketiga elemen anak dari div, membiarkannya kosong.

Oke, sekian dulu artikel untuk pelajaran JQuery ke #3 yah, di JQuery ke #4 bakalan ending deh :(. Tapi tenang aja Sobat! Soalnya setelah ending akan saya buat artikel Sejarah JQuery nah sesudah itu kita istirahat dulu buat Bahasa Pemogramannya. Comment dan share jika bermanfaat Sobat! Jangan lupa hidupkan (Allow) notifikasinya ya!


Salam Tekno~