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"));