Web Programming (Pertemuan 4)

Web Programming Pengenalan jQuery Rizki Mufrizal

Rizki Mufrizal Technical Solution Architect Software Engineer https://rizkimufrizal.github.io

Pengenalan jQuery jQuery adalah sebuah library javascript yang sengaja di
buat untuk memudahkan kita dalam mendevelop sebuah website. jQuery akan mempersingkat proses development dimana sintak nya akan lebih sedikit dan lebih mudah dipahami.

Fitur jQuery HTML/DOM manipulation CSS manipulation HTML event methods Effects
and animations AJAX

Sintak jQuery jQuery menggunakan tanda $ sebagai awalan atau dimulai
nya jQuery. Basic sintak yang digunakan yaitu $(selector).action() . Setiap sintak jQuery harus dilakukan di dalam sebuat action ready seperti berikut. $(document).ready(function () { //sintak jQuery disini });

jQuery Selector Terdapat 3 selector yaitu Element selector yaitu jQuery
memilih element html dengan menggunakan tag html Id selector yaitu jQuery memilih element html dengan menggunakan id pada tag html Class selector yaitu jQuery memilih element html dengan menggunakan class pada tag html

Menggunakan jQuery Selector <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
/> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <p>belajar jQuery</p> <h1 class="warna">ganti warna</h1> <button id="tombol">klik</button> <script src="jquery.min.js"></script> <script> $(document).ready(function () { $("#tombol").click(function () { $("p").hide(); $(".warna").css({ color: "red" }); }); }); </script> </body> </html>

jQuery Event Methods jQuery event methods biasa nya untuk menangkap
sebuah event yang diberikan Event dapat berupa sebuah klik, perpindahan mouse dan lain sebagai nya. Contoh nya event click event focus event blur dll

Menggunakan jQuery Event Methods <!DOCTYPE html> <html lang="en"> <head> <meta
charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <button id="tombol">klik</button> <p></p> Nama: <input type="text" name="nama" id="nama" /> <script src="jquery.min.js"></script> <script> $(document).ready(function () { $("#tombol").click(function () { alert("kamu sudah klik button"); }); $("#nama").focus(function () { $(this).css({ "background-color": "green" }); }); $("#nama").blur(function () { $(this).css({ "background-color": "yellow" }); }); }); </script> </body> </html>

Terima Kasih

Web Programming (Pertemuan 4)

Web Programming (Pertemuan 4)

rizki mufrizal

More Decks by rizki mufrizal

Other Decks in Technology

Featured

Transcript

Web Programming Pengenalan jQuery Rizki Mufrizal

Rizki Mufrizal Technical Solution Architect Software Engineer https://rizkimufrizal.github.io

Pengenalan jQuery jQuery adalah sebuah library javascript yang sengaja di

Fitur jQuery HTML/DOM manipulation CSS manipulation HTML event methods Effects

Sintak jQuery jQuery menggunakan tanda $ sebagai awalan atau dimulai

jQuery Selector Terdapat 3 selector yaitu Element selector yaitu jQuery

Menggunakan jQuery Selector <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

jQuery Event Methods jQuery event methods biasa nya untuk menangkap

Menggunakan jQuery Event Methods <!DOCTYPE html> <html lang="en"> <head> <meta

Terima Kasih