Membuat website yang menarik dan interaktif, segala bentuk library JavaScript banyak digunakan oleh developer. Namun, developer sering kali mengalami kesulitan menggunakan JavaScript karena sintaksnya yang sangat rumit. Terlebih bagi para pemula yang masih belajar cara membangun sebuah website. Oleh karena itu, jQuery hadir sebagai solusi untuk membantu  developer memahami dan menggunakan JavaScript saat proses pengembangan aplikasi web dilakukan. Pada artikel ini, kami akan membahas mengenai apa itu jQuery, mulai dari pengertian, fungsi, hingga contohnya. Yuk, simak.

Apa itu JQuery? Arti, Fungsi, Fitur, dan Contohnya

Apa itu jQuery

Diperkenalkan oleh John Resig pada tahun 2006, Apa itu jQuery?, jQuery adalah library JavaScript yang populer digunakan untuk memudahkan dalam menggunakan dan menerapkan JavaScript.

Bahasa pemrograman ini membuat pemrosesan pada HTML menjadi lebih sederhana, seperti manipulasi dokumen, animasi, event handling, dan Ajax. Hal ini dikarenakan jQuery didukung dengan API yang mudah untuk dimplementasikan dan dapat berjalan di berbagai macam browser. Sehingga konsistensi dari suatu code/script dapat berjalan dengan lancar di berbagai jenis browser terus terjaga.

Fungsi JQuery

• Bahasa pemrograman jQuery memiliki fungsi sebagai library JavaScript yang akan membantu developer mengatur interaksi antara JavaScript dengan HTML atau website.
• Mempermudah penulisan kode, kode yang ditulis menjadi lebih singkat dan jelas.
• Mampu menyediakan interface secara konsisten dan bekerja pada semua jenis browser, sehingga jQuery mampu mengatasi berbagai inkonsistensi antar browser.
• Mempermudah pencarian, penyeleksian, melakukan manipulasi elemen-elemen DOM pada JavaScript.

Fitur-Fitur jQuery

JQuery memiliki beberapa fitur yang cukup lengkap, di antaranya :

• Menyeleksi elemen-elemen DOM menggunakan Sizzle;
• Manipulasi HTML/DOM;
• Manipulasi CSS;
• Animasi dan efek;
• Ajax;
• HTML Event Methods;
• CSS3 Compliant;
• Cross-Browser.

Contoh jQuery

Berikut bukti bahwa jQuery mampu memudahkan aktivitas pengembangan. Berikut beberapa contohnya :

• JQuery Efek Animasi

$(document).ready(function(){

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

  $(“div”).animate({left: ‘250px’});

});

});

• JQuery Fade In dan Fade Out

$(document).ready(function(){

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

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

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

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

});

});

• Code Snippet untuk Manipulasi CSS

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

$(“h1, h2, p”).toggleClass(“blue”);

});

• JQuery efek hide and show

$(document).ready(function(){

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

 $(“p”).hide();

});

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

 $(“p”).show();

});

});

Baca Juga: Skill yang Harus Dikuasai Jika Ingin Menjadi Human Resource Andal

[fusion_builder_container hundred_percent=”no” hundred_percent_height=”no” hundred_percent_height_scroll=”no” hundred_percent_height_center_content=”yes” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” status=”published” publish_date=”” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” border_size=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=””][fusion_builder_row][fusion_builder_column type=”1_1″ spacing=”” center_content=”yes” link=”” target=”_self” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_image_id=”” background_color=”” background_image=”” background_position=”left top” undefined=”” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” border_radius_top_left=”” border_radius_top_right=”” border_radius_bottom_left=”” border_radius_bottom_right=”” box_shadow=”no” box_shadow_vertical=”” box_shadow_horizontal=”” box_shadow_blur=”0″ box_shadow_spread=”0″ box_shadow_color=”” box_shadow_style=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”no”][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=””]

Klik dibawah ini untuk informasi tentang IT Training dan Info Loker seputar IT

⇓

[/fusion_text][fusion_button link=”https://api.whatsapp.com/send?phone=62816999735″ text_transform=”uppercase” title=”” target=”_self” link_attributes=”” alignment=”center” modal=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” color=”default” button_gradient_top_color=”” button_gradient_bottom_color=”” button_gradient_top_color_hover=”” button_gradient_bottom_color_hover=”” accent_color=”” accent_hover_color=”” type=”” bevel_color=”” border_width=”” size=”” stretch=”default” shape=”” icon=”fa-whatsapp fab” icon_position=”left” icon_divider=”no” animation_type=”fade” animation_direction=”static” animation_speed=”0.3″ animation_offset=””]Hubungi Kami[/fusion_button][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]