10 Kumpulan Code Livery atau Skin Mobil Fr Legends Tanpa Password

(Sumber : MalasCoding . Com)

Sekarang kita masuk ke Tutorial JQuery yang terakhir nih Sob. Jadi simak baik - baik ya!

Menangani Event
JQuery menyediakan cara yang efisien untuk menangani acara. Peristiwa terjadi ketika pengguna melakukan tindakan, seperti mengklik elemen, menggerakkan mouse, atau mengirimkan formulir.
Ketika suatu peristiwa terjadi pada elemen target, fungsi handler dieksekusi.
Sebagai contoh, katakanlah kita ingin menangani acara klik pada elemen dengan id = "demo" dan menampilkan tanggal saat ini ketika tombol diklik. Menggunakan JavaScript murni, kodenya terlihat seperti:

var x = document.getElementById("demo");
x.onclick = function () {
  document.body.innerHTML = Date();
  }

Acara yang sama dapat ditangani menggunakan jQuery dengan kode berikut:

$("#demo").click(function() {
  $("body").html(Date());
  });

Seperti yang Anda lihat, kode jQuery lebih pendek dan lebih mudah dibaca dan ditulis.
Perhatikan, bahwa nama acara disediakan tanpa awalan "on" (mis., Klik di JavaScript adalah klik di jQuery).
Fungsi yang dieksekusi ketika suatu peristiwa dipecat disebut event handler.

Peristiwa Umum
Berikut ini adalah acara yang paling sering digunakan:

• Acara Mouse:

klik terjadi ketika suatu elemen diklik.
dblklik terjadi ketika sebuah elemen diklik dua kali.
mouseenter terjadi ketika pointer mouse lebih (memasuki) elemen yang dipilih.
mouseleave terjadi ketika pointer mouse meninggalkan elemen yang dipilih.
mouseover terjadi ketika pointer mouse berada di atas elemen yang dipilih.

Acara Keyboard:
keydown terjadi ketika tombol keyboard ditekan.
keyup terjadi ketika tombol keyboard dilepaskan.

• Bentuk Acara:

kirim terjadi ketika formulir dikirimkan.
perubahan terjadi ketika nilai elemen telah diubah.
fokus terjadi ketika suatu elemen mendapat fokus.
blur terjadi ketika suatu elemen kehilangan fokus.

• Dokumen Acara:

ready terjadi ketika DOM telah dimuat.
perubahan ukuran terjadi ketika jendela browser berubah ukuran.
gulir terjadi ketika pengguna menggulir di elemen yang ditentukan.

Sebagai contoh, mari kita ubah konten div ketika pengguna mengetik di bidang input. Untuk melakukan itu, kita perlu menangani peristiwa keydown, yang terjadi ketika tombol pada keyboard ditekan:
HTML:

<input type="text" id="name" />
<div id="msg"></div>

JavaScript:

$("#name").keydown(function() {
  $("#msg").html($("#name").val());
  });

Kode di atas menangani event keydown untuk elemen dengan id = "name" dan menetapkan konten div dengan id = "msg" nilai bidang input.
Nama acara cukup jelas, jadi cukup bereksperimen untuk melihatnya beraksi.

Menangani Acara

Cara lain untuk menangani acara di jQuery adalah dengan menggunakan metode on ().
Metode on () digunakan untuk melampirkan peristiwa ke elemen yang dipilih. Sebagai contoh:

$( "p" ).on( "click", function() {
  alert("clicked");
  });

Seperti yang Anda lihat, nama acara dilewatkan sebagai argumen pertama ke metode on (). Argumen kedua adalah fungsi handler.

Metode on () berguna untuk mengikat fungsi handler yang sama ke beberapa peristiwa. Anda dapat memberikan beberapa nama acara yang dipisahkan oleh spasi sebagai argumen pertama. Misalnya, Anda bisa menggunakan pengendali acara yang sama untuk acara klik dan double klik.

mati()

Argumen metode off () adalah nama acara yang ingin Anda hapus handlernya.
Anda dapat menghapus event handler menggunakan metode off ().
Sebagai contoh:

$("div").on("click", function() {
  alert('Hi there!');
    $("div").off("click");
    });

Objek Acara

Setiap fungsi penanganan acara dapat menerima objek acara, yang berisi properti dan metode yang terkait dengan acara:
pageX, pageY posisi mouse (koordinat X & Y) pada saat peristiwa itu terjadi, relatif ke kiri atas halaman.
ketik jenis acara (mis. "klik").
dimana tombol atau tombol yang ditekan.
data data apa pun yang dilewatkan saat acara terikat.
menargetkan elemen DOM yang memprakarsai acara.
preventDefault () mencegah aksi default acara (mis., mengikuti tautan).
stopPropagation () Hentikan acara agar tidak menggelembung ke elemen lain.
Anda dapat melihat kursus JavaScript kami untuk informasi lebih lanjut tentang properti acara.
Misalnya, mari kita menangani acara klik pada elemen <a> dan mencegahnya mengikuti tautan yang disediakan dalam atribut href:
HTML:

