20 Metode jQuery Bermanfaat
Jadi anda telah bermain dengan Jquery untuk sementara waktu sekarang, Anda mulai menguasainya, dan anda benar-benar menyikainya. Apakah anda siap untuk membawa pengetahuan jQuery anda ke level dua? Hari ini saya akan menunjukan dua puluh fungsi dan fitur yang mungkin belum pernah anda lihat sebelumnya.
1. Afte() / before()
Terkadanga anda ingin memasukkan ke DOM,namaun anda tidak memiliki kait yang bagus untuk melakukannya. append() atau prepend() tidak akan memotongnya dan anda tidak ingin menambahkan elemen atau id tambahan. Kedua fungsi ini mungkin adalah apa yang anda butuhkan . Mereka memnugkinkan anda memasukkan elemen DOM sesaat sebelum atau sesudah elemen lain, sehingga elemen baru tersebut adalah saudari dari yang ada terlebih dahulu.
$('#child').after($('')).text('This becomes a sibling of #child'));
$('#child').before($('')).text('Same here, but this is go about #ch');
Anda juga dapat melakukan ini jika anda bekerja terutama dengan elemen yang ingin anda sisipkan. Cukup gunakan fungsi insertAfter() atau dengan insertBefore.
$('Menambahkan #child
').insertAfter($('#child'));
2. change()
Metode change adalah event handler seperti click() atau hover(). Event change adalah untuk textareas,input teks dan kotak seleksi dan akan dijalankan saat nilai elemen target dirubah. Perhatikan bahwa ini berbeda dengan event handler focus() atau blur() yang dijalankan saat elemen kehilangan fokus apakah nilainya telah berubah atau tidak.
Event change() sangat cocok untuk validasi sisi klien, ini jauh lebih baik daripada blur() karena anda tidakakan memvalidasi ulang jika pengguna tidak mengubah nilainya.
$('input[type=text]').change(function () {
switch (this.id) {
/* some validation code here */
}
});
3. Context
Context adalah parameter sekaligus properti di jQuery. Saat mengumpulkan elemn, anda bisa melewatkan parameter kedua ke fungsi jQery. Parameter ini, konteksnya, biasanya akan menjadi elemen DOM dan membatasi elemen yang dikembalikan ke item yang cocok dengan penyeleksi anda yang merupakan turunan dari elemen konteks. Itu kedengarannya agak membingungkan jadi perhatikan contoh dibawah ini :
HTML :
Hello World
Hello World
var hi1 = $('.hello'),
hi2 = $('.hello', $('#wrap').get(0));
console.group('hi1');
console.log("Number of elements in collection:", hi1.length);
console.log("Context of the collection:", hi1.context);
console.groupEnd();
console.group('hi2');
console.log("Number of elements in collection:", hi2.length);
console.log("Context of the collection:", hi2.context);
console.groupEnd();
Jika anda ingin mendapatkan elemen dalamevent yang dijalankan, anda dapat mengirimkan this sebagai contenxt.
4. data() / removeData()
Pernahkah Anda ingin menyimpan sedikit informasi tentang sebuah elemen? Anda bisa melakukannya dengan mudah dengan metode data(). Untuk menetapkan nilainya, Anda bisa melewatkan dua parameter (sebuah kunci dan sebuah nilai) atau hanya satu (sebuah objek).
$('#wrap').data('myKey', 'myValue');
$('#container').data({ myOtherKey : 'myOtherValue', year : 2010 });
Untuk mengembalikan data Anda, cukup panggil metode dengan kunci dari nilai yang Anda inginkan.
$('#container').data('myOtherKey'); //returns 'myOtherValue'
$('#container').data('year'); //returns 2010
Untuk mendapatkan semua data yang sesuai dengan elemen, panggil data tanpa parameter; Anda akan mendapatkan objek dengan semua kunci dan nilai yang Anda berikan pada item itu.
Jika Anda ingin menghapus pasangan kunci/nilai setelah menambahkannya ke elemen, cukup panggil removeData(), masukkan kunci yang benar.
$('#container').removeData('myOtherKey');
5. queue() / dequeue()
Fungsi queue() dan dequeue() berhubungan dengan animasi. Antrian adalah daftar animasi yang akan dieksekusi pada sebuah elemen; menjadi default, antrian elemen dinamakan 'fx.' Mari membuat skenario:
HTML :
- Start Animating
- Stop Animating
- Add to Queue
Javascript :
$('#start').click(animateBox);
$('#reset').click(function() {
$('div').queue('fx', []);
});
$('#add').click(function() {
$('div').queue( function(){
$(this).animate({ height : '-=25'}, 2000);
$(this).dequeue();
});
});
function animateBox() {
$('div').slideUp(2000)
.slideDown(2000)
.hide(2000)
.show(2000, animateBox);
}
Jadi, inilah yang terjadi: dalam fungsi animateBox, kita menyiapkan antrian animasi; perhatikan bahwa panggilan terakhir kembali ke fungsi, jadi ini akan terus mengulang antrian. Ketika kita klik li#start, fungsi dipanggil dan antrian dimulai. Saat kita klik li#reset, animasi saat ini diselesaikan, dan kemudian div berhenti beranimasi. Apa yang telah kita lakukan dengan jQuery adalah mengatur antrian yang bernama 'fx' (ingat, antrian default-nya) ke array kosong; intinya, kita sudah mengosongkan antrian. Dan bagaimana jika kita klik li#add? Pertama, kita memanggil fungsi queue di div; ini menambahkan fungsi yang kita lewatkan ke akhir antrian; karena kita tidak menentukan antrian sebagai parameter pertama, maka 'fx' digunakan. Dalam fungsi itu, kita menganimasikan div, lalu memanggil dequeue() pada div, yang menghilangkan fungsi ini dari antrian dan meneruskan antrian; antrian akan terus berulang, tapi fungsi ini tidak akan menjadi bagian darinya.
6. delay()
Saat Anda mengantrikan rantai animasi, Anda dapat menggunakan metode delay() untuk menjeda animasi dalam jangka beberapa waktu; lewatkan waktu itu sebagai parameter dalam milidetik.
$('div').hide().delay(2000).show(); // div will stay hidden for 2 second
7. bind(), unbind(), live() dan die()
Tahukah Anda bahwa saat Anda menambahkan event click ke elemen seperti ini . . .
$('#el').click(function () { /*******/ });
. . . Anda sesungguhnya hanya menggunakan pembungkus untuk metode bind()? Untuk menggunakan metode bind() itu sendiri, Anda bisa melewatkan jenis event sebagai parameter pertama dan kemudian fungsinya sebagai yang kedua.
Jika Anda menggunakan banyak event, Anda bisa mengkategorikannya dengan namespace; tambahkan saja tanda titik setelah nama event dan tambahkan namespace Anda.
$('#el').bind('click', function () { /*******/ });
$('#el').bind('click.toolbarEvents', function () { /*******/ }); // namespaced
Anda juga dapat menetapkan fungsi yang sama ke beberapa event secara bersamaan, dengan memisahkannya dengan spasi. Jadi jika Anda ingin membuat efek hover, Anda bisa memulai dengan cara ini:
$('#el').bind('mouseover mouseout', function () { /*******/ });
Anda juga bisa mengirimkan data ke fungsinya jika Anda mau, dengan menambahkan parameter ketiga (pada posisi kedua).
$('#el').bind('click', { status : 'user-ready' }, function () {
switch(event.data.status) {
/********/
}
});
Cepat atau lambat, Anda akan menemukan diri Anda memasukkan elemen ke DOM melalui sebuah event handler; namun, Anda akan mendapati bahwa event handler yang Anda buat dengan mengikat (atau pembungkusnya) tidak berfungsi untuk elemen yang disisipkan. Dalam kasus seperti ini, Anda harus menggunakan metode live() (atau delegate); ini akan menambahkan event handler ke elemen yang disisipkan yang sesuai.
$('.toggle').live(function () {
/* code */
$('Enable Beta Features').appendTo($('#optionsPanel'));
/* more code */
});
Untuk menghapus event handler yang dibuat dengan bind(), gunakan metode unbind(). Jika Anda tidak mengirimkan parameter apapun, itu akan menghapus semua handler; Anda bisa memasukkan jenis event untuk hanya menghapus event handler jenis tersebut; untuk menghapus event dari namespace tertentu, tambahkan namespace, atau gunakan sendiri. Jika Anda hanya ingin menghapus fungsi tertentu, kirimkan namanya sebagai parameter kedua.
$('button').unbind(); // removes all
$('button').unbind('click'); // removes all clicks
$('button').unbind('.toolbarEvents'); // removes all events from the toolbarEvents namespace
$('button').unbind('click.toolbarEvents'); // removes all clicks from the toolbarEvents namespace
$('button').unbind('click', myFunction); // removes that one handler
Perhatikan bahwa Anda dapat mengikat/melepaskan fungsi yang telah Anda kirimkan secara anonim; ini hanya bekerja dengan nama fungsi.
Jika Anda mencoba untuk melepaskan suatu event dari dalam fungsi yang dipanggil oleh event tersebut, cukup kirimkan unbind() objek event.
$('p').bind('click', function (event) {
$('p').unbind(event);
} );
Anda tidak dapat menggunakan unbind() untuk event live; sebagai gantinya, gunakan die(). Tanpa parameter, akan menghapus semua event live dari koleksi elemen; Anda juga bisa mengirimkan hanya jenis event, dari jenis event dan fungsinya.
$('span').die(); // removes all
$('span').die('mouseover'); // removes all mouseovers
$('span').die('mouseover', fn); // remove that one handler
Dan sekarang, Anda bisa menggunakan event jQuery dengan cekatan dan kuat!
Anda juga harus meninjau metode delegate(), karena ada kemungkinan kinerja yang signifikan untuk menggunakannya daripada live().
8.eq()
Jika Anda mencari elemen tertentu dalam satu set elemen, Anda dapat mengirimkan indeks elemennya ke metode eq() dan mendapatkan elemen jQuery tunggal. Masukkan indeks negatif untuk menghitung mundur dari akhir set.
var ps = $('p');
console.log(ps.length); // logs 3;
ps.eq(1).addClass('emphasis'); // just adds the class to the second item (index in zero-based)
Anda juga dapat menggunakan :eq() pada penyeleksi Anda; sehingga contoh sebelumnya bisa saja dilakukan seperti ini:
$('p:eq(1)').addClass('emphasis');
9. get()
Saat mendapatkan kumpulan elemen, jQuery mengembalikannya sebagai objek jQuery, jadi Anda memiliki akses ke semua metodenya. Jika Anda hanya menginginkan elemen DOM mentah, Anda bisa menggunakan metode get().
Anda bisa menentukan indeks untuk mendapatkan hanya satu elemen.
alert( $('p') ); // [object Object] - the jquery object
alert( $('p').get(1) ); // [object HTMLParagraphElement]
10. grep()
Jika Anda tidak terbiasa dengan shell Unix/Linux, Anda mungkin tidak pernah mendengar istilah grep. Di terminal, ini adalah utilitas pencarian teks; tapi di sini di jQuery, kita menggunakannya untuk menyaring array dari elemen. Ini bukan metode koleksi jQuery; Anda mengirimkan dalam array sebagai parameter pertama dan fungsi penyaringan sebagai parameter kedua. Fungsi filter itu mengambil dua parameternya sendiri: sebuah elemen dari array dan indeksnya. Fungsi filter itu harus melakukan pekerjaannya dan mengembalikan nilai true atau false. Menjadi default, semua item yang mengembalikan true akan disimpan. Anda dapat menambahkan parameter ketiga, sebuah boolean, untuk membalikkan hasilnya dan menyimpan yang mengembalikan false.
Jeffrey Way membuat tip cepat yang sangat bagus tentang $.grep belum lama ini; periksa itu untuk melihat bagaimana cara menggunakannya!
var nums = '1,2,3,4,5,6,7,8,9,10'.split(',');
nums = $.grep(nums, function(num, index) {
// num = the current value for the item in the array
// index = the index of the item in the array
return num > 5; // returns a boolean
});
console.log(nums) // 6,7,8,9,10
11. Pseudo-Selector
Sizzle, mesin CSS Selector di dalam jQuery, menawarkan beberapa pseudo-selector untuk membuat pekerjaan memilih elemen yang Anda inginkan dengan mudah. Lihatlah yang menarik ini:
$(':animated'); // returns all elements currently animating
$(':contains(me)'); // returns all elements with the text 'me'
$(':empty'); // returns all elements with no child nodes or text
$(':parent'); // returns all elements with child nodes or text
$('li:even'); // returns all even-index elements (in this case, s)
$('li:odd'); // can you guess?
$(':header'); // returns all h1 - h6s.
$('li:gt(4)'); // returns all elements with an (zero-based) index greater than the given number
$('li:lt(4)'); // returns all element with an index less than the given number
$(':only-child'); // returns all . . . well, it should be obvious
Ada lebih banyak, tentu saja, tapi berikut ini adalah yang unik.
12. isArray() / isEmptyObject() / isFunction() / isPlainObject()
Terkadang Anda ingin memastikan bahwa parameter yang dikirimkan ke sebuah fungsi adalah jenis yang sesuai; fungsi ini memudahkan untuk dilakukan. Tiga yang pertama cukup jelas.
$.isArray([1, 2, 3]); // returns true
$.isEmptyObject({}); // returns true
$.isFunction(function () { /****/ }); // returns true
Yang berikutnya tidak begitu jelas; isPlainObject() akan mengembalika true jika parameter yang dikirimkan dibuat sebagai objek literal, atau dengan new Object()
function Person(name) {
this.name = name
return this;
}
$.isPlainObject({})); // returns true
$.isPlainObject(new Object()); // returns true
$.isPlainObject(new Person()); // returns false
13 makeArray()
Saat Anda membuat kumpulan elemen DOM dengan jQuery, Anda akan mengembalikan objek jQuery; dalam beberapa situasi, Anda mungkin lebih menyukai bahwa ini menjadi array atau elemen DOM biasa; fungsi makeArray() bisa melakukannya.
var ps = $('p');
$.isArray(ps); //returns false;
ps = $.makeArray(ps);
$.isArray(ps); // returns true;
14 map()
Metode map() hampir mirip dengan grep(). Seperti yang Anda duga, dibutuhkan satu parameter, sebuah fungsi. Fungsi itu bisa memiliki dua parameter: indeks elemen saat ini dan elemen itu sendiri. Inilah yang terjadi: fungsi yang Anda kirimkan akan dijalankan sekali untuk setiap item dalam koleksi; berapa pun nilai yang dikembalikan dari fungsi tersebut menggantikan item yang dijalankan dalam koleksi.
$('ul#nav li a').map(function() {
return $(this).attr('title');
}); // now the collection is the link titles
// this could be the beginning of a tooltip plugin.
15 parseJSON()
Jika Anda menggunakan $.post atau $.get dan dalam situasi lain Anda bekerja dengan string JSON—Anda akan mendapati fungsi parseJSON berguna. Bagus bahwa fungsi ini menggunakan pengurai JSON bawaan browser jika memilikinya (yang jelas akan lebih cepat).
$.post('somePage.php', function (data) {
/*****/
data = $.parseJSON(data);
/*****/
});
16 proxy()
Jika Anda memiliki fungsi sebagai properti dari sebuah objek, dan fungsi itu menggunakan properti lain dari objek, Anda tidak dapat memanggil fungsi itu dari dalam fungsi lain dan mendapatkan hasil yang benar. Saya tahu itu membingungkan, jadi mari kita lihat contoh singkatnya:
var person = {
name : "Andrew",
meet : function () {
alert('Hi! My name is ' + this.name);
}
};
person.meet();
$('#test').click(person.meet);
Dengan sendirinya, person.meet() akan mengingatkan dengan benar; tapi saat dipanggil oleh event handler, itu akan mengingatkan "Hai! Nama saya tidak terdefinisi." Ini karena fungsinya tidak dipanggil dalam konteks yang tepat. Untuk mengatasinya, kita bisa menggunakan fungsi proxy():
$('#test').click($.proxy(person.meet, person));
// we could also do $.proxy(person, "meet")
Parameter pertama dari fungsi proxy adalah metode untuk dijalankan; yang kedua adalah konteks yang harus kita jalankan. Sebagai alternatif, kita bisa mengirimkan konteks dulu, dan nama metode sebagai string kedua. Sekarang Anda akan menemukan bahwa fungsi bersiap dengan benar.
Lebih suka tip cepat video pada $.proxy?
17 replaceAll() / replaceWith()
Jika Anda ingin mengganti elemen DOM dengan yang lain, inilah cara melakukannya. Kita dapat memanggil replaceAll() pada elemen yang telah kita kumpulkan atau ciptakan, mengirimkan penyeleksi untuk elemen yang ingin kita ganti. Dalam contoh ini, semua elemen dengan kelas error akan diganti dengan span yang telah kita buat.
$('The error has been corrected').replaceAll('.error');
Metode replaceWith() hanya membalikkan penyeleksi; menemukan yang ingin Anda ganti dulu:
$('.error').replaceWith('The error has been corrected');
Anda juga bisa mengirimkan dua fungsi metode ini yang akan mengembalikan elemen atau string HTML.
18 serialize() / serializeArray()
Metode serialize() adalah apa yang harus digunakan untuk mengkodekan nilai dalam form menjadi sebuah string.
HTML
JavaScript
console.log($('form').serialize()); // logs : name=John+Doe&url=http%3A%2F%2Fwww.example.com
Anda dapat menggunakan serializeArray() untuk mengubah nilai form ke dalam objek array, bukan string:
console.log($('form').serializeArray());
// logs : [{ name : 'name', value : 'John Doe'} , { name : 'url', value : 'http://www.example.com' } ]
19 siblings()
Anda mungkin bisa menebak apa yang dilakukan oleh siblings(); itu akan mengembalikan koleksi saudara dari item apa pun yang ada dalam koleksi asli Anda:
HTML :
. . .
. . .
. . .
$('p').siblings(); // returns div, span
20 wrap() / wrapAll() / wrapInner()
Ketiga fungsi ini memudahkan untuk membungkus elemen dalam elemen lainnya. Pertama, saya akan menyebutkan bahwa ketiganya mengambil satu parameter: elemen (yaitu string HTML, penyeleksi CSS, objek jQuery, atau elemen DOM) atau fungsi yang mengembalikan elemen.
Metode wrap() membungkus setiap item dalam koleksi dengan elemen yang ditujukan:
$('p').wrap(''); // all paragraphs are now wrapped in a div.warning
wrapAll() akan membungkus satu elemen di sekitar semua elemen dalam koleksi; ini berarti bahwa elemen dalam koleksi akan dipindahkan ke tempat baru di DOM; mereka akan berjajar di tempat elemen pertama dalam koleksi dan dibungkus di sana:
HTML, Sebelum:
. . .
. . .
. . .
. . .
. . .
. . .
JavaScript
$('.moveMe').wrapAll(document.createElement('div'));
HTML, Sesudah:
. . .
. . .
. . .
. . .
. . .
. . .
Akhirnya, fungsi wrapInner membungkus segala sesuatu di dalam setiap elemen dalam pengumpulan dengan elemen yang diberikan:
HTML, Sebelum:
. . .
. . .
JavaScript:
$('p').wrapInner($(''));
HTML, Sesudah:
. . .
. . .
0 komentar:
Post a Comment
Hi...
:)
Thank You for your Comment.
I will reply as soon as possible.