Media Pengembangan Web & App | by APPKEY

Pembuatan WebsiteWeb Programming10 Trik Ngoding dengan Jquery Library ini Patut Dicoba!

10 Trik Ngoding dengan Jquery Library ini Patut Dicoba!

-

Html code here! Replace this with any non empty raw html code and that's it.

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.

10 Trik Ngoding jQuery Library

jquery-library.

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  Cara Git Clone untuk Mendownload Repository Github ke Komputer Kita

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  Mengenal Quill JS, Text Editor Modern Berbasis JavaScript

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);
 );
 
});

Itulah 10 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

Rekomendasi 10 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...

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...

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...

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...

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...

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...

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...

7 Aplikasi Membuat Aplikasi Android Secara Offline

Aplikasi membuat aplikasi android saat ini banyak dicari penekun IT untuk membuat aplikasi Android secara offline tanpa harus menggunakan...

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...

Mau Jadi Front End Developer? Kamu Perlu Menguasai 10 Skill Berikut Ini!

Secara umum untuk membuat sebuah website impian Anda menjadi nyata, Anda hanya perlu datang ke web developer dan menyampaikan...

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