Въведение в jQuery Събития
JQuery е една от най-популярните и широко използвани javascript библиотеки, която е разработена и проектирана да опрости HTML базирана DOM архитектура, т.е. свойствата на модела на обект на документ, като четене, манипулиране и преместване на дърво. Останалите свойства от jQueries като обработка на събития, Ajax, стайлинг и CSS анимация също са опростени. Това е отворен код и безплатна библиотека, която обикновено се използва в 73% от ок. 10 милиона уебсайта, които се използват днес. Основните характеристики на Jquery включват свойства, базирани на DOM елементи като селектори, манипулация и обход на дървета, което прави работата по JQuery много по-интересна, лесна и удобна.
Използва се за осигуряване на много прост и изчистен интерфейс, който може да се използва за прилагане на различни видове невероятни ефекти. Тези методи също позволяват бързо използване и прилагане на най-често използваните функции и техните ефекти, заедно с голи до минимални конфигурации. Основните команди като тези за показване и скриване на елементи са почти еднакви, а останалите също лежат в същата категория с онова, което всеки желае да ги види. команда show (), в този случай се използва за показване на елементите в изцяло обвита и комбинирана команда set and hid () се използва за скриване на тези функции.
Jquery е по поръчка, която се използва за реагиране на събитията, предоставени в HTML страница. Самите събития са различните действия на посетителите, на които може да се отговори от уеб страницата. С други думи, едно събитие се използва, за да представи леко точния или точния момент, особено нещо, което се е случило. Това може да включва сценарии като Преместване на мишката върху елемента, щракване и избор на радио бутона и също щракване върху елемента. Терминът пожари или терминът уволнен е много време, използвано заедно със събитието. Например, събитието за натискане на клавиш се задейства или по-популярно се нарича като задействано, то е главно в момента, в който натиснете клавиша. Ето списъка с най-често срещаните и често използвани DOM събития.
Събития на мишката като dblclick, mouseleave, mouseenter, click. Има и други клавиатурни събития, като например клавиш, клавиатура и клавиш. Съществуват и други форми на събития като промяна, изпращане, размиване и фокусиране на събития. Има и други събития, които са Document или Window събития като преоразмеряване, зареждане, превъртане, разтоварване и др. В Jquery повечето от базирани на DOM събития имат съответния метод jquery. Следователно, за да присвоите ново събитие на всички съществуващи параграфи на страницата, по-долу синтаксисът може да бъде използван.
Събития и синтаксис на jQuery
Ето следните събития на jQuery със синтаксис, дадени по-долу
1. Щракнете ()
Това събитие се случва всеки път, когато елементът е щракнат. Този метод click () се използва за задействане на щракнатия елемент, известен също като събитие за щракване, който се използва за прикачване към функция, когато се случи събитие, свързано с щракване.
Синтаксис
$(selector).click()
Когато искате да прикачите функция към това събитие за щракване,
$(selector).click(function)
Следващата стъпка винаги идва заедно с действието и спусъка, които формират действителното функциониране и функциониране на функцията и следователно, когато събитието бъде уволнено, функция трябва да бъде предадена на събитието.
пример
$("p").click(function()(
// action which is triggered goes here!! ));
2. Dblclick ()
Този метод се използва за прикачване на функция за обработка на събития към предоставения HTML елемент. Тази функция се изпълнява всеки път, когато потребителят удвои щракване върху дадения HTML елемент.
Синтаксис
$(selector).dblclick()
пример
$("p").dblclick(function()(
$(this).hide();
));
3. промяна ()
Това събитие се случва всеки път, когато стойността на определен елемент е променена, т.е. работи само за входните, текстовите и избраните елементи. Методът change () се използва за задействане на събитие за промяна или това, което се привързва към функцията винаги, когато трябва да се случи събитие, свързано с промяна.
Синтаксис
$(selector).change()
пример
$("input").change(function()(
alert("This text related to this has been changed.");
));
4. размазване ()
Това събитие, свързано с размазване, се случва само когато елементът загуби фокуса. Методът blur (), който се използва за задействане на събитието за замъгляване или този, който се използва за прикачване на функция, която да се стартира, когато се случи събитие на размазване. Този метод се използва често с метода focus ().
Синтаксис
$(selector).blur()
пример
$("input").blur(function()(
alert("The field has lost its focus.");
));
5. данни
Това свойство event.data се използва за съдържане на незадължително предадени данни, свързани с метод на събитие, когато изпълняващият манипулатор за текущия е свързан.
Синтаксис
event.data
пример
$("p").each(function(i)(
$(this).on("click", (x:i), function(event)(
alert("This index + ". paragraph has data: " + event.data.x);
));
));
6. пространство за имена
Това свойство се използва за връщане на персонализирано пространство от имена при всяко задействане на събитието. Свойството се използва да бъде зададено от автори на плъгини, които могат да се използват за обработка на задачи много различно, което зависи от използваното пространство на имена. Пространствата с имена, които започват с подчертаването, са запазени пространства от имена за JQuery.
Синтаксис
event.namespace
пример
$("p").on("custom.someNamespace", function(event)(
alert(event.namespace);
));
7. PageX
Това е свойството тип страница, което се използва за връщане на позицията на показалеца на мишката, която е свързана с левия страничен ръб на документа. Този вид имоти често се използват със събитието. PageY собственост.
Синтаксис
event.PageX
пример
$(document).mousemove(function(event)(
$("span text ").text("X: " + event.pageX);
));
8. PageY
Това е свойството тип страница, което се използва за връщане на позицията на показалеца на мишката, която е свързана с горния ръб на документа. Този вид имоти често се използват със събитието. PageX собственост.
Синтаксис
event.PageY
пример
$(document).mousemove(function(event)(
$("span text ").text("Y: " + event.pageY);
));
9. резултат
Свойството event.result се използва, за да съдържа предишната или последната стойност, която се връща от обработчика на събитията, което е специално задействано от конкретното събитие.
Синтаксис
event.result
пример
$("button").click(function()(
return "Hi there!";
));
10. prevenDefault ()
Този метод, свързан със събитие.preventDefault (), се използва, за да спре действието по подразбиране на определен елемент да не се случва. Примерите за този сценарий включват:
Предотвратяване на бутон за подаване от подаване на формуляр
Предотвратете връзката от достъп до определен URL адрес.
Определено събитие като event.preventDefault () се използва за проверка дали методът или функцията prevenDefault () се използват за извикване на събитието.
Синтаксис
event.preventDefault()
пример
$("a").click(function(event)(
event.preventDefault();
));
11. Event.target ()
Това свойство се използва за връщане на кой DOM елемент да се задейства от това събитие. Най-често е, отколкото не е полезно, да сравните целта на събитието с това, за да определите дали конкретното събитие се обработва поради събитие, наречено бълбукане.
Синтаксис
event.target
пример
$("p, button, h2").click(function(event)(
$("div").html("Hi, triggered is " + event.target.NameNode + " new element.");
));
12. timeStamp
Това свойство се използва за връщане на броя милисекунди от времето на 1 януари 1970 г., което съответства на първия път, когато събитието за първи път е действително задействано.
Синтаксис
event.TimeStamp
пример
$("button").click(function(event)(
$("span").text(event.timeStamp);
));
13. тип
Използва се за наблюдение на събитието и неговия тип, който се задейства.
Синтаксис
event.type
Пример:
$("p").on("click dblclick and mouse related events", function(event)(
$("div").html("Event: " + event.type);
));
14. който ()
Това свойство се използва за връщане на клавиатурния ключ или бутона на мишката, който е бил натиснат за събитието.
Синтаксис
event.which
пример
$("input").keydown(function(event)(
$("div").html("Key: " + event.which);
));
15. фокус ()
Това свойство и фокусът за това събитие се появява, когато елемент се използва, за да получи фокуса, който възниква, когато е избран с щракване с мишката или чрез навигация в таб върху него. Методът focus () се използва за задействане на събитието за фокусиране или прикачване на функция, която да се изпълнява, когато се случи събитие, свързано с фокуса.
Синтаксис
$(selector).focus()
пример
$("input").focus(function()(
$("span").css("display", "inline").fadeOut(200);
));
16. задръжте ()
Този метод на задържане се използва за определяне на две функции, използвани за стартиране, когато курсорът на мишката се задържи върху всички избрани елементи. Този метод задейства както мишката, така и събитията на мишката. Ако има само една функция, която е посочена, тя ще се изпълнява както за събития на миша, така и за мистърцентър.
Синтаксис
$(selector).hover(inFunction, outFunction)
пример
$("p").hover(function()(
$(this).css("background-color", "blank");
), function()(
$(this).css("background-color", "yellow");
));
17. клавиатура ()
Редът на събитията, свързани с събитието за клавиш, са:
- Клавиатура: Използва се, когато ключът е на път надолу.
- Натискане на клавиш : Това се случва при натискане на клавиша на клавиатурата
- Клавиатура: Както подсказва името, това се използва, когато се натисне клавишът на горната страна.
Синтаксис
$(selector).keydown()
пример
$("input").keydown(function()(
$("input").css("background-color", "black");
));
18. натискане на клавиш ()
Редът на събитията, свързани с събитието с натискане на клавиш, е:
- Клавиатура: Използва се, когато ключът е на път надолу.
- Натискане на клавиш : Това се случва при натискане на клавиша на клавиатурата
- Клавиатура: Както подсказва името, това се използва, когато се натисне клавишът на горната страна.
Синтаксис
$(selector).keypress()
пример
$("input").keypress (function()(
$("input").css("background-color", "black");
));
19. клавиатура ()
Редът на събитията, свързани с събитието за клавиш, е:
- Клавиатура: Използва се, когато ключът е на път надолу.
- Натискане на клавиш : Това се случва при натискане на клавиша на клавиатурата
- Клавиатура: Както подсказва името, това се използва, когато се натисне клавишът на горната страна.
Синтаксис
$(selector).keyup()
пример
$("input").keyup(function()(
$("input").css("background-color", "black");
));
20. На живо ()
Този метод (или функция) на jquery се използва за прикачване на един или повече обработващи на базата на събития манипулатори, които да се използват специално за избраните списъци с елементи и също така определя функцията, която да се изпълнява там, където се случват събитията. Всички обработващи събития са прикачени чрез метода live (), който ще работи както за текущите, така и за БЪДЕЩИТЕ елементи, които се основават на съвпадение на елементите за избор, които могат да бъдат като нов елемент, създаден от скрипта. Методът die () може да се използва за унищожаване на метода live ().
Синтаксис
$(selector).live(event, data, function)
пример
$("button").live("click", function()(
$("p").slideToggle();
));
21. Зареждане ()
Методът за натоварване се използва за прикачване на обработващ събитие към събитието, базирано на натоварването. Събитието за зареждане се случва всеки път, когато се посочи Това събитие се случва и работи винаги, когато елементите, свързани с URL адреса като изображение, рамка, скрипт, рамка и обекта на прозореца. Събитието за зареждане може или не може да се задейства и зависи от браузъра, дори ако изображението е кеширано. Има и AJAX метод, който е метод на jquery, известен като load (), който се нарича, зависи от параметрите.
Синтаксис
$(selector).load(function)
пример
$("img").load(function()(
alert("stuff loaded.");
));
22. Mousedown
Това събитие се случва само когато левият бутон на показалеца на мишката е натиснат надолу върху избрания списък на елемента. Методът или функцията mousedown () се използва за задействане на това събитие, което свързва функция, и се изпълнява винаги, когато се случи събитие mousedown. Този метод често се използва заедно с метода на мишката ().
Синтаксис
$(selector).mousedown()
пример
$("div").mousedown(function()(
$(this).after("Down button pressed with mouse.");
));
23. Изключено ()
Този метод се използва за премахване на манипулатор на събития, който е прикачен заедно с метода on (). Може да се каже, че е заместване на метода unndind (), die () и undelegate (). Този метод се използва за въвеждане на много последователност в API и винаги се препоръчва да се използва този метод, тъй като той се използва за опростяване на кодовата база на Jquery.
Синтаксис
$(selector).off(event, selector, function(eventObj), map)
пример
$("button").click(function()(
$("p").off("click");
));
24. мистърцентър ()
Това събитие се случва всеки път, когато показалеца на мишката е над зададения елемент и се вписва, когато задейства събитието на мистърцентъра или се използва за прикачване на функция, която може да се използва за изпълнение, когато се случи събитие, базирано на мизер.
Синтаксис
$(selector).mouseenter()
пример
$("p").mouseenter(function()(
$("p").css("background-color", "black");
));
25. мишка ()
Това събитие се случва всеки път, когато показалеца на мишката е над зададения елемент и оставя, когато задейства събитието на излизане от мишката или се използва за премахване на функция, която може да се използва за изпълнение, когато се случи събитие, базирано на мишката.
Синтаксис
$(selector).mouseleave()
пример
$("p").mouseleave(function()(
$("p").css("background-color", "black");
));
Jquery е една от най-използваните библиотеки, когато става въпрос за предния край. Това предоставя уникални функции и широк спектър от функции, които помагат да се направи животът на разработчиците и хората навсякъде лесен и удобен. Надявам се, че сте харесали нашата статия. Следете нашия блог за повече такива.
Препоръчителни статии
Това е ръководство за jQuery Events. Тук обсъждаме списъка с най-често срещаните и често използвани различни събития на jQuery със синтаксис и примери. Може да разгледате и следните статии, за да научите повече -
- jQuery ефекти
- jQuery методи
- jQuery Атрибути
- Как да инсталирате Jquery?
- Топ 8 jQuery селектори с изпълнение на кода
- Ръководство за примерите на JQuery Progress Bar
- Ръководство за различни JavaScript събития