11 Script Fungsi JQUERY Sangat Penting

Edisi Tutorial Jquery, Anda baru menggunakan JQUERY sama halnya seperti saya, maka berikut ini adalah 10 script fungsi JQuery yang sangat penting dan akan sering anda gunakan.

Daftar Isi

1. Script JQuery Selector Umum Digunakan
2. Script JQuery Tambah dan Hapus Class CSS
3. Script JQUERY Merubah dan Mendapatkan Nilai HTML Textbox
4. Script JQuery Mendapatkan dan Merubah Elemen HTML
5. Script JQuery Mendapatkan dan Merubah Elemen Input Textarea
6. Script JQUERY Merubah Lebar dan Tinggi Elemen HTML
7. Script JQuery Merubah Properti CSS
8. Script JQuery Toggle Menampilkan dan Menyembunyikan Elemen
9. Script JQuery Fungsi Animasi Slide
10. Script JQuery Fungsi Animasi Fade
11. Script JQuery Fungsi Animasi – Animate
12. Script JQuery Auto Focus Cursor Form Input Pertama

1. Script JQuery Selector Umum Digunakan

Berikut ini adalah script selector JQuery yang umum digunakan untuk memanggil elemen website.

//--- COMMON JQUERY SELECTORS ---//
// get element by id
$("#ElementID").whatever();
// get element by css class
$(".ClassName").whatever();

// get elements where id contains a string
$("[id*='value']").whatever();

// get elements where id starts with a string
$("[id^='value']").whatever();

// get elements where id ends with a string
$("[id$='value']").whatever();

// get all elements of certain type (can use "p", "a", "div" - any html tag)
$("div").whatever();

2. Script JQuery Tambah dan Hapus Class CSS

Script JQuery berikut ini berfungsi untuk menambahkan dan menghapus class css secara dinamis.

//--- ADD & REMOVE CSS CLASSES ---///
// add css class
$("#DivID").addClass("newclassname");

// remove css class
$("#DivID").removeClass("classname");

// add & remove class together
$("#DivID").removeClass("classname").addClass("newclassname");

// add & remove multiple classes
$("#DivID").removeClass("classname classname2").addClass("newclassname newclassname2");

3. Script JQUERY Merubah dan Mendapatkan Nilai HTML Textbox

Script jquery berikut ini berfungsi untuk merubah dan mendapatkan nilai html Textbox secara dinamis.

//--- GET & SET TEXTBOX VALUE ---// 
//--- CAN ALSO BE USED ON ANY OTHER ELEMENT THAT HAS A VALUE PROPERTY ---//
// get the value of a textbox
var TextboxValue = $("#TextboxID").val();

// set the value of a textbox
$("#TextboxID").val("New Textbox Value Here");

4. Script JQuery Mendapatkan dan Merubah Elemen HTML

Script Jquery berikut ini dapat merubah dan mengambil nilai dari elemen html

//--- GET & SET HTML OF ELEMENT ---//
// get element html
var DivHTML = $("#DivID").html();

// set element html
$("#DivID").html("This is the new html");

5. Script JQuery Mendapatkan dan Merubah Elemen Input Textarea

Script jquery ini berfungsi untuk mendapatkan dan merubah elemen html form input text area.

//--- GET & SET TEXT OF ELEMENT ---//
// get text of element
var DivText = $("#DivID").text();

// set text of element
$("#DivID").text("This is the new text.");

6. Script JQUERY Merubah Lebar dan Tinggi Elemen HTML

Script Jquery dibawah ini berfungsi untuk merubah lebar dan tinggi elemen html.

//--- GET & SET ELEMENT'S WIDTH & HEIGHT
// get element height
var ElementHeight = $("#DivID").height();

// set element height
$("#DivID").height(300);

// get element width
var ElementWidth = $("#DivID").width();

// set element width
$("#DivID").width(600);

7. Script JQuery Merubah Properti CSS

Script jquery berikut ini berfungsi merubah properti css ke dalam nilai yang anda tentukan.

