8.1 Свързване на jQuery
Най-накрая стигнахме до библиотеката jQuery. По времето, когато тази статия е написана, тя вече е остаряла и почти никога не се използва в нови проекти . Но по едно време беше много популярен, много добре documentиран и в интернет има много примери за използването му .
Ето защо, ако пишете малък уеб проект и не искате да прекарвате месеци в изучаване на модерни рамки, препоръчвам ви да използвате библиотеката jQuery.
За да използвате хилядите функции на jQuery, просто трябва да го включите във вашата page. Можете да го направите така:
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
Работата с jQuery може да бъде разделена на два вида.
Първо, можете да получите библиотечен обект jQuery, който е обикновен HTML елемент, обвит в персонализиран jQuery обект.
Второ, jQuery има няколко глобални обекта, които не са обвързани с HTML елементи. Те също трябва да се използват.
Да започнем с първото.
8.2 Работа със селектори
jQuery използва селектори за работа с обекти (спомняте ли си CSS и неговите класове?). И така, в jQuery, ако искате да изберете няHowъв обект or група от обекти, трябва да зададете техния селектор.
Примери:
Код | Описание | Забележка | |
---|---|---|---|
1 | $("div") | Избира всички обекти с таг DIV | много обекти |
2 | $("img.#image123") | Избира всички обекти с IMG таг и ID == image123 | един обект |
3 | $("#image123") | Избира всички обекти с ID == image123 | един обект |
4 | $("div.article") | Избира всички обекти с таг DIV, които имат член на класа | много обекти |
Да кажем, че искаме да добавим обработка на събития към всички връзки onclick
, ето How можем да го направим с jQuery:
$("a").click(function() {
alert("Click");
});
Тук се предприемат три стъпки:
- Получава обекта(ите), който съответства на селектора
"a"
. - Ние създаваме анонимна функция, която извиква
alert()
. - Задаваме тази функция като манипулатор на събития
click
за всички обекти от точка 1.
Друго хубаво нещо за jQuery е, че неговият code е лесен за четене. Не е нужно много, за да разберете How работи всичко. Ако има работещ code, тогава е достатъчно лесно да разберете Howво прави.
8.3 Работа с елементи на documentа
Нека да разгледаме няколко сценария за работа с document с помощта на jQuery.
Вземете стойността на елемент (за елементи, които имат стойности):
var result = $ ("selector").value();
Задайте стойност на елемент (за елементи, които имат стойности):
$ ("selector").value(newValue);
Как да добавя HTML вътре в няHowъв елемент?
$ ("selector").html(newHTML);
И How да получите HTML, който е вътре в елемента?
var html = $ ("selector").html();
Ами ако искам да получа/добавя не HTML, а обикновен текст? Тук също няма изненади.
var html = $ ("selector").text();
Какво ще стане, ако искам да получа/променя цвета на елемент?
$ ("selector").color("red");
Ако трябва да работите със стилове, това също е лесно да се направи:
$ ("selector").css("color", "red");
Как да добавя нов елемент?
$ (".container").append($("h3"));
GO TO FULL VERSION