Bidhuan.id – Belajar jquery bisa dilakukan secara otodidak lo sobat. Halo sobat generasi pembelajar masa kini, pada kesempatan kali ini penulis akan memberikan informasi mengenai dunia ilmu komputer kembali yang masih berkaitan dengan pembahasan sebelumnya mengenai trafik anjlok.
Belajar jquery jika tidak dipahami dengan baik memang akan kelihatan sulit sobat. Namun jika anda tekun berlatih dan terus mau belajar dengan mencari referensi di buku, internet atau media lainnya, penulis yakin pasti bisa kok.
Seperti halnya penulis, dulu saat penulis sedang dalam proses pembelajaran di bangku perkuliahan juga terasa sulit, namun seiring berjalannya waktu dan adanya kemauan keras untuk belajar, akhirnya bisa juga sampai sekarang ilmunya masih bisa digunakan untuk menghasilkan rupiah.
Baca juga hal penting dalam migrasi hosting wordpress com ke hawkhost untuk pemula
Jquery ini masih saudaraan dengan HTML, CSS dan PHP sobat. Jadi bagi anda yang sudah mengetahui ketiganya akan lebih mudah dalam proses pembelajaran jquery. Namun bagi anda yang masih awam jangan khawatir, jika anda menyimak penjelasan yang penulis akan berikan di bawah ini, Insya Allah pahamlah, tapi syaratnya anda juga wajib membaca postingan tentang HTML, CSS dan PHP di pembahasan sebelumnya di bidhuan.id
Perlu anda ketahui sobat situs – situs raksasa dan populer di dunia sebagian besar menggunakan jquery lo, untuk memudahkan proses pengetikan di Javascriptnya. Contohnya saja WordPress sobat, situs populer ini juga tidak lepas dari penggunaan jquery. Jquery juga banyak yang menyebutkan sebagai perpustakaannya javascript. Karena memang kode – kode yang dituliskan di javascript berkumpul menjadi satu di dalam wadah yang bernama jquery.
Pengertian Jquery dan Dasar dari Penggunaan Jquery
Apa yang dimaksud dengan Jquery? Di atas tadi penulis sudah sedikit menyebutkan, bahwasannya Jquery itu adalah perpustakannya Javascript. Singkatnya seperti itu sobat agar mudah dimengerti. Karena yang simpel – simpel akan membuat pembaca cepat menyerap apa yang mereka pelajari.
- Cara Menginput File Jquery ke Dalam HTML
Tahukan anda sobat pada dasarnya Jquery itu adalah Javascript eksternal? Analisa seperti akan disadari oleh para pembelajar ilmu komputer saat sudah mendalaminya. Untuk melakukan penginputan Jquery ke dalam HTML sendiri terdapat 2 solusi saat ini. Yang pertama adalah dengan melakukan download file Jquery terlebih dahulu kemudian mengkoneksikannya dengan tag <script> atau mengakses Jquery secara lokal. Yang kedua bisa memanfaatkan CDN (Content Delivery Network).
- Cara Menjalankan Kode Jquery
Untuk menginput kode Javasript anda wajib memanggil file Jquerynya terlebih dahulu. Caranya seperti gambar di atas sobat. Anda hanya perlu meletakkan kode yang anda inginkan setelah tag <script>. Dengan modal awal seperti tampilan di atas anda sudah bisa menjalankan banyak fungsi dari Jquery itu sendiri.
- Aturan Dasar Penulisan Kode Jquery
Perhatikan sobat untuk mengawali pembuatan kode Jquery terdapat tanda $ yang wajib anda ingat. Tanda yang populer dengan mata uang dolar tersebut digunakan untuk mengakses yang namanya Jquery object. Nantinya anda bisa menemukan berbagai fungsi dari Jquery di dalam Jquery object tersebut.
- Cara Mencari Elemen HTML dengan Menggunakan Jquery Selector
Sebelum melakukan pencarian eleman HTML, sebaiknya anda menentukan kode mana yang akan diubah sobat. Caranya gampang kok gak perlu bingung, anda hanya perlu pahami misalnya saja tag <p> dilengkapi dengan atribut id=”penting”, tag <p> dilengkapi dengan atribut id=”warning”, atau bisa juga sebuah tombol <button>. Inilah yang perlu anda ketahui terlebih dahulu. Untuk lebih jelasnya lagi bisa anda lihat pada gambar di bawah ini sobat.
Jquery Dom Manipulation
DOM merupakan sebuah singkatan dari kata Document Object Model. DOM inilah yang nantinya menjadi komponen utama dalam membangun HTML (struktur elemen HTML). Manipulasi yang dimaksud disini adalah mengubah Javascript, menghapus Javascript ataupun menambahkan Javascript. Hal ini memang wajar dilakukan, karena dalam membangun sebuah web yang baik tentu saja akan melalui banyak revisi – revisi agar interface nya nyaman saat digunakan oleh para user.
Jika anda pernah merasakan betapa butuh proses panjang dom pada Javascript, pasti tidak jarang merasakan stres karena mungkin saja terdapat error yang tak kunjung ditemukan penyebabnya. Namun dengan menggunakan Jquery, manipulasi yang dilakukan akan lebih sederhana berkali lipat dibandingkan menggunakan Javascript. Jika anda tidak percaya, bisa dicoba sendiri. Nanti akan tahu perbedaan jelasnya, dalam proses manipulasi.
Berikut ini terdapat Dom Manipulation yang penulis maksudkan, antara lain contohnya meliputi :
- Cara Mengubah Nilai HTML dengan Jquery
Mengubah atau mengedit tidak semudah yang dibayangkan lo sobat. Jika anda salah menyisipkan kode atau pun tidak sengaja menghapus kode sepele seperti garis miring atau pun tanda kurung saja, maka pengaruh ke semuanya akan fatal karena akan menimbulkan error saat program dijalankan. Kode yang digunakan untuk mengubah nilai HTML adalah text() dan html(). Untuk lebih memahaminya dengan mudah, alangkah baiknya anda melihat contoh nyatanya ya sobat. Selanjutnya coba anda praktekkan secara mandiri.
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Belajar jQuery Bidhuanid</title>
<script src=”jquery-2.1.4.js”></script>
<script>
$(document).ready(function() {$(“#tombol”).click(function() {
$(“#paragraf1”).text(“<b>#jQuery</b> is Amazing…”);
$(“#paragraf2”).html(“<b>#jQuery</b> is Amazing…”);
})});
</script>
</head>
<body>
<p id=”paragraf1″>
Sedang belajar jQuery di Bidhuanid…
</p>
<p id=”paragraf2″>
Sedang belajar jQuery di Bidhuanid…
</p>
<button id=”tombol”>Change!</button>
</body>
</html>
- Cara Menambah Baris Tabel HTML dengan Jquery
Untuk menambah kode menurut penulis lebih mudah dibandingkan harus mengedit yang banyak resikonya. Poin paling penting yang wajib dan harus anda ingat adalah kode append() dan prepend(). Append untuk menambah baris di bagian akhir dan prepend untuk menambah baris di bagian awal. Kedua merupakan kode yang biasa digunakan untuk menambah baris tabel HTML. Contohnya sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Belajar jQuery Bidhuanid</title>
<script src=”jquery-2.1.4.js”></script>
<script>
$(document).ready(function() {$(“#tombol_app”).click(function() {
$(“#box”).append(“<p>jQuery is Amazing…</p>”);
})$(“#tombol_pre”).click(function() {
$(“#box”).prepend(“<p>Learning jQuery…</p>”);
})});
</script>
</head>
<body>
<div id=”box”>
<h2>Sedang belajar jQuery di Bidhuanid…</h2>
</div>
<button id=”tombol_app”>Append</button>
<button id=”tombol_pre”>Prepend</button>
</body>
</html>
- Cara Menghapus Elemen HTML dengan Jquery
Proses menghapus adalah yang paling mudah dibandingkan dengan mengedit atau pun menambah kode. Anda hanya perlu mencari bagian mana yang tidak dibutuhkan lagi dan tinggal menyisipkan kode untuk menjalankan perintah hapus. Kode yang digunakan yakni remove(). Untuk lebih jelasnya anda bisa melihat contoh cuplikannya di bawah ini :
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Belajar jQuery Bidhuanid</title>
<script src=”jquery-2.1.4.js”></script>
<script>
$(document).ready(function() {$(“#hapus_html”).click(function() {
$(“#list_html”).remove();
})$(“#hapus_css”).click(function() {
$(“#list_css”).remove();
})$(“#hapus_php”).click(function() {
$(“#list_php”).remove();
})$(“#hapus_all”).click(function() {
$(“#belajar”).remove();
})
});
</script>
</head>
<body>
<button id=”hapus_html”>Hapus HTML</button>
<button id=”hapus_css”>Hapus CSS</button>
<button id=”hapus_php”>Hapus PHP</button>
<button id=”hapus_all”>Hapus Semua!</button>
<ul id=”belajar”>
<li id=”list_html”>Belajar HTML di Bidhuanid</li>
<li id=”list_css”>Belajar CSS di Bidhuanid</li>
<li id=”list_php”>Belajar PHP di Bidhuanid</li>
<li id=”list_js”>Belajar JavaScript di Bidhuanid</li>
<li id=”list_mysql”>Belajar MySQL di Bidhuanid</li>
</ul>
</body>
</html>
Jquery Animation
Ternyata Jquery juga bisa digunakan untuk mengembangkan dunia animasi yang sampai sekarang ini banyak dinikmati oleh berbagai kalangan. Dengan memanfaatkan Jquery, maka akan sangat mempermudah pengerjaan animasi dibandingkan hanya menggunakan Javascript saja. Animasi yang ada di web – web dan sering anda jumpai itu juga hasil karya kreatif pengembangan Jquery.
Sebelumnya juga ada CSS3 yang juga digunakan untuk mengembangkan dunia animasi. Kemudian flash juga, namun sekarang ini keberadaannya sudah nyaris punah. Karena pada dasarnya teknologi berkembang secara terus menerus. Penyempurnaan terus dilakukan, jadi wajar saja generasi sebelumnya akan ditinggalkan seiring berjalannya waktu. Dan proses perkembangan tersebut hanya digunakan sebagai pembelajaran saja karena suatu penemuan memang mahal harganya.
Bisa diambil kesimpulan, bahwasannya Jquery adalah sebuah sistem tepat guna yang sangat cocok anda gunakan untuk membantu membangun dan mengembangkan web dengan cara yang efektif dan juga efisien. Untuk itu sangat perlu penguasaan ilmu ini jika anda masih ingin menjadi web developer yang handal. Karena peluang besar akan menghampiri anda jika menguasai ilmu pengembangan software.
Mungkin itu saja dulu ya sobat sedikit ulasan mengenai belajar jquery yang bisa penulis bagikan untuk anda semua. Penulis mempunyai harapan besar kepada anda, bahwasannya informasi di atas bisa membawa banyak manfaat bagi anda semua. Sampai jumpa di lain kesempatan dan ikuti terus perkembangan artikel terbaru selanjutnya. Salam hangat selalu dari penulis.
