Induk jQuery dengan metode kelas memungkinkan kita untuk mencari induk dari objek jQuery yang mewakili sekumpulan elemen DOM di pohon DOM dan membuat objek jQuery baru dari elemen yang cocok. Metode parent() dan parents() hampir identik, dengan pengecualian bahwa yang terakhir hanya bergerak satu tingkat ke atas pohon DOM. Opsional, metode ini menerima ekspresi pilihan dari jenis yang sama dengan fungsi $(). Jika pemilih disediakan, elemen akan difilter berdasarkan apakah mereka cocok atau tidak
induk jQuery dengan ikhtisar kelas
- Pemilih kelas jQuery memilih semua komponen yang memiliki kelas tertentu. Atribut kelas dari elemen HTML disebut sebagai atribut kelas
- Kelas induk jQuery digunakan untuk menentukan kelas elemen yang sedang dipilih
- Seharusnya tidak ada nomor di awal. Beberapa komponen HTML ditata menggunakannya. Untuk memilih bagian, atau elemen, dari halaman HTML, jQuery menggunakan pemilih gaya CSS
- Kemudian kita dapat menggunakan metode atau fungsi jQuery untuk melakukan sesuatu dengan komponen jQuery
- Ketik tanda dolar diikuti dengan tanda kurung untuk menggunakan salah satu dari pemilih ini $(). Fungsi jQuery() disingkat jQuery
- Letakkan elemen yang ingin kita pilih di dalam tanda kurung. Kutipan tunggal atau ganda keduanya dapat diterima. Kemudian, mengikuti tanda kurung, beri tanda titik setelah teknik yang ingin kita terapkan
- Pemilih kelas dan ID di jQuery mirip dengan pemilih CSS. Pemilih ID di CSS digunakan untuk menerapkan gaya ke elemen HTML tertentu
- Atribut ID elemen HTML harus cocok dengan pemilih ID CSS. Tidak seperti kelas yang dapat diterapkan ke beberapa komponen di seluruh situs, ID unik hanya dapat diterapkan ke satu elemen
- Properti ID CSS akan lebih diutamakan daripada properti Kelas CSS. Tulis karakter hash (#) diikuti dengan id elemen untuk mengambilnya
Bagaimana menemukan induk jQuery dengan kelas?
Ada dua pendekatan untuk menemukan jQuery dengan kelas adalah sebagai berikut. Pertama, dengan bantuan nama kelas, kita dapat menentukan kelas induk dari suatu elemen dalam HTML
Mulai Kursus Pengembangan Perangkat Lunak Gratis Anda
Pengembangan web, bahasa pemrograman, pengujian Perangkat Lunak & lainnya
Paket Pengembangan Perangkat Lunak Semua dalam Satu(600+ Kursus, 50+ proyek)
Harga
Lihat Kursus
600+ Kursus Daring. 50+ proyek. 3000+ Jam. Sertifikat yang Dapat Diverifikasi. Akses Seumur Hidup
4. 6 (85.265 peringkat)
Pendekatan 1
- Metode terdekat() pada dasarnya digunakan untuk mengembalikan item dari leluhur pertama. Jika kelas leluhur ada, itu akan mengembalikan nama kelas;
- Metode on() digunakan untuk memilih event handler untuk sekelompok komponen. Kemudian, ketika pengguna menekan tombol, fungsi tersebut dipanggil
Pendekatan 2
- Penangan kejadian untuk komponen yang dipilih dipilih menggunakan metode on(). Kemudian, ketika pengguna menekan tombol, fungsi tersebut dipanggil
- Metode parent() digunakan untuk mendapatkan semua leluhur item yang ditentukan. Jika kelas leluhur ada, ia mengembalikan nama kelas;
- Pendekatan 1 dan 2 digunakan untuk menemukan kelas induk jQuery
Elemen induk menggunakan jQuery
- jQuery adalah framework Javascript gratis yang memfasilitasi interaksi antara dokumen HTML dan CSS
- Persamaan pemilih ke dalam teknik induk dapat membantu menyederhanakan banyak hal. Kita hanya perlu mengetahui level kita untuk menggunakannya. Jika kita tidak perlu mengetahui kelas node induknya
- Orangtua () mengembalikan larik anak dari simpul induk asli ke simpul HTML, orangtua () mengembalikan larik anak. Untuk mendapatkan induk ke-n, panggil metode induk dengan argumen eq (n-1)” (0-diindeks)
- Metode terdekat () memindai pohon DOM untuk item ini dan leluhurnya dan membuat objek jQuery baru dari elemen yang cocok dengan pengujian elemen itu sendiri
- Ini bekerja melalui pendahulu elemen DOM, mengembalikan yang pertama yang cocok dengan pemilih yang kami berikan sebagai input
- Metode parent() melintasi pohon DOM ke induk langsung dari masing-masing elemen ini dan membuat objek jQuery baru dari elemen yang cocok, mengingat objek jQuery yang mewakili sekelompok elemen DOM
- Teknik ini mirip dengan parents() dengan pengecualian bahwa parent() hanya naik satu tingkat di pohon DOM
- Opsional, metode mengambil ekspresi pilihan dari jenis yang sama dengan fungsi $(). Jika pemilih diberikan, elemen difilter dengan melihat apakah mereka cocok
- Metode parent() digunakan untuk menemukan elemen induk langsung. Fungsi ini menempatkan elemen induk elemen yang ditentukan
- Metode parent() ini mengembalikan elemen yang ditentukan setelah melintasi satu atau lebih level yang lebih tinggi
Contoh nama kelas induk JQuery
Contoh di bawah ini menunjukkan contoh kelas nama induk jQuery adalah sebagai berikut
1) kelas nama induk jQuery dengan metode terdekat –
Contoh di bawah ini menunjukkan kelas nama induk jQuery dengan metode terdekat adalah sebagai berikut. Metode terdekat digunakan untuk mendapatkan elemen leluhur pertama
Kode
<!DOCTYPE html> <html> <head> <title> JQuery parent class</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> </head> <body style="text-align:center;"> <h1 style="color:Red;"> JQuery parent class </h1> <p id="GFG_UP" style= "font-size: 15px; font-weight: Medium;"> </p> <div class="parent"> <div class="child"></div> </div> <button> Click on this button </button> <p id="GFG_DOWN" style= "color: Red; font-size: 20px; font-weight: Medium;"> </p> <script> $('#GFG_UP').text('Click on below button'); $('button').on('click', function() { var object = $('.child').closest('.parent'); if (object.length) { $('#GFG_DOWN').text("Child class name = child" + " Parent Class Name = parent" + " Exists"); } else { $('#GFG_DOWN').text("Class not exist"); } }); </script> </body> </html>2) induk jQuery dengan kelas untuk mendapatkan semua elemen leluhur yang cocok –
Contoh di bawah ini menunjukkan induk jQuery dengan kelas untuk mendapatkan semua elemen leluhur yang cocok
Kode
<!DOCTYPE html> <html> <head> <title> JQuery parent class </title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> </head> <body style="text-align:center;"> <h1 style="color:Red;"> JQuery parent class </h1> <p id="GFG_UP" style= "font-size: 15px; font-weight: Medium;"> </p> <div class="parent"> <div class="child"></div> </div> <button> Click on this button </button> <p id="GFG_DOWN" style= "color: Red; font-size: 20px; font-weight: medium;"> </p> <script> $('#GFG_UP').text('Click on below button'); $('button').on('click', function() { var object = $('.child').closest('.parent'); if (object.length) { $('#GFG_DOWN').text("Child class name = child" + " Parent Class Name = parent" + " Exists"); } else { $('#GFG_DOWN').text("Class not exist"); } }); </script> </body> </html>_Kesimpulan
Kelas induk digunakan untuk menerapkan gaya tertentu ke sekelompok elemen HTML. Misalnya, induk jQuery dengan metode kelas memungkinkan kita untuk mencari melalui induk objek jQuery yang mewakili sekumpulan elemen DOM di pohon DOM dan membuat objek jQuery baru dari elemen yang cocok
Artikel yang Direkomendasikan
Ini adalah panduan untuk induk jQuery dengan kelas. Di sini kita membahas definisi, ikhtisar, Bagaimana menemukan induk jQuery dengan kelas? . Anda juga dapat melihat artikel berikut untuk mempelajari lebih lanjut –