Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

jQuery hodisalari

jQuery HTML sahifadagi hodisalarga javob berish uchun maxsus yaratilgan.

ULASHISH

Hodisalar nima?

Veb-sahifa javob bera oladigan tashrif buyuruvchilarning turli xil harakatlari hodisalar deb ataladi.

Hodisa biror narsa sodir bo‘ladigan aynan o‘sha paytni ifodalaydi.

Misollar:

  • sichqoncha kursorini element ustiga olib borish
  • radio tugmani tanlash
  • element ustiga bosish

"fires/fired" (ishga tushadi/ishga tushdi) atamasi hodisalar bilan tez-tez ishlatiladi. Misol: "Klavishni bosgan zahotingiz keypress hodisasi ishga tushadi".

Quyida ba’zi keng tarqalgan DOM hodisalari keltirilgan:

Sichqoncha hodisalari Klaviatura hodisalari Forma hodisalari Hujjat/oyna hodisalari
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload

Hodisa metodlari uchun jQuery sintaksisi

jQuery’da ko‘pchilik DOM hodisalarining ekvivalent jQuery metodi mavjud.

Sahifadagi barcha paragraflarga click hodisasini biriktirish uchun quyidagicha yozishingiz mumkin:

$("p").click();

Keyingi qadam — hodisa ishga tushganda nima sodir bo‘lishini belgilash. Buning uchun hodisaga funksiya uzatishingiz kerak:

$("p").click(function(){   // action goes here!! });

Ko‘p ishlatiladigan jQuery hodisa metodlari

$(document).ready()

$(document).ready() metodi hujjat to‘liq yuklanganda funksiyani bajarish imkonini beradi. Bu hodisa jQuery sintaksisi bobida allaqachon tushuntirilgan.

click()

click() metodi HTML elementga hodisa ishlovchi funksiyasini biriktiradi.

Funksiya foydalanuvchi HTML element ustiga bosganda bajariladi.

Quyidagi misolda shunday deyilgan: <p> elementida click hodisasi ishga tushganda, joriy <p> elementini yashir:

Misol

$("p").click(function(){   $(this).hide(); });
O‘zingiz sinab ko‘ring »

dblclick()

dblclick() metodi HTML elementga hodisa ishlovchi funksiyasini biriktiradi.

Funksiya foydalanuvchi HTML element ustiga ikki marta bosganda bajariladi:

Misol

$("p").dblclick(function(){   $(this).hide(); });
O‘zingiz sinab ko‘ring »

mouseenter()

mouseenter() metodi HTML elementga hodisa ishlovchi funksiyasini biriktiradi.

Funksiya sichqoncha kursori HTML elementga kirganda bajariladi:

Misol

$("#p1").mouseenter(function(){   alert("You entered p1!"); });
O‘zingiz sinab ko‘ring »

mouseleave()

mouseleave() metodi HTML elementga hodisa ishlovchi funksiyasini biriktiradi.

Funksiya sichqoncha kursori HTML elementdan chiqqanda bajariladi:

Misol

$("#p1").mouseleave(function(){   alert("Bye! You now leave p1!"); });
O‘zingiz sinab ko‘ring »

mousedown()

mousedown() metodi HTML elementga hodisa ishlovchi funksiyasini biriktiradi.

Funksiya sichqoncha kursori HTML element ustida turganida sichqonchaning chap, o‘rta yoki o‘ng tugmasi bosilganda bajariladi:

Misol

$("#p1").mousedown(function(){   alert("Mouse down over p1!"); });
O‘zingiz sinab ko‘ring »

mouseup()

mouseup() metodi HTML elementga hodisa ishlovchi funksiyasini biriktiradi.

Funksiya sichqoncha kursori HTML element ustida turganida sichqonchaning chap, o‘rta yoki o‘ng tugmasi qo‘yib yuborilganda bajariladi:

Misol

$("#p1").mouseup(function(){   alert("Mouse up over p1!"); });
O‘zingiz sinab ko‘ring »

hover()

hover() metodi ikkita funksiya qabul qiladi va mouseenter() hamda mouseleave() metodlarining birikmasi hisoblanadi.

Birinchi funksiya sichqoncha kursori HTML elementga kirganda, ikkinchi funksiya esa sichqoncha kursori HTML elementdan chiqqanda bajariladi:

Misol

$("#p1").hover(function(){   alert("You entered p1!"); }, function(){   alert("Bye! You now leave p1!"); });
O‘zingiz sinab ko‘ring »

focus()

focus() metodi HTML forma maydoniga hodisa ishlovchi funksiyasini biriktiradi.

Funksiya forma maydoni fokusni olganda bajariladi:

Misol

$("input").focus(function(){   $(this).css("background-color", "#cccccc"); });
O‘zingiz sinab ko‘ring »

blur()

blur() metodi HTML forma maydoniga hodisa ishlovchi funksiyasini biriktiradi.

Funksiya forma maydoni fokusni yo‘qotganda bajariladi:

Misol

$("input").blur(function(){   $(this).css("background-color", "#ffffff"); });
O‘zingiz sinab ko‘ring »

on() metodi

on() metodi tanlangan elementlarga bitta yoki bir nechta hodisa ishlovchisini biriktiradi.

<p> elementiga click hodisasini biriktirish:

Misol

$("p").on("click", function(){   $(this).hide(); });
O‘zingiz sinab ko‘ring »

<p> elementiga bir nechta hodisa ishlovchisini biriktirish:

Misol

$("p").on({   mouseenter: function(){     $(this).css("background-color", "lightgray");   },   mouseleave: function(){     $(this).css("background-color", "lightblue");   },   click: function(){     $(this).css("background-color", "yellow");   } });
O‘zingiz sinab ko‘ring »

jQuery mashqlari

Mashqlar yordamida o‘zingizni sinang

Mashq:

Barcha <p> elementlarini "click" (bosish) orqali yashirish uchun to‘g‘ri hodisadan foydalaning.

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

Mashqni boshlash

jQuery hodisa metodlari

jQuery hodisalari bo‘yicha to‘liq ma’lumot uchun jQuery hodisalari ma’lumotnomasiga o‘ting.


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish