Mavzu: jquery ga kirish. Asosiy tushunchalar. Reja: jquery haqida

Mavzu: JQUERY ga kirish. Asosiy tushunchalar.

Reja:

JQuery haqida

JQuery selectorlari

Tez-tez ishlatiladigan jQuery event metodlari

jQuery tez, yengil ishlash va xususiyatlarga ko’p bo’lgan JavaScript kutubxonasidir. Shiori „Kam yoz va ko’p ish qil“. Bu kutubxona HTML-hujjatlar bilan ishlash va manipulyatsiya qilish, voqealarni qayta ishlash, animatsiya, shuningdek Ajax bilan ishlashni ko'plab brauzerlarda ishlatishga oson bo’lgan API bilan soddalashtiradi. Ko'p qirraliligi va kengaytiruvchanlik kombinatsiyasi bilan jQuery millionlab JavaScript dasturchilarining yozish uslubini o'zgartirdi.

jQuery tez, yengil ishlash va xususiyatlarga ko’p bo’lgan JavaScript kutubxonasidir. Shiori „Kam yoz va ko’p ish qil“. Bu kutubxona HTML-hujjatlar bilan ishlash va manipulyatsiya qilish, voqealarni qayta ishlash, animatsiya, shuningdek Ajax bilan ishlashni ko'plab brauzerlarda ishlatishga oson bo’lgan API bilan soddalashtiradi. Ko'p qirraliligi va kengaytiruvchanlik kombinatsiyasi bilan jQuery millionlab JavaScript dasturchilarining yozish uslubini o'zgartirdi.

Bu kutubxona John Resig tomonidan ishlab chiqillgan. jQuery kutubxona tomonidan taqdim etilganidan tashqari uning imkoniyatlarini kengaytiradigan plaginlarni yaratish uchun platforma bilan ta'minlaydi. JQuery va unga tegishli loyihalarni rivojlantirish jQuery fondi tomonidan muvofiqlashtiriladi

jQuery selectorlari

jQuery selectorlari jQuery kutubxonasining eng muhim qismlaridan biridir.

jQuery selektorlari HTML elementlarni tanlash va ularni boshqarishga imkon beradi.

jQuery selektorlari HTML elementlarini ularning nomi, identifikatori, sinflari, turlari, atributlari, atributlarning qiymatlari va boshqalarga asoslangan holda "topish" (yoki tanlash) uchun ishlatiladi. U mavjud CSS Selectorlariga asoslanadi va bunga qo'shimcha ravishda o'z shaxsiy selektorlariga ham ega.

Element Selector

JQuery elementlar selektori element nomiga qarab elementlarni tanlaydi.

Quyidagi kod orqali 
sahifadagi barcha elementlarni tanlash mumkin:

$("p")

Misol

Foydalanuvchi tugmani bosganda, barcha 
elementlar yashiriladi:

$(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });

#Id selector

JQuery selektori aniq elementni topish uchun HTML yorlig'ining id atributidan foydalanadi.#id

ID sahifada yagona bo'lishi kerak, shuning uchun siz yagona, elementni topmoqchi bo'lganimizda #id selektoridan foydalanishimiz kerak.

Muayyan identifikatorli elementni topish uchun, HTML elementining identifikatori bilan xesh(panjara) belgi yoziladi:

$("#test")

Misol

Foydalanuvchi tugmachani bosganda, id = "test" elementi yashirin bo'ladi:

$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });

Class selektori

JQuery .class selektori ma'lum bir sinfga ega bo'lgan elementlarni topadi.

Muayyan sinfga ega elementlarni topish uchun .(nuqta) va keyin sinf nomini yoziladi:

$(".test")

Misol

Foydalanuvchi tugmachani bosganida, class = "test" elementlari yashiriladi:

$(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });

Tez-tez ishlatiladigan jQuery event metodlari

$(document).ready()

$(document).ready() Metodi hujjat to'liq yuklangan bo'lsa, bizga bir vazifani bajarishi uchun imkon beradi.

click()

Foydalanuvchi HTML elementini bosganda funktsiya bajariladi.

elementga o'tganda bir marta bosilganda, joriy 
elementni yashirish:

Misol:

$("p").click(function(){ $(this).hide(); });

dblclick ()

Foydalanuvchi HTML elementini ikki marta bosganda funktsiya bajariladi:

Misol

$("p").dblclick(function(){ $(this).hide(); });

mouseenter()

Sichqoncha ko'rsatgichi HTML elementiga kirganda funktsiya bajariladi:

Misol

$("#p1").mouseenter(function(){ alert("You entered p1!"); });

mouseleave()

Sichqoncha ko'rsatgichi HTML elementini tark etganida funktsiya bajariladi:

Misol

$("#p1").mouseleave(function(){ alert("Bye! You now leave p1!"); });

hover ()

hover ()

hover() metodi, ikkita funksiya oladi va mouseenter() va mouseleave() metodlari birikmasi hisoblanadi.

Birinchi funktsiya sichqoncha HTML elementiga kirganda, ikkinchisi esa sichqoncha HTML elementini tark etganida bajariladi:

Misol

$("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); });

focus()

Forma maydoni fokus olganda funktsiya bajariladi:

Misol

$("input").focus(function(){ $(this).css("background-color", "#cccccc"); });

blur()

Forma maydoni fokusni yo'qotganda funktsiya bajariladi:

Misol

$("input").blur(function(){ $(this).css("background-color", "#ffffff"); });

On() metodi

on() metodi tanlangan elementlar uchun bitta yoki bir nechta eventlarni birlashtirish uchun ishlatiladi.

 
element boslish eventini biriktirish:

E’tiboringiz uchun rahmat