Pemrograman Web jQuery Lutfi Budi Ilmawan Univ. Muslim Indonesia
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.
Fitur pada jQuery Manipulasi HTML / DOM Manipulasi CSS HTML Event Method Efek dan animasi AJAX
Menambahkan jQuery pada Website Download library jQuery di alamat http://jquery.com/download/ Library jQuery merupakan sebuah file JavaScript, untuk menambahkan pada website yakni dengan menggunakan tag <script> dan atribut src <head> <script src="jquery-1.11.2.min.js"></script> </head>
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".
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... });
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”
Contoh jQuery Selector
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; ……. });
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"); } });
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
jQuery – Get/Set Content and Attributes Get/Set Contents text() val() html() Get/Set Attributes attr()
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
jQuery - Remove Elements remove() - Removes the selected element (and its child elements) empty() - Removes the child elements from the selected element
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