Cara Menjalankan Kode jQuery – Seperti yang telah kita diskusikan, jQuery sebenarnya adalah JavaScript. Oleh karena itu, kode tertulis juga merupakan kode JavaScript. jQuery “mudah” untuk menggunakan berbagai fungsi bawaan untuk menulis JavaScript.

Cara Menjalankan Kode jQuery

Cara Menjalankan Kode jQuery
duniailkom.com

 

benjaminsterling – Untuk memasukkan kode JavaScript dengan jQuery’flavor ‘, cara paling umum adalah meletakkannya setelah tag <script> yang digunakan untuk memanggil file jQuery, seperti yang ditunjukkan pada contoh berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Belajar jQuery Benjaminsterling</title>
<script src=”jquery-2.1.4.js”></script>
<script>
// kode JavaScript serta jQuery disini
</script>
</head>
<body>
</body>
</html>

Dengan menggunakan “template” di atas, kita sebenarnya dapat menjalankan fungsi jQuery dengan segera. Namun, setiap kode jQuery selalu berisi 1 fungsi, event ready ().
Definisi acara siap () atau acara siap dokumen

Untuk memahami fungsi jQuery ready () atau secara formal dikenal sebagai “acara siap dokumen”, kita harus memahami cara kerja JavaScript.

Baca Juga : Pengertian jQuery Dan Penggunaannya

Secara sederhana, JavaScript Digunakan untuk memproses objek HTML, seperti paragraf, tombol, formulir, gambar, dll. Jika kita meletakkan kode JavaScript di awal (di bagian <head>), kemungkinan besar objek HTML tersebut belum tersedia. Ini terjadi karena bagian <body> hanya diproses setelah bagian <head>. Salah satu solusinya adalah dengan meletakkan kode JavaScript di akhir halaman, sebelum tag </body>. Tetapi jQuery memiliki solusi yang lebih elegan, yaitu event ready (). Peristiwa jQuery ready () mensimulasikan efek peristiwa JavaScript Onload, tetapi lebih efisien. Dengan memakai fungsi ready ( ) ‘jQuery’, kode JavaScript baru akan dijalankan setelah browser web menyelesaikan pemrosesan markup HTML tetapi sebelum file eksternal (seperti gambar). Oleh karena itu, kode JavaScript diproses lebih awal dari peristiwa JavaScript Onload bawaan.

Fungsi ready () dari jQuery ditulis sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Belajar jQuery Benjaminsterling</title>
<script src=”jquery-2.1.4.js”></script>
<script>
$(document).ready(function() {
// Kode ‘jQuery’ serta ‘JavaScript’ disini
});
</script>
</head>
<body>
</body>
</html>

Kode JavaScript dalam fungsi $ (document) .ready (function ()) akan dijalankan setelah browser web memproses semua tag HTML. Oleh karena itu, kita dapat menghindari kesalahan yang disebabkan oleh tidak tersedianya objek yang ingin kita manipulasi.

Jika Anda melihat tutorial jQuery, hampir semua kode akan ada di acara ready () ini.

Misalnya saya akan membuat kode program sederhana, ketika tombol HTML di klik akan muncul kalimat. Ini adalah kode programnya:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Belajar jQuery Benjaminsterling</title>
<script src=”jquery-2.1.4.js”></script>
<script>
$(document).ready(function() {
$(“#tombol”).click(function() {
$(this).after(‘<p>Sedang Belajar jQuery di Benjaminsterling</p>’);
});
});
</script>
</head>
<body>
<h1>Belajar jQuery di Benjaminsterling</h1>
<button id=”tombol”>Click Me!</button>
</body>
</html>

Saya akan membahas tujuan kode di atas pada tutorial berikutnya. Di sini, kami hanya fokus untuk memungkinkan Anda menjalankan kode jQuery.

Untuk menjalankannya, simpan kode program di atas pada folder yang sama dengan file jquery-2.1.4.js. Misalnya saya menyimpannya di file spirit.html di folder learn_jquery,

Selamat! Anda telah menjalankan kode jQuery. Dalam tutorial jQuery Benjaminsterling berikutnya, saya akan memperkenalkan aturan dasar penulisan jQuery.

