Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
Pemrograman Web jQuery
Lutfi Budi Ilmawan Univ. Muslim Indonesia
2
jQuery jQuery merupakan library yang disediakan untuk JavaScript.
jQuery dapat mempermudah penggunaan JavaScript pada sebuah website. jQuery terdiri dari kumpulan method yang dapat digunakan dalam JavaScript Contoh: $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); jQuery juga menyederhanakan banyak hal yang rumit dari JavaScript, seperti AJAX call dan manipulasi DOM.
3
Fitur pada jQuery Manipulasi HTML / DOM Manipulasi CSS
HTML Event Method Efek dan animasi AJAX
4
Menambahkan jQuery pada Website
Download library jQuery di alamat Library jQuery merupakan sebuah file JavaScript, untuk menambahkan pada website yakni dengan menggunakan tag <script> dan atribut src <head> <script src="jquery min.js"></script> </head>
5
jQuery Syntax Syntax dasar: : $(selector).action() Contoh:
$ merupakan tanda untuk mendefinisikan/mengakses jQuery (selector) untuk melakukan query (atau pencarian) elemen HTML action() merupakan aksi yang akan dilakukan pada elemen Contoh: $(this).hide() - menyembunyikan current element. $("p").hide() - menyembunyikan semua elemen <p>. $(".test").hide() - menyembunyikan elemen yang memiliki class="test". $("#test").hide() – menyembunyikan elemn yang memiliki id="test".
6
The Document Ready Event
Merupakan event ketika seluruh elemen pada sebuah halaman web berhasil dimuat. Event ini dapat digunakan untuk mencegah pengeksekusian kode jQuery sebelum halaman web telah siap. Penulisan kode: $(document).ready(function(){ // jQuery methods go here... });
7
jQuery Selectors jQuery selectors memungkinkan kita untuk memilih elemen HTML yang akan dimanipulasi. Elemen HTML yang dipilih dapat berdasarkan id, class, tipe, atribut, value dari atribut, dll. Contoh: $("*") memilih semua elemen $("#lastname") memilih elemen dengan id=“lastname” $(".intro") memilih elemen dengan class=“intro”
8
Contoh jQuery Selector
9
jQuery Event Methods jQuery dibuat khusus untuk merespon event pada halaman HTML. Semua aksi yang berbeda yang ditanggapi oleh halaman web dapat disebut sebagai event. Penulisan kode: $(“selector”).nama_event((function){ //statement1; //statement2; ……. });
10
jQuery Event Methods (cont.)
on() method, digunakan untuk menggabungkan event pada sebuah selector yang memiliki lebih dari satu event. Contoh: $("p").on({ mouseenter: function(){ $(this).css("background-color", "lightgray"); }, mouseleave: function(){ $(this).css("background-color", "lightblue"); click: function(){ $(this).css("background-color", "yellow"); } });
11
jQuery Effects jQuery Hide/Show Methods: jQuery Fading Methods:
jQuery show() jQuery toggle() jQuery Fading Methods: fadeIn() fadeOut() fadeToggle() fadeTo() jQuery Sliding Methods: slideDown() slideUp() slideToggle( jQuery animate() Method jQuery stop() method jQuery Callback Functions jQuery Method Chaining
12
jQuery – Get/Set Content and Attributes
Get/Set Contents text() val() html() Get/Set Attributes attr()
13
jQuery - Add Elements append() - Inserts content at the end of the selected elements prepend() - Inserts content at the beginning of the selected elements after() - Inserts content after the selected elements before() - Inserts content before the selected elements
14
jQuery - Remove Elements
remove() - Removes the selected element (and its child elements) empty() - Removes the child elements from the selected element
15
jQuery - Get and Set CSS Classes
addClass() - Adds one or more classes to the selected elements removeClass() - Removes one or more classes from the selected elements toggleClass() - Toggles between adding/removing classes from the selected elements css() - Sets or returns the style attribute
Presentasi serupa
