Tutorial Bagaimana Mempelajari jQuery, Semua hal baik datang dalam paket kecil dan begitu pula jQuery. jQuery adalah pustaka JavaScript kecil yang mengubah web menjadi pengalaman yang menghibur. Ini adalah salah satu pustaka JavaScript paling populer. Di blog Tutorial jQuery ini, Anda akan mempelajari pentingnya dan dasar-dasar jQuery.

Pentingnya JavaScript

JavaScript adalah bahasa web, digunakan untuk membuat web terlihat hidup dengan menambahkan gerakan ke dalamnya. Lebih tepatnya, ini adalah bahasa skrip yang memungkinkan Anda menerapkan hal / desain yang rumit dan indah di laman web. Ketika Anda melihat sebuah halaman web melakukan lebih dari sekadar duduk di sana dan menatap Anda, Anda dapat bertaruh bahwa halaman web tersebut menggunakan JavaScript.

Fitur JavaScript:

  • Itu membuat halaman web lebih interaktif dengan menambahkan gerakan dan grafik
  • Ini adalah bahasa Interpreted yang berarti Anda tidak memerlukan compiler untuk menjalankan JavaScript
  • JavaScript pada dasarnya adalah bahasa skrip sisi klien

Baca Juga : Apa Itu JavaScript? Uraian Dasar mengenai JavaScript buat Pemula

Mengapa menggunakan jQuery ?

Kita semua tahu bahwa ada 100-an kerangka kerja dan pustaka JavaScript di luar sana, tetapi mengapa jQuery berguna?

Berikut adalah daftar fitur yang membuat jQuery sangat efektif:

  • Sebagai permulaan, jQuery membuatnya sangat mudah untuk memanipulasi DOM. Untuk membuat aplikasi web lebih interaktif, pengembang web memanipulasi DOM & jQuery membuatnya sangat mudah untuk melakukannya
  • Komunitas penggunanya lebih beragam daripada pustaka JavaScript lainnya. Ini menyediakan dokumentasi terperinci yang merupakan semua kebutuhan pengembang
  • jQuery memiliki 1000 plugin yang tersedia secara gratis, yang meningkatkan pengalaman pengguna. Salah satu contohnya adalah AJAX (Asynchronous JavaScript And XML) yang mengembangkan situs yang responsif dan kaya fitur
  • jQuery menyediakan dukungan lintas-browser yang memungkinkan Anda menjalankan kode Anda di browser yang berbeda tanpa mengkhawatirkan masalah ketergantungan

Apa itu jQuery?

jQuery adalah Pustaka JavaScript yang efisien & cepat yang dibuat oleh John Resig pada tahun 2006. Moto jQuery adalah menulis lebih sedikit, melakukan lebih banyak, yang sangat tepat karena fungsinya berkisar pada penyederhanaan setiap baris kode. Di bawah ini adalah daftar fitur utama jQuery:

  • Menyederhanakan JavaScript : Menyederhanakan manipulasi DOM dan penanganan acara untuk pengembangan web yang cepat
  • Penanganan peristiwa : jQuery menawarkan cara yang efektif untuk menangkap berbagai macam peristiwa, seperti pengguna mengklik tautan, tanpa perlu mengacaukan kode HTML
  • Ringan : jQuery adalah pustaka yang ringkas dan ringan dengan ukuran sekitar 19KB
  • Animasi : Muncul dengan banyak efek animasi bawaan yang dapat Anda gunakan di aplikasi web Anda untuk membuatnya lebih interaktif

Install jQuery

Tidak ada penginstalan, ini lebih seperti mengunduh jQuery. Ada dua cara untuk menginstal jQuery:

  • Instalasi Lokal : Anda dapat langsung mengunduh pustaka jQuery dari situs web resmi mereka dan memasukkannya ke dalam kode HTML Anda
  • Tautkan ke CDN : Anda dapat menambahkan pustaka jQuery di kode HTML Anda dari Jaringan Pengiriman Konten

Di blog ini, saya akan menggunakan metode kedua. Ini tautan ke CDN, cukup salin dan tempel di dalam tag <script> di file HTML Anda:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.3.1.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fui%2F1.12.1%2Fjquery-ui.min.js%22%20integrity%3D%22sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU%3D%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<link href="<a href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css</a>" rel="stylesheet">

