Media Pengembangan Web & App | by APPKEY

Pembuatan WebsiteWeb ProgrammingBelajar Menggunakan Jquery Library dari Dasar

Belajar Menggunakan Jquery Library dari Dasar

-

Last Updated on February 17, 2023 by

jQuery adalah Library JavaScript yang membantu developer untuk menambah fungsionalitas tambahan pada website yang dibangun. jQuery Library sangatlah populer di kalangan developer website karena dapat digunakan untuk melintasi dan memanipulasi pohon DOM HTML. Selain itu, ini menyederhanakan penanganan acara, animasi CSS, dan Ajax.

jQuery adalah perpustakaan yang sangat kuat yang menyediakan semua alat yang diperlukan untuk membuat interaksi dan animasi yang indah di halaman web, sambil memberdayakan pengembang untuk melakukannya dengan cara yang dapat diakses dan terdegradasi. Berikut ini adalah 10 trik coding dalam jQuery tutorial yang menarik untuk dicoba.

Tips Menggunakan Jquery Library untuk Pemula

jquery-library. jquery adalah, cara membuat jquery

Jika ada satu hal buruk tentang jQuery, hal itu pun adalah entry-level yang ia miliki sangat rendah, sehingga cenderung menarik mereka yang tidak memiliki pengetahuan JavaScript. Sekarang, di satu sisi, hal ini bisa menjadi hal yang sangat fantastis.

jQuery adalah library JavaScript yang ringan, “write less do more“. JQuery ditulis dalam Bahasa pemrograman JavaScript. Library ini banyak digunakan untuk menyederhanakan kode front-end yang memanipulasi HTML. JQuery memudahkan Anda sebagai pengembang untuk berinteraksi dan memodifikasi HTML Anda dan data yang dikandungnya.

jQuery juga dapat menyederhanakan banyak hal rumit dari JavaScript, seperti panggilan AJAX dan manipulasi DOM. Anda bisa download jQuery di https://jquery.com/. Anda juga bisa melihat dokumentasi jQuery API di : https://api.jquery.com/.

Meskipun mengkoding dengan jQuery tidaklah terlalu sulit, namun terkadang Anda akan kebingungan untuk melakukan suatu hal. Namun, Anda tidak perlu khawatir karena kami akan memberikan jQuery tutorial dan trik untuk melakukan koding jQuery dengan mudah.

1. Mengakses elemen iFrame

Karena tingkat kesulitannya, sebagian besar developer web mencoba menghindari penggunaan iFrame. Tapi terkadang, dalam masalah tertentu, penggunaan iFrame pun diharuskan.

Dalam melakukan hal tersebut perlu diketahui cara paling mudah untuk mengakses berbagai elemen yang ada di dalamnya. Salah satu cara menuju elemen ini adalah dengan memakai content(). Hal ini mampu memuat DOM iFrame menjadi dalam satu baris, seperti yang ditunjukan di bawah ini:

$(function(){
 var iFrameDOM = $("iframe#someID").contents();
 // Anda dapat menggunakan <strong>find()</strong> untuk mengakses elemen apa pun di iFrame: 
 iFrameDOM.find(".message").slideUp();
 // Gunakan slideUp pada semua elemen 'messages' kelas di iFrame
});

2. Periksa Object jQuery

Trik yang satu ini mungkin sangat mendasar di jQuery Library, Anda mungkin sudah banyak melihat jQuery tutorial yang membahas ini. Akan tetapi, tidak banyak yang tahu bagaimana melakukannya dengan cara yang efisien.

Misalnya, cari tahu terkait keberadaan elemen kelas ‘aktif’ di DOM. Anda dapat memastikan property object long dengan kode berikut ini:

