Pengertian jQuery

Sekarang kita menggunakan JQUERY sama halnya seperti yang lain, maka berikut ini adalah beberapa script fungsi JQuery yang sangat penting dan akan sering anda gunakan.

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

contoh lain

1. 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");

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

3. 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");
});

4. 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");
});

5. 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");
});

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