Aturan Dasar Penulisan Kode jQuery

Di seluruh penggunaan jQuery, hampir selalu sebelum tanda $. Tanda dolar “$” (tanda dolar) adalah jalan pintas untuk Objek jQuery. Di objek jQuery ini, semua fungsi jQuery berada di dalamnya. Misalnya, untuk mencari elemen HTML dengan atribut id = “button”, kita dapat menulis:
$ (“tombol #”)

Jika karena alasan tertentu kita tidak dapat menggunakan tanda $ (biasanya karena bertentangan dengan perpustakaan lain), kita dapat menggunakan jQuery () sebagai berikut:
jQuery (“#button”)
Definisi Aksi jQuery / jQuery Event

Agar dapat menggunakan elemen HTML untuk melakukan “operasi tertentu”, kita hanya perlu menulis Objek jQuery dan menghubungkan Aksi jQuery (juga dikenal sebagai jQuery Event).

Format dasarnya adalah sebagai berikut:
$ (selector) .action ()

Selektor digunakan untuk menemukan elemen HTML mana yang akan dimanipulasi. Ini bisa berupa paragraf <p>, gambar <img> atau sesuatu yang lebih kompleks, seperti elemen <tr> pertama dari tabel kedua. Dalam tutorial berikutnya, kami akan memperkenalkan jenis-jenis selektor jQuery.

Kita dapat melakukan operasi pada elemen HTML, seperti menyembunyikan, menampilkan, mengubah warna, menambahkan elemen baru, dll. Operasi mirip dengan kejadian di JavaScript, tetapi banyak fungsi lain telah ditambahkan. Di jQuery, suatu tindakan dapat ditautkan ke tindakan lain, juga dikenal sebagai tautan.

Ini adalah contoh penulisan objek, penyeleksi, dan operasi jQuery:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Belajar jQuery Benjaminsterling</title>
<script src=”jquery-2.1.4.js”></script>
<script>
$( document ).ready(function() {
$( “#tombol_hide” ).click(function() {
$(“h1”).hide();
});

$( “#tombol_show” ).click(function() {
$(“h1”).show();
});

$( “#tombol_small” ).click(function() {
$(“h1”).css(“font-size”,”20px”);
});

$( “#tombol_red” ).click(function() {
$(“h1”).css( “color”, “red” );
});
});
</script>
</head>
<body>
<h1>Belajar jQuery di Benjaminsterling</h1>
<button id=”tombol_hide”>Sembunyikan</button>
<button id=”tombol_show”>Tampilkan</button>
<button id=”tombol_small”>Perkecil</button>
<button id=”tombol_red”>Merahkan</button>
</body>
</html>

Untuk saat ini, Anda dapat mengabaikan arti kode di atas. Di sini, saya hanya menunjukkan cara menulis kode jQuery, terutama $ (“h1”). Sembunyikan () atau $ (“h1”). Css (“font-size”, “20px”) dan sejenisnya. Ini adalah metode gabungan untuk menulis Objek jQuery, Selector jQuery dan Tindakan jQuery.

Pengertian Fungsi/Method getElementById() JavaScript

Sebagai fungsi utama JavaScript, kita membutuhkan JavaScript untuk memanipulasi elemen HTML. Langkah pertama adalah menemukan elemen yang akan diubah. Apakah itu tag <p>, tag <p> dengan atribut id = “important”, tag <p> dengan atribut class = “warning”, atau <button>.

Dalam JavaScript, untuk mencari elemen HTML, kita biasanya menggunakan metode getElementById (). Metode atau fungsi ini digunakan untuk mencari elemen HTML berdasarkan atribut id-nya.

Misalnya, jika saya memiliki kode HTML berikut:
<button id = “button”> Klik saya! </ tombol>

Oleh karena itu, untuk mengakses elemen ini, kita dapat menggunakan:
var x = document.getElementById (“tombol”);

Dengan memakai jQuery Selector, isyarat program jadi lebih pendek serta gunanya lebih kokoh.

Menguasai selektor jQuery