$(function(){
 if( $(".active").length ){
 // Sekarang kode di sini hanya akan dieksekusi jika setidaknya ada satu elemen aktif }
});

3. Loop Backwards

Untuk mengulang elemen di JQuery, biasanya kita menggunakan each(). Namun, kita juga bisa melakukan loop mundur atau mundur. Hal ini pun tidak banyak diketahui. Berikut ini adalah triknya:

$(function(){
 var reversedSet = $("li").get().reverse();
 //Gunakan get() untuk mengembalikan sebuah array dari elemen, dan kemudian mengembalikannya 
 
 $(reversedSet).each(function(){
 //Sekarang kita dapat memasukan perangkat yang sudah dikembalikan
 });
});
Artikel Terkait  Mengetahui Penggunaan Fungsi Explode dan Implode Pada PHP

4. Buka tautan eksternal di “New Window”

Jika Anda ingin mengaktifkan semua tautan eksternal untuk dibuka di jendela baru, Anda dapat menambahkan kode berikut:

$(function(){
 $('a[rel$='external']').click(function(){
 this.target = "_blank";
 });
});

Kemudian, tambahkan atribut rail seperti di bawah ini:

<a href="about.html" rel="external">about</a>

5. Masukkan fungsi htmlentities() di jQuery

Anda tidak perlu menggunakannya, apabila Anda membutuhkan fungsi PHP seperti htmlentities() ke dalam kode  program Anda yang berasal dari jQuery Library. Hal yang perlu Anda lakukan adalah membuat kode yang bisa memberikan hasil layaknya ketika menggunakan fungsi htmlentities(). Ini triknya:

$(function(){
 var text = $("#someElement").text();
 var text2 = "Some <code> & such to encode";
//Anda dapat menentukan string atau teks dari sebuah elemen
 
 var html = $(text).html();
 var html2 = $('<div/>').text(text2).html();
 // Selesai - html dan html2 sekarang menyimpan nilai yang disandikan!});

6. jQuery Library memungkinkan pengguna untuk mengatur ukuran font tampilan
Anda dapat mengatur font website agar mudah diatur oleh pengunjung dengan trik sebagai berikut:

$(function(){
 // Atur Ulang Ukuran Font
 var originalFontSize = $('html').css('font-size');
 $(".resetFont").click(function(){
 $('html').css('font-size', originalFontSize);
 });
 // Tingkatkan Ukuran Font
 $(".increaseFont").click(function(){
 var currentFontSize = $('html').css('font-size');
 var currentFontSizeNum = parseFloat(currentFontSize, 10);
 var newFontSize = currentFontSizeNum*1.2;
 $('html').css('font-size', newFontSize);
 return false;
 });
 // Mengurangi Ukuran Font
 $(".decreaseFont").click(function(){
 var currentFontSize = $('html').css('font-size');
 var currentFontSizeNum = parseFloat(currentFontSize, 10);
 var newFontSize = currentFontSizeNum*0.8;
 $('html').css('font-size', newFontSize);
 return false;
 });
});

7. Kelola kotak Pencarian

Menambahkan pertanyaan seperti “Apa yang Anda cari?” di kotak Pencarian Anda akan lebih interaktif dan menarik bagi pengunjung pencarian Anda. JQuery dapat mengelolanya dengan mudah. Anda juga dapat menghapusnya jika kotak sedang diketik. Gunakan kode ini:

$(function(){
 // tetapkan default value:
 $("#searchbox")
 .val('search?');
 .focus(function(){this.val('')})
 .blur(function(){
 (this.val() === '')? this.val('search?') : null;
 });
});
Artikel Terkait  TypeScript vs JavaScript : Apa bedanya?

8. Memunculkan kembali tautan ‘Back-to-Top’

Anda hanya perlu memasukkan kembali link yang ingin Aqnda masukan, lalu tambahkan kode seperti di bawah ini untuk dapat memunculkan kembali link ‘Back-to-Top’ yang telah dihapus.

$(function(){
/* atur variabel secara lokal untuk meningkatkan kinerja */
 var scroll_timer, 
 displayed = false,
 $message = $('#message a'),
 $window = $(window),
 top = $(document.body).children(0).position().top;
 
 /* bereaksi terhadap gulir acara di jendela */
 $window.scroll(function () {
 window.clearTimeout(scroll_timer);
 scroll_timer = window.setTimeout(function () { // gunakan timer untuk meningkatkan performance
 if($window.scrollTop() <= top) // hide if it's on the top screen
 {
 displayed = false;
 $message.fadeOut(500);
 }
 else if(displayed == false) // show if it's scrolling
 {
 displayed = true;
 $message.stop(true, true).show().click(function () { $message.fadeOut(500); });
 }
 }, 100);
 });
});

9. Samakan lebar kolom yang berbeda

Kabar baiknya, Anda tidak lagi perlu mengatur kolom-kolom tersebut satu demi satu. Di jQuery Library, ada trik untuk melakukan hal tersebut yaitu dengan otomatis menyamakan lebar kolom menjadi terluas. Kuncinya ada di equalHeight().

$(function(){
 jQuery.fn.equalHeight = function () {
 var tallest = 0;
 this.each(function() {
 tallest = ($(this).height() > tallest)? $(this).height() : tallest;
 });
 return this.height(tallest); 
 }
 
 //Add equalHeight here
 $(".content-column").equalHeight();
});

10. Temukan kalimat dan manipulasi mereka

Jika Anda ingin mencari kalimat atau kata kemudian ingin menggantinya, atau ingin memanipulasi string yang ada, gunakan kode ini:

$(function(){
 // Pertama, tentukan string mana yang ingin Anda manipulasi, penggantinya, dan konteksnya:
 var phrase = "old string";
 var replacement = "new string";
 var context = $(body);
 
 //
 context.html(
 context.html().replace(new RegExp(phrase, 'gi'), replacement);
 );
 
});

11. Sembunyikan elemen HTML

Untuk menyederhanakan tampilan, Anda dapat menyembunyikan dan memunculkan elemen HTML yang tidak dibutuhkan lagi dengan command hide() dan show(). Contoh cara membuat jQuery untuk memunculkan dan menyembunyikan konten dengan mengklik suatu tombol adalah seperti berikut:

$(“#hide”).click(function(){

 $(“p”).hide();

});




#(“#show”).click(function(){

 $(“p”).show();

});

