Pengertian jQuery Event Beserta Penggunaannya – jQuery Selector dan jQuery Event adalah inti dari jQuery. Dengan menggabungkan keduanya, kita bisa melakukan segala macam interaksi yang menarik. Dalam tutorial pembelajaran jQuery kali ini, saya akan membahas lebih lanjut tentang “pengertian dan cara menggunakan event jQuery”.

Memahami jQuery Event

Benjaminsterling

Dalam JavaScript, insiden merupakan pembedahan yang bisa dicoba konsumen pada bagian HTML, semacam klik tunggal, klik dobel, hover mouse( kursor mouse terletak di atas bagian), hover mouse( kursor mouse sudah meninggalkan bagian), dan lain- lain.

Contoh aku mau membuat catatan alert() kala aku mengklik suatu alinea, yang bisa dicoba dengan isyarat program selanjutnya memakai JavaScript:

Memahami jQuery Event di Benjaminsterling

 

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Belajar jQuery Benjaminsterling</title>
</head>
<body>
<p id=”paragraf” onclick=”alert(‘Saya sudah di klik!’)”>
Silahkan klik saya
</p>
</body>
</html>

Atribut onclick di tag <p> di atas adalah sebuah peristiwa. Saat Anda mengklik, pesan pop-up ditampilkan: “Saya telah diklik!”. Hasil ini diperoleh melalui fungsi JavaScript alert ().

Selain onclick, masih banyak event lain di JavaScript, seperti ondblclick, onmouseover, onmouseout, dll.

Menulis seperti ini memang praktis, tapi tidak “rapi”. Karena kami mencampur kode HTML dengan JavaScript. Bagaimana cara memisahkannya?

Di dalam Fungsi JavaScript, Anda bisa menggunakan fungsi addEventListener () untuk melakukannya. Hasil yang sama dapat dihasilkan dengan menggunakan kode program berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Belajar jQuery Benjaminsterling</title>
<script src=”jquery-2.1.4.js”></script>
<script>
window.onload = function()
{
document.getElementById(“paragraf”).
addEventListener(“click”, function(){alert (‘Saya sudah di klik!’)});
}
</script>
</head>
<body>
<p id=”paragraf”>
Silahkan klik saya
</p>
</body>
</html>

Sekarang, tidak ada kode JavaScript di bagian <body>. Saya menambahkan acara klik menggunakan fungsi addEventListener (). Mengenai fungsi window.onload (), saya telah membahasnya di tutorial JavaScript: Menempatkan kode JavaScipt di tempat terbaik dalam HTML.

Cara menggunakan acara jQuery

Sebagai alternatif, jQuery menyediakan teks yang lebih praktis untuk jQuery Event. Berikut contohnya:

<!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() {
$(“#paragraf”).click(function() {
alert(‘Saya sudah di klik!’);
});
});
</script>
</head>
<body>
<p id=”paragraf”>
Silahkan klik saya
</p>
</body>
</html>

Perhatikan bagaimana jQuery membuatnya mudah untuk menulis acara ini, itu sangat sederhana. Format penulisannya adalah: $ (“jQuery_Selector”). jQuery_Event (function () {… konten acara ada di sini …}) Selain peristiwa klik, berbagai peristiwa lain tersedia, seperti dblclick, mouseenter, mouseover, mouseleave, dll. Ini adalah contoh “operasi” dari berbagai event javascipt yang dibuat dengan jQuery:

 

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Belajar jQuery Benjaminsterling</title>
<style>
#paragraf {
width:600px;
height:80px;
background-color:pink;
line-height:80px;
text-align:center;
font-size:30px;
}
</style>
<script src=”jquery-2.1.4.js”></script>
<script>
$( document ).ready(function() {

$( “#paragraf” ).click(function() {
$( “#paragraf” ).css( “color”, “green” );
});

$( “#paragraf” ).mouseover(function() {
$( “#paragraf” ).css( “background-color”, “silver” );
});

$( “#paragraf” ).mouseout(function() {
$( “#paragraf” ).css( “background-color”, “pink” );
});

$( “#paragraf” ).dblclick(function() {
$( “#paragraf” ).css( “border”, “solid 2px black” );
});

});
</script>
</head>
<body>
<p id=”paragraf”>
Belajar jQuery Event Benjaminsterling
</p>
</body>
</html>

