jQuery selektorlari
jQuery selektorlari jQuery kutubxonasining eng muhim qismlaridan biridir.
jQuery selektorlari
jQuery selektorlari HTML element(lar)ni tanlash va ular bilan ishlash imkonini beradi.
jQuery selektorlari HTML elementlarni ularning nomi, id’si, klasslari, turlari, atributlari, atribut qiymatlari va boshqa ko‘plab jihatlari asosida "topish" (yoki tanlash) uchun ishlatiladi. Ular mavjud CSS selektorlariga asoslangan, bundan tashqari, jQuery’ning o‘ziga xos maxsus selektorlari ham bor.
jQuery’dagi barcha selektorlar dollar belgisi va qavslar bilan boshlanadi: $().
Element selektori
jQuery element selektori elementlarni element nomi asosida tanlaydi.
Sahifadagi barcha <p> elementlarini quyidagicha tanlashingiz mumkin:
$("p")
Misol
Foydalanuvchi tugmani bosganda barcha <p> elementlari yashiriladi:
Misol
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
O‘zingiz sinab ko‘ring »
#id selektori
jQuery #id selektori muayyan elementni topish uchun HTML tegining id atributidan foydalanadi.
id sahifa ichida yagona bo‘lishi kerak, shuning uchun bitta, yagona elementni topmoqchi bo‘lsangiz, #id selektoridan foydalaning.
Muayyan id’ga ega elementni topish uchun panjara (#) belgisini, undan keyin esa HTML elementining id’sini yozing:
$("#test")
Misol
Foydalanuvchi tugmani bosganda id="test" bo‘lgan element yashiriladi:
Misol
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
O‘zingiz sinab ko‘ring »
.class selektori
jQuery .class selektori muayyan klassga ega elementlarni topadi.
Muayyan klassga ega elementlarni topish uchun nuqta belgisini, undan keyin esa klass nomini yozing:
$(".test")
Misol
Foydalanuvchi tugmani bosganda class="test" bo‘lgan elementlar yashiriladi:
Misol
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
O‘zingiz sinab ko‘ring »
jQuery selektorlariga oid boshqa misollar
| Sintaksis | Tavsif | Misol |
|---|---|---|
| $("*") | Barcha elementlarni tanlaydi | Sinab ko‘ring |
| $(this) | Joriy HTML elementni tanlaydi | Sinab ko‘ring |
| $("p.intro") | class="intro" bo‘lgan barcha <p> elementlarini tanlaydi | Sinab ko‘ring |
| $("p:first") | Birinchi <p> elementini tanlaydi | Sinab ko‘ring |
| $("ul li:first") | Birinchi <ul> ichidagi birinchi <li> elementini tanlaydi | Sinab ko‘ring |
| $("ul li:first-child") | Har bir <ul> ichidagi birinchi <li> elementini tanlaydi | Sinab ko‘ring |
| $("[href]") | href atributiga ega barcha elementlarni tanlaydi | Sinab ko‘ring |
| $("a[target='_blank']") | target atributining qiymati "_blank" ga teng bo‘lgan barcha <a> elementlarini tanlaydi | Sinab ko‘ring |
| $("a[target!='_blank']") | target atributining qiymati "_blank" ga teng BO‘LMAGAN barcha <a> elementlarini tanlaydi | Sinab ko‘ring |
| $(":button") | Barcha <button> elementlarini va type="button" bo‘lgan <input> elementlarini tanlaydi | Sinab ko‘ring |
| $("tr:even") | Barcha juft <tr> elementlarini tanlaydi | Sinab ko‘ring |
| $("tr:odd") | Barcha toq <tr> elementlarini tanlaydi | Sinab ko‘ring |
Turli selektorlarni amalda ko‘rish uchun jQuery selektorlarini sinash vositamizdan foydalaning.
Barcha jQuery selektorlari bo‘yicha to‘liq ma’lumot uchun jQuery selektorlari ma’lumotnomasiga o‘ting.
Funksiyalarni alohida faylda saqlash
Agar veb-saytingiz ko‘plab sahifalardan iborat bo‘lsa va jQuery funksiyalaringizni qo‘llab-quvvatlash oson bo‘lishini istasangiz, ularni alohida .js fayliga joylashtirishingiz mumkin.
Ushbu darslikda jQuery’ni namoyish qilganimizda funksiyalar to‘g‘ridan-to‘g‘ri <head> bo‘limiga qo‘shiladi. Biroq ba’zan ularni alohida faylga joylashtirish afzalroq, masalan, quyidagicha (.js fayliga murojaat qilish uchun src atributidan foydalaning):
Misol
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>
jQuery mashqlari
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!