12. Buat efek fade in dan fade out

Pemunculan suatu elemen dapat diperhalus dengan menerapkan efek fade in dan fade out saat memunculkan dan menghilangkan elemen tersebut. Efek fade in memunculkan konten dari keadaan “pudar” hingga terlihat secara jelas, sedangkan efek fade out menghilangkan konten dari yang kelihatan jelas menjadi lebih “pudar” sampai hilang sepenuhnya. Contoh kode untuk membuat efek fade in dan fade out pada jQuery adalah sebagai berikut:

$(document).ready(function(){

$(“button”).click(function(){

 $(“#div1”).fadeIn();

  $(“#div2”).fadeIn(“slow”);

  $(“#div3”).fadeIn(3000);

  $(“#div4”).fadeOut(“fast”);

});

});

Sesuaikan div1, div2, div3 dan div4 sesuai dengan id elemen yang efeknya ingin diterapkan pada web Anda. Kecepatan efek dapat disesuaikan di dalam kurung pada fadeIn(). Nilai yang dapat ditetapkan, seperti “fast” yang artinya animasi akan dijalankan selama 200 milidetik, “slow” yang artinya animasi akan dijalankan selama 600 milidetik, atau angka bebas yang artinya animasi akan dijalankan sesuai angka yang ditetapkan dalam satuan waktu milidetik. Jika nilai kecepatan tidak ditetapkan, maka akan digunakan kecepatan default yaitu 400 milidetik.

13. Buat efek sliding

Selain sembunyikan dengan fadeIn() dan fadeOut(), konten juga dapat disembunyikan dengan animasi sliding. Efek slide memiliki dua jenis yaitu slideUp() untuk menutup konten dari bawah ke atas dan slideDown() untuk memunculkan konten dari atas ke bawah. Berikut adalah contoh penerapannya:

$(document).ready(function(){

$(#close).click(function(){

  $(“#panel”).slideUp(“slow”);

  });

$(“#flip”).click(function(){

  $(“#panel”).slideDown(“slow”);

  });

});

Seperti trik fade in dan fade out, pastikan Anda menyesuaikan nama elemen pada kode di atas yang ditandai dengan tanda (#) dengan id elemen di website Anda. Anda juga dapat menyesuaikan nilai slideUp dan slideDown dengan durasi efek yang diinginkan.

14. Tambahkan elemen secara interaktif

jQuery sebagai salah satu implementasi JavaScript memungkinkan Anda untuk menciptakan aplikasi yang lebih interaktif. Salah satu contoh sederhananya yaitu memodifikasi elemen secara real time sesuai aksi yang dilakukan pengguna. 

Contohnya, saat pengguna mengirim suatu data, nilai dari data tersebut akan langsung muncul di dalam tabel. Alur yang diiakukan untuk melakukan aksi ini yaitu dengan mengambil nilai yang dimasukkan tersebut menggunakan fungsi val(), lalu menambahkan nilai tersebut dengan fungsi append(). Contoh kode untuk melakukannya adalah sebagai berikut:

$(“#tambah”).click(function(){

 var inputvalue = $(“#sesuaikan dengan id tabel pada HTML”).val();

 var newvalue = “<tr><td>”+inputvalue+”</td></tr>;

 $(“#tambah”).append(newvalue);

})

15. Cek keadaan suatu elemen

Pengecekan keadaan dilakukan untuk mengetahui, misalnya, apakah elemen sedang muncul atau disembunyikan, apakah form atau tombol sedang diaktifkan atau tidak, atau apakah suatu checkbox atau radio button sedang diisi atau tidak. Hasil dari pengecekan keadaan ini biasanya berupa nilai true atau false untuk penentuan skenario selanjutnya, misalnya suatu checkbox harus diklik agar dapat mengirim data. Untuk pengecekan seperti ini dapat digunakan fungsi is().

Contoh penggunaannya adalah sebagai berikut:

$(function () {

 console.log($(‘id elemen yang dicek’).is(‘:hidden’));

});

Kode di atas digunakan untuk mengecek apakah elemen sedang disembunyikan. Jika ingin mengecek apakah elemen sedang dimunculkan, ganti “hidden” dengan “visible”. 

Selector lain yang dapat digunakan, misalnya “checked” untuk pengecekan radio button atau checkbox apakah sudah dicek atau belum, atau “disabled”/”enabled” untuk pengecekan aktifnya form

Itulah trik ngoding dengan jQuery Library yang mudah dilakukan dan mempercepat maupun mengefisiensi pekerjaan Anda dengan jQuery. Terus berlatih dan bereksperimen agar Anda semakin jago dalam pemrograman jQuery.

Jika Anda ingin tahu lebih banyak informasi tentang bahasa pemrograman, kunjungi selalu situs Web App di https://appkey.id/ atau download aplikasinya di Google Play Store agar Anda tidak ketinggalan informasi terbaru.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Mau posting artikel iklan?

Yuk klik dan ikuti ketentuan layanan dari kami, dapatkan penawaran paket dengan harga terbaik!

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Contoh PHP Curl : 10 Hal Luar Biasa yang dapat Anda Kembangkan dengan Curl

Meningkatnya jumlah aplikasi yang pindah ke web telah membuat "HTTP Scripting" lebih sering diminta dan diinginkan. Untuk dapat secara...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Rekomendasi 7 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Ini Cara Mudah Membuat Redirect PHP | Seri Belajar PHP

Fungsi redirect PHP sangat banyak digunakan dalam kehidupan berwebsite alias mengelola website. Script redirect PHP banyak dipergunakan oleh user...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

4 Cara Mengatasi Autentikasi Google Play Store dengan Cepat dan Mudah

Apakah Anda sedang mengalami masalah autentikasi Google Play Store? Permasalahan autentikasi Google Play Store adalah permasalahan umum sering dialami...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Rekomendasi 10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya