Pengenalan tentang jQuery
PENGENALAN TENTANG JQUERY. BY QUERYRI===> jQuery adalah pustaka JavaScript yang cepat, kecil, dan kaya fitur.
Itu membuat hal-hal seperti traversal dan manipulasi dokumen HTML, penanganan acara, dan animasi menjadi lebih mudah.
Semua kekuatan jQuery diakses melalui JavaScript, jadi memiliki pemahaman yang kuat tentang JavaScript sangat penting untuk memahami, menyusun, dan men-debug kode Anda.
===>
Pertama, mari kita lihat contoh manipulasi HTML dengan JavaScript.
Untuk mendapatkan elemen dengan id = "start" dan mengubah html menjadi "Go" kita perlu melakukan hal berikut:
var el = document.getElementById("start");
el.innerHTML = "Go";
===> Untuk melakukan manipulasi yang sama dengan jQuery, kita hanya perlu satu baris kode:
$("#start").html("Go");
===>
Hasil Telusur
Hasil Terjemahan
Inggris
Indonesia
You can download a copy of the jQuery library from www.jquery.com, or, as an alternative, you can include it from a CDN (Content Delivery Network), like Google or Microsoft.
We will use the CDN from the official jQuery website.
To start using jQuery, we first need to add it to the head of our HTML document using the script tag:
Anda dapat mengunduh salinan perpustakaan jQuery dari www.jquery.com, atau, sebagai alternatif, Anda dapat memasukkannya dari CDN (Content Delivery Network), seperti Google atau Microsoft.
Kami akan menggunakan CDN dari situs web jQuery resmi.
Untuk mulai menggunakan jQuery, pertama-tama kita harus menambahkannya ke kepala dokumen HTML menggunakan tag skrip:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
</body>
</html>
===>
Ini adalah praktik yang baik untuk menunggu dokumen HTML dimuat sepenuhnya dan siap sebelum bekerja dengannya.
Untuk itu kami menggunakan acara siap dari objek dokumen:
$(document).ready(function() {
// jQuery code goes here
});
===>
$ Digunakan untuk mengakses jQuery. Dari sini, kode mengakses objek dokumen dan menentukan fungsi yang akan dipanggil ketika acara siap dokumen dipecat.
Ini mencegah kode jQuery dari menjalankan sebelum dokumen selesai memuat.
Karena kode di atas digunakan di hampir semua kasus ketika menggunakan jQuery, ada jalan pintas yang berguna untuk menulisnya:
$(function() {
// jQuery code goes here
});
===>
Sekarang, dengan memiliki pustaka jQuery di bagian kepala kami dan telah menentukan acara siap dokumen, kita dapat memulai manipulasi jQuery pertama kami! Mari kita ubah konten elemen div.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<div id="start">Start</div>
</body>
</html>
Java script:
$(function() {
$("#start").html("Go!");
});
===>
jQuery digunakan untuk memilih (permintaan) elemen HTML dan melakukan "aksi" padanya.
Sintaks dasarnya adalah: $ ("selector"). Action ()
- $ mengakses jQuery.
- (pemilih) menemukan elemen HTML.
- Tindakan () kemudian dilakukan pada elemen
$("p").hide() // hides all <p> elements
$(".demo").hide() // hides all elements with class="demo"
$("#demo").hide() // hides the element with id="demo"
Melihat kembali kode dari contoh sebelumnya:
$("#start").html("Go!");
===>
Mari kita lihat semua penyeleksi jQuery.
Seperti yang Anda lihat dalam pelajaran sebelumnya, pemilih jQuery mulai dengan tanda dolar dan tanda kurung: $ ().
Pemilih paling dasar adalah pemilih elemen, yang memilih semua elemen berdasarkan nama elemen.
$("div") // selects all <div> elements
Berikutnya adalah pemilih id dan kelas, yang memilih elemen dengan id dan nama kelas mereka:
$("#test") // select the element with the id="test"
$(".menu") //selects all elements with class="menu"
Anda juga dapat menggunakan sintaks berikut untuk penyeleksi
===>
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;
}
Js:
$(function() {
$("button").click(function() {
$("p").toggleClass("red");
});
});
===>
Ukuran
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;
}
Js:
$(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);
});
===>
Daftar yang Harus Dilakukan
Mari kita buat proyek daftar yang harus dilakukan menggunakan konsep yang telah kita pelajari.
Daftar yang Harus Dilakukan akan dapat menambahkan item baru ke daftar, serta menghapus item yang ada.
Pertama, kami membuat HTML:
<h1>My To-Do List</h1>
<input type="text" placeholder="New item" />
<button id="add">Add</button>
<ol id="mylist"></ol>
===>
DOM
Saat Anda membuka halaman web apa pun di browser, HTML halaman dimuat dan ditampilkan secara visual di layar.
Untuk mencapai 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.
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;
}
Js:
$("div").empty();
===>
Ukuran
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;
}
Js:
$(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);
});
Sekian dari saya maaf jika ada yang kurang,Mohon di maklumi🌸asalamualaikum😇
Komentar
Posting Komentar
Jangan komentar yang aneh aneh ya guys><