Sebelum melangkah lebih jauh, saya ingin menyebutkan bahwa saya menggunakan editor Kode Visual Studio untuk menulis kode saya dan saya akan menjalankan semua kode saya di browser Google Chrome. Google Chrome memiliki mesin JavaScript tertanam yang menjalankan semua perintah dasar. Yang harus Anda lakukan adalah membuka browser, klik kanan di mana saja pada ruang kosong dan pilih Inspect.

Ini membuka konsol JavaScript bagi Anda untuk menjalankan perintah Anda.

Model Objek Dokumen (DOM)

DOM adalah struktur pohon dari berbagai elemen HTML.

Dalam ilustrasi di atas:

  • <html> adalah leluhur dari semua elemen DOM lainnya
  • Elemen <head> dan <body> adalah turunan dari <html>
  • <title> adalah anak dari <head>
  • Elemen <h1> & <p> adalah turunan dari <body> dan <html>

Penting untuk memahami konsep di balik DOM untuk memanipulasi elemen DOM.

jQuery Selectors

jQuery Selectors digunakan untuk memilih dan memanipulasi elemen HTML dengan menggunakan fungsi “$ ()”. Dalam JavaScript biasa kami memiliki fungsi seperti document.getElementById, querySelectorAll, getElementByClass dan banyak fungsi rumit lainnya untuk melakukan ini. Tetapi di jQuery, fungsi “$ ()” menggantikan semua fungsi ini. Lihat sintaks di bawah ini:

$ (selector) .action ()

Mari kita lihat contohnya:

<!DOCTYPE html>
<html>
    <head>
        <title> jQuery Tutorial</title>
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.3.1.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fui%2F1.12.1%2Fjquery-ui.min.js%22%20integrity%3D%22sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU%3D%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <link href="<a href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css</a>" rel="stylesheet"
    </head>
    
<body>
    
<h1>jQuery Basics</h1>
   
</body>
</html>

Setelah Anda menjalankan kode di atas, buka konsol JavaScript dan mulai dengan mengetik “$” (fungsi selektor) untuk memeriksa apakah Anda telah berhasil menginstal jQuery. Ini harus mengembalikan fungsi seperti yang ditunjukkan di bawah ini :

Sekarang Anda telah menginstal jQuery, mari jalankan perintah berikut di konsol browser:

$(“h1”).css(“color”, “red”)

Perintah ini memilih tag <h1> dan menambahkan metode css () padanya, yang digunakan untuk memberi gaya pada tag <h1>, dalam hal ini warna <h1> diatur ke merah.

Ini adalah hasil akhirnya:

Dasar – dasar jQuery

Sekarang setelah Anda memiliki pemahaman dasar tentang jQuery, mari selami lebih dalam pemrograman jQuery. Saya akan membahas dasar-dasar berikut:

Metode jQuery
Acara jQuery
Efek jQuery
jQuery UI

Metode jQuery

Ada beberapa metode jQuery, saya akan membahas metode yang paling umum digunakan. Berikut daftar metode yang akan Anda pelajari:

Metode jQuery – sebelum ()

Metode jQuery before () digunakan untuk memasukkan konten yang ditentukan sebelum elemen yang dipilih. Lihat sintaks di bawah ini:

$ (selector) .before (content);

Mari kita lihat contohnya:

<!DOCTYPE html>
<html>
    <head>
        <title> jQuery Tutorial</title>
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.3.1.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fui%2F1.12.1%2Fjquery-ui.min.js%22%20integrity%3D%22sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU%3D%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <link href="<a href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css</a>" rel="stylesheet"
    </head>
    
<body>
    
<h1>jQuery Basics</h1>
    
 
    
<ul>
        
<li>Betta imbelis</li>
        
<li>Betta smaragdina</li>
        
<li>Mahachai betta</li>
    </ul>
  
</body>
</html>

Setelah Anda menjalankan kode di atas, buka konsol JavaScript dan ketik perintah berikut:

