Pada postingan kali ini saya akan membuat artikel tentang tutorial tentang penggunaan metode jQuery Traversing,
jQuery Traversing
jQuery Traversing, yang berarti "bergerak melewati", yang digunakan untuk "mencari" (atau memilih) elemen HTML berdasarkan hubungan mereka dengan unsur-unsur lain. Dimulai dengan satu pilihan dan bergerak melewati seleksi yang sampai mencapai elemen yang diinginkan.
Metode-metode jQuery Traversing yang dapat digunakan diantaranya :
add() : Menambahkan elemen ke set elemen cocok
addBack(): Menambahkan set sebelumnya ke elemen yang ada
andSelf() : Metode dari versi 1.8 . Alias untuk addBack ( )
children() : Mengembalikan semua children dari elemen yang dipilih
closest() : Mengembalikan ancestor pertama dari elemen yang dipilih
contents() : Mengembalikan semua children dari elemen yang dipilih ( termasuk teks dan komentar node )
each() : Menjalankan fungsi untuk setiap elemen cocok
end() : Mengakhiri operasi penyaringan terbaru dalam rantai saat ini, dan mengembalikan set elemen yang cocok ke keadaan sebelumnya
eq() : Mengembalikan sebuah elemen dengan nomor indeks tertentu dari elemen yang dipilih
filter() : Mengurangi set elemen dicocokkan dengan orang-orang yang sesuai dengan pemilih atau lulus tes funnction
find() : Mengembalikan turunan elemen dari elemen yang dipilih
first() : Mengembalikan elemen pertama dari elemen yang dipilih
has() : Mengembalikan semua elemen yang memiliki satu atau lebih elemen dalam elemen tersebut
is() : Mencek set elemen dicocokkan pada objek pemilih / elemen / jQuery , dan return true jika setidaknya salah satu dari elemen-elemen ini sesuai dengan argumen yang diberikan
last() : Mengembalikan elemen terakhir dari elemen yang dipilih
map() : Melewati setiap elemen dalam dalam set yang cocok melewati function , menghasilkan objek jQuery baru yang berisi nilai-nilai kembali
next() : Mengembalikan elemen sibling yang selanjutnya dari elemen yang dipilih
nextAll() : Mengembalikan semua elemen sibling yang selanjutnya dari elemen yang dipilih
nextUntil() : Mengembalikan semua elemen sibling yang selanjutnya antara dua argumen yang diberikan
not() : Hapus elemen dari set elemen cocok
offsetParent() : Mengembalikan elemen parent pertama yang diposisikan
parent() : Mengembalikan langsung elemen parent dari elemen yang dipilih
parents() : Mengembalikan semua elemen ancestor dari elemen yang dipilih
parentsUntil() : Mengembalikan semua elemen ancestor antara dua argumen yang diberikan
prev() : Mengembalikan elemen sibling sebelumnya dari elemen yang dipilih
prevAll() : Mengembalikan semua elemen sibling sebelumnya dari elemen yang dipilih
prevUntil() : Mengembalikan semua elemen sibiling sebelumnya antara dua argumen yang diberikan
siblings() : Mengembalikan semua elemen sibling dari elemen yang dipilih
slice() : Mengurangi set elemen dicocokkan dengan subset yang ditentukan oleh berbagai indeks
Berdasarkan metode-metode yang telah saya sebutkan diatas mungkin saya hanya akan menjelaskan tentang salah satu dari metode, yaitu jQuery Parent, karena terlihat banyak sekali metode-metode yang dapat digunakan.
jQuery parent()
Metode jQuery parent() metode yang digunakan untuk mengembalikan langsung elemen parent dari elemen yang dipilih. Kalian dapat melakukan tindakan yang diinginkan pada elemen parent(induk) setelah dikembalikan.
Contoh :
silahkan copykan kodingan dibawah ini ke notepad dan save dengan nama jquery_parent.hmtl
<html>
<head>
<title>Metode jQuery Traversing Parent</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("h3").parent().css("background-color","yellow");
});
</script>
</head>
<body>
<span id="spanParent">Parent dari elemen h3
<h3>Ini adalah h3 sebagai elemen child(anak) </h3>
</span>
</body>
</html>
Berdasarkan metode-metode yang telah saya sebutkan diatas mungkin saya hanya akan menjelaskan tentang salah satu dari metode, yaitu jQuery Parent, karena terlihat banyak sekali metode-metode yang dapat digunakan.
jQuery parent()
Metode jQuery parent() metode yang digunakan untuk mengembalikan langsung elemen parent dari elemen yang dipilih. Kalian dapat melakukan tindakan yang diinginkan pada elemen parent(induk) setelah dikembalikan.
Contoh :
silahkan copykan kodingan dibawah ini ke notepad dan save dengan nama jquery_parent.hmtl
<html>
<head>
<title>Metode jQuery Traversing Parent</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("h3").parent().css("background-color","yellow");
});
</script>
</head>
<body>
<span id="spanParent">Parent dari elemen h3
<h3>Ini adalah h3 sebagai elemen child(anak) </h3>
</span>
</body>
</html>
bisa terlihat bahwa pada kodingan elemen parent adalah <span id="spanParent"> dan <h3> sebagai elemen child(anak). Pada metode parent() dikodingan digunakan untuk mengubah background color(warna latarbelakang) dari elemen parent yaitu <span> merubahnya menjadi warna kuning. Terlihat seperti gambar dibawah ini :
Sepertinya hanya itu saja yang saya dapat jelaskan pada postingan kali ini, Semoga artikel ini bermanfaat untuk para pengunjung web yang ingin belajar jQuery Traversing.
Tidak ada komentar:
Posting Komentar