<a href="https://teknologi-game.blogspot.com">Click me</a>

JavaScript

$( "a" ).click(function(event) {
  alert(event.pageX);
    event.preventDefault();
    });

Kode di atas mengingatkan posisi mouse pada saat klik dan mencegah mengikuti tautan. Seperti yang Anda lihat, objek acara dilewatkan ke fungsi event handler sebagai argumen.

Acara Pemicu
Kami juga dapat memicu acara secara terprogram menggunakan metode trigger (). Misalnya, Anda dapat memicu acara klik tanpa pengguna benar-benar mengklik elemen:

$("div").click(function() {
   alert("Clicked!");
   });
   $("div").trigger("click");

Kode ini memicu acara klik untuk elemen yang dipilih. Metode trigger () tidak dapat digunakan untuk meniru acara browser asli, seperti mengklik kotak input file atau tag anchor. Hanya acara dalam sistem acara jQuery yang dapat ditangani.

Daftar yang Harus Dilakukan
Mari kita buat proyek daftar yang harus dilakukan menggunakan konsep yang telah kita pelajari.
Daftar yang Harus Dilakukan akan dapat menambahkan item baru ke daftar, serta menghapus item yang ada.
Pertama, kami membuat HTML:

<h1>Daftar-List-Saya</h1>
<input type="text" placeholder="New item" />
<button id="add">Add</button>
<ol id="mylist"></ol>

Mengklik tombol harus menambahkan nilai kolom input ke daftar <ol> kami.

Daftar yang Harus Dilakukan
Sekarang, setelah HTML siap, kita dapat mulai menulis kode jQuery Anda.
Pertama, kami menangani acara klik untuk tombol:

$ (function () {
   $ ("# add"). on ("click", function () {
     // pengatur acara
   });
});

Di dalam event handler kita memilih nilai dari field input dan membuat elemen <li> baru, menambahkannya ke daftar:

var val = $ ("input"). val ();
if (val! == '') {
   var elem = $ ("<li> </li>") .text (val);
   $ (elem) .append ("<button class = 'rem'> X </button>");
   $ ("# daftar saya"). tambahkan (elem);
   $ ("input"). val (""); // kosongkan input
}

Kode di atas mengambil nilai dari field input, menugaskannya ke variabel val. Pernyataan if memeriksa bahwa nilainya tidak kosong dan kemudian membuat elemen <li> baru. Tombol untuk menghapusnya ditambahkan, setelah itu elemen yang baru dibuat ditambahkan ke daftar <ol id = "mylist">.

Berikut kode lengkap dalam tindakan:

$ (function () {
   $ ("# add"). on ("click", function () {
     var val = $ ("input"). val ();
     if (val! == '') {
       var elem = $ ("<li> </li>") .text (val);
       $ (elem) .append ("<button class = 'rem'> X </button>");
       $ ("# daftar saya"). tambahkan (elem);
       $ ("input"). val ("");
     }
   });
});

Tombol hapus belum berfungsi. Saya akan menanganinya di bagian selanjutnya!
Daftar yang Harus Dilakukan

Yang tersisa untuk dilakukan adalah menangani event klik pada tombol class = "rem" dan menghapus elemen <li> yang sesuai dari daftar.

$ (". rem"). on ("click", function () {
   $ (ini) .parent (). hapus ();
});

Ingat, ini adalah objek saat ini. Kode di atas menghapus induk dari objek saat ini, yang dalam kasus kami adalah induk dari tombol hapus, elemen <li>.

Kode lengkap:

$ (function () {
   $ ("# add"). on ("click", function () {
     var val = $ ("input"). val ();
     if (val! == '') {
      var elem = $ ("<li> </li>") .text (val);
      $ (elem) .append ("<button class = 'rem'> X </button>");
      $ ("# daftar saya"). tambahkan (elem);
      $ ("input"). val ("");
      $ (". rem"). on ("click", function () {
       $ (ini) .parent (). hapus ();
      });
     }
   });
});

To-Do List hanyalah demonstrasi singkat tentang cara menangani acara dan membangun proyek sederhana.

Hide & Show

JQuery memiliki beberapa efek yang mudah diterapkan untuk membuat animasi.

Metode hide () dan show () digunakan untuk menyembunyikan dan menampilkan elemen yang dipilih.
Metode toggle () digunakan untuk beralih antara elemen bersembunyi dan menampilkan.
Sebagai contoh:

$ (function () {
   $ ("p"). klik (function () {
     $ ("div"). toggle ();
   });
});

Metode hide / show / toggle dapat mengambil argumen opsional, kecepatan, yang menentukan kecepatan animasi dalam milidetik.
Sebagai contoh, mari kita lewati 1000 milidetik sebagai argumen kecepatan ke metode toggle ():

$ (function () {
   $ ("p"). klik (function () {
     $ ("div"). toggle (1000);
   });
});

Metode hide / show / toggle juga dapat mengambil panggilan balik parameter opsional kedua, yang merupakan fungsi yang akan dieksekusi setelah animasi selesai.