$("ul").before("
<h2>jenis cupang</h2>
")

Perintah ini memilih <ul> (daftar tidak berurutan) dan menambahkan tag <h2> yang bertuliskan “Anjing favorit saya !!” tepat sebelum tag <ul>.

Ini adalah hasil akhirnya:

Metode jQuery – setelah ()

Metode jQuery after () digunakan untuk memasukkan konten yang ditentukan setelah elemen yang dipilih. Lihat sintaks di bawah ini:

$ (selector) .after (konten);

Lihat kode yang sama yang digunakan untuk metode before () dan buka konsol JavaScript dan ketik perintah berikut:

$("ul").after("
<h2>All betta fish are adorable!!</h2>
")

Perintah ini memilih <ul> (daftar tidak berurutan) dan menambahkan tag <h2> yang mengatakan “Semua anjing menggemaskan !!” tepat setelah tag <ul>.

Metode jQuery – teks ()

Metode jQuery text () digunakan untuk mengatur atau mengembalikan konten teks dari elemen yang dipilih. Lihat sintaks di bawah ini:

$ (selector) .text ()

$ (selector) .text (konten)

Lihat kode yang sama yang digunakan untuk metode before () dan buka konsol JavaScript dan ketik perintah berikut:

$(“li”).text()
$(“p”).text(“Selamat datang di Tutorial jQuery yang menyenangkan ini”)

Perintah pertama memilih <li> (daftar) dan menggunakan metode text () untuk mengembalikan konten <li>. Perintah kedua memilih satu-satunya <p> tag dan menyetel atau mengganti konten dari tag <p> dengan “Selamat datang di Tutorial jQuery yang menyenangkan ini”.

Metode jQuery – html ()

jQuery html () metode digunakan untuk mengatur atau mengembalikan seluruh konten dari elemen yang dipilih. Lihat sintaks di bawah ini:

$ (selector) .html ()

$ (selector) .html (konten)

Lihat kode yang sama yang digunakan untuk metode before () dan buka konsol JavaScript dan ketik perintah berikut:

$("li:first").html()
$("li:last").html("
<li> gembala Jerman</li>
")

Perintah pertama memilih elemen pertama dari <li> (daftar) dan menggunakan metode html () untuk mengembalikan seluruh konten <li>. Perintah kedua memilih elemen terakhir dari tag <li> dan menyetel atau mengganti isinya dengan “Betta Gembala Jerman”.

Saya tahu Anda semua bertanya-tanya, apa perbedaan antara metode text () dan html ()? Nah, jalankan perintah di bawah ini dan lihat sendiri:

$("ul").text()
$("ul").html()

Metode jQuery – css ()

Metode jQuery css () digunakan untuk mendapatkan atau mengatur properti gaya untuk elemen yang dipilih. Lihat sintaks di bawah ini:

$ (selector) .css (nama properti);

$ (selector) .css (nama properti, nilai);

Lihat kode yang sama yang digunakan untuk metode before () dan buka konsol JavaScript dan ketik perintah berikut:

$("h1").css("background-color", "blue")
$("ul li").css("color", "green")

Perintah pertama memilih <h1> dan menerapkan warna latar belakang untuk itu. Perintah kedua memilih semua elemen dari tag <ul> dan menyetel warnanya menjadi hijau.

Metode jQuery – attr ()

Metode jQuery attr () digunakan untuk mengatur atau mengembalikan atribut dan nilai dari elemen yang dipilih. Lihat sintaks di bawah ini:

$ (selector) .attr (atribut)

$ (selector) .attr (atribut, nilai)

Mari kita lihat contoh, tetapi sebelum Anda menjalankan kode di bawah ini, hal yang perlu diperhatikan di sini adalah bahwa saya memuat tiga gambar anak anjing yang telah saya simpan di folder bernama “puppie” di dalam folder jQuery (berisi index.html file dan file css).

<!DOCTYPE html>
<html>
<head>
<title> jQuery Tutorial</title>
<link rel="stylesheet" type="text/css" href="index.css">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.3.1.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fui%2F1.12.1%2Fjquery-ui.min.js%22%20integrity%3D%22sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU%3D%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <link href="<a href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css</a>" rel="stylesheet"
    </head>
    
<body>
    
<h1>jQuery Basics</h1>
    
By benjaminsterling
 
    
<div class="puppers">
        
        <img src="puppie/goldie.jpg" alt="Goldie">
    
        <img src="puppie/husky.jpg" alt="Husky">
    
        <img src="puppie/boxer.jpg" alt="Boxer">
    
    </div>
</body>
</html>

Setelah Anda menjalankan kode di atas, buka konsol JavaScript dan ketik perintah berikut:

$(“img”).attr(“border”,”5px solid black”)

Perintah ini memilih semua gambar (img) dan menambahkan atribut yang disebut perbatasan ke setiap gambar dan menyetelnya menjadi hitam pekat dengan menggunakan metode attr ().

Hal yang perlu diperhatikan di sini adalah bahwa dalam kode saya telah menautkan file index.css yang menyelaraskan semua gambar secara berdampingan dan juga menyetel lebar dan tinggi gambar. Ini file index.css:

.puppers {
float:left;
}
img {
width: 300px;
height: 250px;
}

Metode jQuery – val()

Metode jQuery val () digunakan untuk mengatur atau mengembalikan nilai saat ini dari elemen yang dipilih. Lihat sintaks di bawah ini:

$ (selector) .val ()

$ (selector) .val (nilai)

Mari kita lihat contohnya:

<!DOCTYPE html>
<html>
    <head>
        <title> jQuery Tutorial</title>
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.3.1.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fui%2F1.12.1%2Fjquery-ui.min.js%22%20integrity%3D%22sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU%3D%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <link href="<a href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css</a>" rel="stylesheet"
    </head>
    
<body>
    
<h1>jQuery Basics</h1>
    
By benjaminsterling
 
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20%20%20%20%24(document).ready(function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(%22button%22).click(function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20alert(%22Value%3A%20%22%20%2B%20%24(%22%23sometext%22).val())%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
    <input type="text" id="sometext" value=" ">
    <button>Submit</button>   
</body>
</html>

Setelah Anda menjalankan kode di atas, buka konsol JavaScript dan ketik beberapa nilai ke dalam kotak input, nilai ini dikembalikan sebagai peringatan dengan menggunakan metode val ().

Metode jQuery – addClass ()

Metode addClass () digunakan untuk menambahkan satu atau lebih kelas ke elemen yang dipilih. Lihat sintaks di bawah ini:

$ (selector) .addClass (classname)

Mari kita lihat contohnya:

<!DOCTYPE html>
<html>
    <head>
        <title> jQuery Tutorial</title>
        <link rel="stylesheet" type="text/css" href="index.css">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.3.1.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fui%2F1.12.1%2Fjquery-ui.min.js%22%20integrity%3D%22sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU%3D%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <link href="<a href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css</a>" rel="stylesheet"
    </head>
    
<body>
    
<h1>jQuery Basics</h1>
    
By Benjaminsterling
 
    
<div class="puppers">
        
        <img src="puppie/goldie.jpg" alt="Goldie">
    
        <img src="puppie/husky.jpg" alt="Husky">
    
        <img src="puppie/boxer.jpg" alt="Boxer">
    
    </div>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(document).ready(function()%7B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22button%22).click(function()%7B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22img%22).addClass(%22styleclass%22)%3B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%20%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> 
    
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20.styleclass%20%7B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20border%3A%205px%20solid%20green%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
 
    <button>Try addClass() function</button>
</body>
</html>

sfafsfsafsfSetelah Anda menjalankan kode di atas, buka konsol JavaScript dan klik tombol “Coba addClass”, ini akan menambahkan kelas gaya ke semua gambar.

Baca Juga : Cara Yang Benar Untuk Install PhpBB Forum

Metode jQuery – removeClass ()

Metode jQuery removeeclass () menghapus satu atau lebih kelas ke elemen yang dipilih. Lihat sintaks di bawah ini:

$(selector).removeClass(classname)

Metode ini mirip dengan addClass, hanya saja ini akan menghapus kelas yang telah ditambahkan. Jalankan kode yang sama yang Anda jalankan untuk addClass dan buka konsol dan coba perintah di bawah ini dan lihat apa yang Anda dapatkan!

$(“img”).removeClass(“styleclass”)

Metode jQuery – toggleClass ()

Metode ini beralih antara menambahkan dan menghapus satu atau beberapa kelas ke elemen yang dipilih. Lihat sintaks di bawah ini:

$(selector).toggleClass(classname)

The toggleClass () adalah kombinasi dari addClass () dan removeClass (). Jalankan kode yang sama yang Anda jalankan untuk addClass dan buka konsol dan coba perintah di bawah ini dan lihat apa yang Anda dapatkan!

$(“img”).toggleClass(“styleclass”)