//--- CHANGE AN ELEMENT'S CSS PROPERTY ---//
$("#DivID").css("background-color", "#000");
$("#DivID").css("border", "solid 2px #ff0000");

8. Script JQuery Toggle Menampilkan dan Menyembunyikan Elemen

Script jquery toggle ini berfungsi menampilkan dan menyembunyikan elemen nilai html

//--- JQUERY TOGGLE/SHOW/HIDE ---//
// toggle hide/show of an element
$("#DivID").toggle(1000);

// do something when animation is complete
$("#DivID").toggle(1000, function () {
    alert("Toggle Complete");
});

// hide an element
$("#DivID").hide(1000);

// do something when animation is complete
$("#DivID").hide(1000, function () {
   alert("Hide Complete");
});

// show an element
$("#DivID").show(1000);

// do something when animation is complete
$("#DivID").show(1000, function () {
     alert("Show Complete");
});

9. Script JQuery Fungsi Animasi Slide

Script Jquery fungsi animasi slide up dan slide down memungkinkan anda membuat animasi menggunakan fungsi ini.

//--- JQUERY SLIDE - SLIDE AN ELEMENT IN AND OUT ---//
// toggle slide up and down
$("#DivID").slideToggle(1000);

// do something when animation complete
$("#DivID").slideToggle(1000, function () {
   alert("Slide Toggle Complete");
});

// slide up
$("#DivID").slideUp(1000);

// do something when animation is complete
$("#DivID").slideUp(1000, function () {
    alert("Slide Up Complete");
});

// slide down
$("#DivID").slideDown(1000);

// do something when animation is complete
$("#DivID").slideDown(1000, function () {
    alert("Slide Down Complete");
});

10. Script JQuery Fungsi Animasi Fade

Script Jquery animasi memungkinkan anda untuk membuat animasi fade seperti gambar muncul dari gradasi transparan ke solid.

//--- JQUERY FADE - FADE AN ELEMENT IN, OUT & TO ---//
// fade in
$("#DivID").fadeIn(1000);

// do something when animation complete
$("#DivID").fadeIn(1000, function () {
    alert("Fade In Complete");
});

// fade out
$("#DivID").fadeOut(1000);

// do something when animation is complete
$("#DivID").fadeOut(1000, function () {
    alert("Fade Out Complete");
});

// fade to (fades to specified opacity)
$("#DivID").fadeTo(1000, 0.25);

// do something when animation is complete
$("#DivID").fadeTo(1000, 0.25, function () {
    alert("Fade To Complete");
});

11. Script JQuery Fungsi Animasi – Animate

Script Jquery untuk animasi anda dapat membuat animasi sesuai kreasi dengan menggunakan fungsi ini.

//--- ANIMATE (EXAMPLE USES OPACITY, BUT CAN USE ANY CSS PROPERTY. ---//
//--- NOTE SOME MY REQUIRE THE USE OF A PLUGIN SUCH AS JQUERY COLOR ANIMATION PLUGIN. ---//
$("#DivID").animate({ opacity: 0.25 }, 1000);

// do something when animation complete
$("#DivID").animate({ opacity: 0.25 }, 1000, function () {
    alert("Opacity Animation Complete");
});

12. Script JQuery Auto Focus Cursor Form Input Pertama

Bonus, script Jquery ini berfungsi untuk auto focus cursor pada elemen form input yang pertama kali sehingga anda tidak perlu melakukan ekstra klik. Biasanya script jquery auto focus ini cocok diletakkan pada form login atau form-form entri data.

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
       // focus on the first text input field in the first field on the page
       $("input:text:visible:first").focus();
    });
</script>

Selamat mencoba 11 Script Fungsi Jquery ini, jangan lupa di Bookmark ya karena mungkin beberapa fungsi ini akan anda butuhkan di kemudian hari.

Dapatkan Paket WordPress Hosting hanya 185rb/tahun hanya di PusatHosting.Com