Pada contoh di atas, saya membuat 4 event jQuery, yaitu click, dblclick, mouseover dan mouseleave. Di setiap acara ini, saya mengubah properti CSS paragraf. Cobalah sendiri dengan mengklik dua kali dan mengarahkan kursor ke kotak merah muda:

Sepanjang tutorial jQuery tentang Benjaminsterling (Benjaminsterling), kami akan memperkenalkan banyak konten terkait jQuery Events, termasuk show (), hide () dan acara animasi lainnya.

Cara Mengambil Nilai HTML dengan jQuery

 

Dalam bimbingan Benjaminsterling buntut mengenai berlatih jQuery, aku hendak membuktikan pada Kamu gimana memakai jQuery buat mengutip angka bagian HTML. Mengekstrak angka bagian HTML amat biasa. Contoh aku membuat kolom blangko&lt;input type=” text”
. Gimana metode mengutip angka item memakai JavaScript? Dengan memakai JavaScript” asli”, kita bisa memakai ciri innerHTML. Namun tata cara ini amat jauh sebab wajib dipakai bersama dengan guna document. getElementById(). Aku membuat bimbingan di bimbingan” Metode Memakai JavaScript buat Mengekstrak Angka HTML”. Dengan jQuery, metodenya lebih simpel serta lebih pendek. Metode mengutip angka HTML memakai tata cara jQuery text() Metode awal buat mengutip angka bagian HTML dengan jQuery merupakan dengan memakai tata cara text(). Caranya merupakan dengan meningkatkan tata cara atau guna text() ke jQuery Selector. Ini ilustrasi penggunaannya:

 

<!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() {
var nilai = $(“#paragraf”).text();
alert(nilai);
})

});
</script>
</head>
<body>
<p id=”paragraf”>
Sedang belajar <em>jQuery</em> di <b>Benjaminsterling…</b>
</p>
<button id=”tombol”>Ambil Nilai</button>
</body>
</html>

Buat mengutip angka bacaan dalam tag&lt;p id=” paragraph”
, aku dapat memakai perintah$(“# paragraph”). Angka ini setelah itu ditaruh dalam elastis angka, serta setelah itu diperlihatkan bersama dengan guna sirine( angka).

Bila Kamu mengklik tombol” Miliki Angka”, hasilnya hendak jadi:” Aku lagi berlatih jQuery di Benjaminsterling…”. Minta dicermati kalau tata cara text() hendak menghilangkan seluruh tag HTML yang terdapat dalam tag&lt;p
, semacam tag&lt;em
serta&lt;b
yang pula terdapat di dalam alinea.

Gimana bila kita mau memperoleh kembali tag&lt;p
komplit serta angka yang tercantum dalam tag HTML? Maanfaatkan tata cara html() jQuery

Metode mengutip angka HTML memakai tata cara html() jQuery

Metode berikutnya buat mengutip angka HTML memakai jQuery merupakan dengan memakai tata cara html(). Ini dipakai dengan metode yang benar serupa semacam tata cara text(). Perbedaannya merupakan hasil dari tata cara html() hendak menjaga tag HTML di dalam bagian HTML.

Memakai ilustrasi yang serupa, selanjutnya hasil yang di bisa dengan method html():

 

<!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() {
var nilai = $(“#paragraf”).html();
alert(nilai);
})

});
</script>
</head>
<body>
<p id=”paragraf”>
Sedang belajar <em>jQuery</em> di <b>Benjaminsterling…</b>
</p>
<button id=”tombol”>Ambil Nilai</button>
</body>
</html>

Seperti yang Anda lihat, hasil kali ini adalah: “Pelajari <em> jQuery </ em> di <b> Benjaminsterling … </ b>”.
Cara menggunakan metode val () jQuery untuk mengambil nilai formulir HTML

Kedua metode text () dan html () cukup untuk mengambil nilai yang ada di setiap elemen HTML. Tetapi jQuery menyediakan metode val () khusus untuk formulir. Langsung saja kita lihat contoh penggunaannya:

<!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() {
var nilai = $(“#nama”).val();
alert(nilai);
})

});
</script>
</head>
<body>
Nama: <input type=”text” id=”nama” value=”Benjaminsterling…”>
<button id=”tombol”>Ambil Nilai</button>
</body>
</html>