Fade In / Out
Mirip dengan metode sembunyikan / tampilkan, jQuery menyediakan metode fadeIn / fadeOut, yang memudar elemen masuk dan keluar dari visibilitas.
Sama seperti metode toggle () yang beralih antara menyembunyikan dan menampilkan, metode fadeToggle () memudar masuk dan keluar.
Mari kita lihat aksi fadeToggle ():

$ (function () {
   $ ("p"). klik (function () {
       $ ("div"). fadeToggle (1000);
         });
         });

Sama seperti toggle (), fadeToggle () membutuhkan dua parameter opsional: kecepatan dan panggilan balik.
Metode lain yang digunakan untuk fading adalah fadeTo (), yang memungkinkan fading ke opacity yang diberikan (nilai antara 0 dan 1). Misalnya: $ ("div"). FadeTo (1500, 0.7);

Slide Up & Down
Metode slideUp () dan slideDown () digunakan untuk membuat efek geser pada elemen.
Sekali lagi, mirip dengan metode beralih sebelumnya, metode slideToggle () beralih antara efek geser dan dapat mengambil dua parameter opsional: kecepatan dan panggilan balik.
Sebagai contoh:

$ (function () {
  $ ("p"). klik (function () {
      $ ("div"). slideToggle (500);
        });
        });

Animate ()
Metode animate () memungkinkan Anda menganimasikan ke nilai yang ditetapkan, atau ke nilai relatif ke nilai saat ini.
Anda perlu mendefinisikan properti CSS yang akan dianimasikan sebagai parameternya dalam format JSON (pasangan "kunci": "nilai").
Parameter kedua menentukan kecepatan animasi.
Misalnya, kode berikut menjiwai properti lebar div dalam 1 detik ke nilai 250px:

$ ("div"). klik (function () {
  $ ("div"). animate ({width: '250px'}, 1000);
  });

Perhatikan format JSON untuk menyediakan parameter CSS. Sintaks JSON juga digunakan dalam modul sebelumnya ketika memanipulasi properti CSS.
Anda dapat menganimasikan setiap properti CSS menggunakan sintaks yang disebutkan di atas, tetapi ada satu hal penting yang perlu diingat: semua nama properti harus dikunci unta saat digunakan dengan metode animate () (camelCase adalah praktik menulis kata atau frasa majemuk sehingga setiap kata atau singkatan dimulai dengan huruf kapital dengan kata pertama dalam huruf kecil).
Anda harus menulis paddingLeft alih-alih padding-kiri, marginRight, bukan margin-right, dan sebagainya.

Beberapa properti dapat dianimasikan secara bersamaan dengan memisahkannya dengan koma.
Sebagai contoh:

$ ("div"). animate ({
  weight: '250px',
    hight: '250px'
    }, 1000);

Dimungkinkan juga untuk menentukan nilai relatif (nilainya kemudian relatif terhadap nilai elemen saat ini). Ini dilakukan dengan meletakkan + = atau - = di depan nilai:

$ ("div"). animate ({
  lebar: '+ = 250px',
    tinggi: '+ = 250px'
    }, 1000);

Untuk menghentikan animasi sebelum selesai, jQuery menyediakan metode stop ().

Antrian Animasi
Secara default, jQuery hadir dengan fungsi antrian untuk animasi.
Ini berarti bahwa jika Anda menulis beberapa panggilan animate () satu demi satu, jQuery membuat antrian "internal" untuk panggilan metode ini. Kemudian ia menjalankan panggilan satu per satu.
Sebagai contoh:

var div = $("div");
div.animate({opacity: 1});
div.animate({height: '+=100px', width: '+=100px', top: '+=100px'}, 500);
div.animate({height: '-=100px', width: '-=100px', left: '+=100px'}, 500);
div.animate({height: '+=100px', width: '+=100px', top: '-=100px'}, 500);
div.animate({height: '-=100px', width: '-=100px', left: '-=100px'}, 500);
div.animate({opacity: 0.5});

Setiap panggilan metode animate () akan berjalan satu demi satu.
Ingat, untuk memanipulasi posisi elemen, Anda perlu mengatur properti posisi CSS elemen menjadi relatif, tetap, atau absolut.
Metode animate (), seperti metode hide / show / fade / slide, dapat menggunakan fungsi callback opsional sebagai parameternya, yang dieksekusi setelah efek saat ini selesai.

Menu drop down
Mari kita buat menu drop-down sederhana yang akan terbuka setelah mengklik pada item menu.
HTML:

<div class="menu">
  <div id="item">Drop-Down</div>
  <div id="submenu">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

JavaScript:

$("#item").click(function() {
  $("#submenu").slideToggle(500);
});

Kode di atas menangani event klik elemen id = "item" dan membuka / menutup submenu dalam 500 milidetik.

Oke, demikian dulu artikel kali ini. Yah seharusnya TUTORIAL JQUERY kita sudah habis Sob. Jadi Sobat bisa belajar dengan mudah tanpa harus menunggu updatean - updateannya. Next kita akan Bahas Tuntas Sejarah Jquery. Tunggu ya sob!


Salam Tekno~