Apa itu jQuery?
Pada dasarnya jQuery adalah tools yang dapat digunakan untuk implementasi (menulis kode) JavaScript. jQuery juga dapat dikatakan sebagai JavaScript Library (sama halnya seperti Bootstrap yang merupakan CSS Library), dan saat ini merupakan yang paling banyak digunakan.
Dengan menggunakan jQuery penulisan kode diklaim dapat lebih sedikit/cepat, dan penulisan yang lebih mudah dibandingkan dengan penulisan JavaScript secara konvensional.
Selain jQuery, ada banyak lagi tools lain yang fungsi dan tujuannya sama dengan jQuery, diantaranya VueJS, AngularJS, React, dan lain-lain.
jQuery dibekali berbagai methods dan property yang dapat digunakan untuk:
- Select element
- Manipulate element
- Create Element
- Add Event Listener
- Animate Element
- Add Effect
- HTTP request (AJAX)
Integrasi jQuery dengan HTML
Sama seperti penggunaan bootstrap, kita dapat mengintegrasikan jQuery dan HTML dengan 2 cara:
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
1. Mendownload file
2. Menggunakan CDN
Sekarang, kita akan buat file latihan baru. Buat sebuah folder dengan nama pertemuan-10, lalu buka folder tersebut menggunakan bracket atau text editor kalian. Setelah itu silahkan tambahkan sebuah file html dan buatkan kerangka html standar dan coba pasangkan script integrasi jQuery-nya.
Buka file html pada browser, lalu buka tab console dan ketikan jQuery atau $, jika tidak ada error maka jQuery sudah terintegrasi dengan file html.
jQuery Selector
- Untuk dapat menggunakan jQuery kita harus menggunakan jQuery selector agar dapat mempengaruhi elemen yang kita maksud.
- jQUery selector ini diantaranya adalah tag, class, id, dll.
- jQuery selector selalu dipasangkan dengan $ (simbol dollar).
- Setiap selector harus menggunakan tanda kutip dua.
- Contoh penulisannya:
$("jQuerySelectorDitempatkanDisini")//Selector menggunakan tag$("img")//Selector menggunakan class$(".classKu")//Selector menggunakan id$("#idKu")
jQuery Selector
Sekarang tambahkan sebuah heading dan beberapa list pada file html kalian seperti pada kode dibawah ini:
<body>
<h1>Pertemuan 10 - jQuery</h1>
<ul>
<li id="idKu">List 1</li>
<li class="classKu">List 2</li>
<li class="classKu">List 3</li>
</ul>
</body>
Setelah itu coba ketikan kode pada slide sebelumnya untuk mempraktekan penggunaan selector.
Manipulasi Selector dg Method
Setiap selector dapat kita manipulasi dengan menambahkan masing-masing method yang ada pada selector tersebut.
Contoh, kita akan menggunakan method CSS untuk melakukan styling menggunakan jQuery (ini contoh awal saja, ingat untuk styling kita harus biasakan menggunakan CSS dan bukan jQuery)
Struktur penulisan syntaxnya seperti ini
$("selectorYangDipilih").css("property,value")
Sekarang kita akan ubah agar heading berubah warnanya dan memiliki border.
$("h1").css("border", "2px solid black");
//atau masukan style kedalam variable
var styleKu = {
backgroundColor : "red",
color : "white"
};
$("h1").css(styleKu);
Challenge
Buat sebuah file html baru, lalu masukan beberapa baris kode berikut kedalam body:
<div>Div 1</div>
<div class="divKu">Div 2</div>
<div id="tiga">Div 3</div>
<div class="divKu">Div 4</div>
- Ubah agar seluruh div warna backgroundnya abu-abu
- Ubah elemen dengan class divKu fontSizenya menjadi 24px
- Ubah elemen dengan id tiga agar dilingkari border merah
- Ubah hanya Div 1 agar warna textnya menjadi putih
Post a Comment