Kali ini saya memiliki tag <input type = “text”>. Silakan klik tombol “Dapatkan Nilai” sekarang, atau ubah teks di masukan formulir. Perintah $ (“# nama”). Val () akan menampilkan nilai apa pun yang Anda masukkan di kolom formulir.
Bagaimana dengan objek bentuk lain seperti <select>?

Caranya sama persis, berikut contohnya:

<!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() {
var nilai = $(“#kota”).val();
alert(nilai);
})

});
</script>
</head>
<body>
Pilih Kota:
<select id=”kota” name=”kota”>
<option value=”jakarta”>Jakarta</option>
<option value=”bandung”>Bandung</option>
<option value=”bogor”>Bogor</option>
</select>
<button id=”tombol”>Ambil Nilai</button>
</body>
</html>

Pilih nama kota dan klik tombol “Dapatkan Nilai”. Nilai yang dikembalikan berasal dari atribut nilai dari setiap tag <option>.
Bagaimana dengan kotak centang?

Untuk kotak centang, perlu pemilihan lebih lanjut, karena jika Anda menggunakan metode val () secara langsung, nilai formulir akan dikembalikan terlepas dari kondisi kotak centang (baik dipilih atau tidak). Untuk mengatasi masalah ini, kita bisa menggunakan custom selector jQuery yaitu: selected.

Berikut contoh penggunannya:

<!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() {
var nilai1 = $(“#kece:checked”).val();
var nilai2 = $(“#tampan:checked”).val();
var nilai3 = $(“#wibawa:checked”).val();
alert(nilai1+’ ‘+nilai2+’ ‘+nilai3);
})

});
</script>
</head>
<body>
Saya itu:
<input type=”checkbox” id=”kece” value=”Saya kece”> kece
<input type=”checkbox” id=”tampan” value=”Saya tampan”> tampan
<input type=”checkbox” id=”wibawa” value=”Saya berwibawa”> berwibawa
<br><br>
<button id=”tombol”>Ambil Nilai</button>
</body>
</html>

Disini saya memiliki tiga check box: Keren. Ketika tombol Ambil Nilai di klik, akan dijalankan perintah berikut:

var nilai1 = $(“#keren:checked”).val();
var nilai2 = $(“#ganteng:checked”).val();
var nilai3 = $(“#cool:checked”).val();
alert(nilai1+’ ‘+nilai2+’ ‘+nilai3);

Artinya variabel value1, value2 dan value3 akan berisi nilai checkbox hanya jika kondisi checkbox dipilih (perhatikan cara menulis jQuery selector # keren: diperiksa).

Namun, kini muncul masalah baru. Setelah menghapus centang pada kotak centang, metode val () akan kembali tidak terdefinisi. Ini terjadi karena selector: check tidak menemukan elemen HTML yang kita tulis (karena belum diperiksa).

Bagaimana cara menghadapinya? Cukup tambahkan beberapa kondisi IF, jika nilai variabel tidak ditentukan, lakukan operasi tertentu, seperti mengosongkan variabel.

Berikut revisinya:

<!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() {
var nilai1 = $(“#keren:checked”).val();
var nilai2 = $(“#ganteng:checked”).val();
var nilai3 = $(“#cool:checked”).val();

if (nilai1==undefined) {nilai1=””;}
if (nilai2==undefined) {nilai2=””;}
if (nilai3==undefined) {nilai3=””;}

alert(nilai1+’ ‘+nilai2+’ ‘+nilai3);
})

});
</script>
</head>
<body>
Saya itu:
<input type=”checkbox” id=”keren” value=”Saya Keren”> Keren
<input type=”checkbox” id=”ganteng” value=”Saya Ganteng”> Ganteng
<input type=”checkbox” id=”cool” value=”Saya Cool”> Cool
<br><br>
<button id=”tombol”>Ambil Nilai</button>
</body>
</html>

Saat Anda mengklik tombol Dapatkan Nilai kali ini, hanya nilai kotak centang yang dipilih yang akan ditampilkan. Dalam hal ini, Anda juga dapat melihat bahwa jQuery tidak cukup. Kami masih membutuhkan JavaScript dasar untuk menangani masalah yang muncul. Sebelemnya kita sudah membahas tentang Cara Menjalankan Kode jQuery kedepan kita akan mengulas tentang Jqury lebih dalam lagi.

Benjamin Sterling - Informasi berserta modul jQuery Terlengkap