jQuery mempermudah cara pencarian bagian HTML dengan sediakan jQuery Selector. jQuery selector merupakan tata cara yang diadakan oleh jQuery buat mencari bagian HTML. Kita tidak cuma bisa memakai ciri id, namun pula kategori, ciri lain, serta kombinasinya.

Memakai jQuery, Kamu bisa menciptakan bagian HTML dengan id=” button”, serta teksnya jauh lebih pendek:

 

var x = $(“#tombol”);

Karena sama seperti selektor CSS, selektor jQuery mendukung hampir semua penyeleksi penulisan dari CSS, jadi berikut ini contohnya:

Cari semua elemen dengan tag tertentu. Misalkan kita hendak mencari semua <p> tag, dan menulis jQuery Selector sebagai: $ (“p”).
Cari elemen dengan ID tertentu. Misalkan kita ingin mencari tag HTML dengan id = “learn”, maka kita bisa menulis: $ (“# learning”).
Cari elemen dari kelas tertentu. Misalkan kita ingin mencari semua tag HTML yang memakai atribut class = “color”, kita dapat menuliskannya sebagai: $ (“. Color”).

Sama seperti CSS, kita juga dapat menggabungkan pemilih untuk menemukan elemen yang lebih spesifik, misalnya, untuk menemukan tag <p> dengan class = “color” dan terletak di dalam tag <div>, selektornya adalah: $ (“div p. warna “).

Ini adalah contoh penggunaan jQuery selector:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Belajar jQuery Benjaminsterling</title>
<script src=”jquery-2.1.4.js”></script>

<script>
$( document ).ready(function() {
$(“#tombol”).click(function() {
$(“p”).css( “color”, “red” );
$(“#belajar”).css( “color”, “green” );
$(“.warna”).css( “color”, “blue” );
$(“#test.saja”).css( “color”, “yellow” );
$(“div p.warna”).css( “color”, “pink” );
});
});
</script>

</head>
<body>

<p>
Paragraf tanpa atribut apa pun
</ p>
<p id = “Riset”>
paragraf dengan id = “belajar”
</ p>
<p class = “Color”>
Paragraf dengan class = “color”
</ p>
<p id = “Test” category = “Only”>
id = “test” class = “only”
</ p>
<div>
<p class = “Color”>
Paragraf tanpa atribut apa pun
</ p>
</ div>

<button id=”tombol”>Action</button>

</body>
</html>

Pada contoh kode diatas, terdapat 6 kode untuk penulisan jQuery Selector. Bisakah kamu menemukannya? Keenam penyeleksi tersebut adalah:

$( “#tombol” )
$(“p”)
$(“#belajar”)
$(“.warna”)
$(“#test.saja”)
$(“div p.warna”)

Pemilih pertama $ (“tombol #”) yang saya gunakan untuk membuat acara klik. Artinya, ketika Anda mengklik tag HTML dengan id = “tombol”, jalankan perintah yang dibuat. Pada kode di atas, tag HTML adalah tag < button id = “button”>.

Setelah mengklik tag <button id = “button”>, saya membuat lima baris pemanggil(perintah), yang masing-masing berguna untuk menganti warna paragraf:

$(“p”).css( “color”, “red” );
$(“#belajar”).css( “color”, “green” );
$(“.warna”).css( “color”, “blue” );
$(“#test.saja”).css( “color”, “yellow” );
$(“div p.warna”).css( “color”, “pink” );

Misalnya kode $ (“# learning”). Css (“color”, “green”) artinya: temukan tag HTML dengan id = “learn”, lalu ubah warnanya (color) menjadi hijau (green). Sekali lagi, di sini kami hanya fokus pada cara menulis penyeleksi. Acara css () akan dipelajari dalam tutorial terpisah.

Dalam 5 baris ini, saya tentu saja menggunakan penyeleksi yang berbeda untuk mengubah warna setiap paragraf.

Selektor jQuery yang ingin kita pelajari sangatlah penting, karena diperlukan untuk menemukan elemen yang akan dioperasikan dengan jQuery. Disinilah kita mengetahuinya. Selanjutnya, saya akan memasuki acara jQuery, yang dapat kita lakukan dengan menggunakan elemen HTML.

Benjamin Sterling - Informasi berserta modul jQuery Terlengkap