N/Спейсследващ слайд
Pпредишен слайд
Oвсички слайдове
ctrl+left clickувеличава елемента

If you want print version => add '?print-pdf'
at the end of slides URL (remove '#' fragment) and then print.
Like: https://wwwcourses.github.io/...CourseIntro.html?print-pdf
Dark Light Projector

jQuery in 1 hour

Създаден за

Създаден от

Ива Е. Попова
2015 - 2023, Creative Commons License

Въведение в jQuery

Въведение в jQuery

jQuery е JavaScript библиотека, която улеснява манипулацията на HTML документи и събития.
Тя предоставя прости API-та за извличане на елементи от DOM дървото, манипулиране на техните атрибути и стилове, добавяне на нови елементи и обработка на събития. Тези API-та
Използването на jQuery API улеснява разработката на Cross-browser Compatible сайтове.

Изтегляне и изполване на jQuery

Можете да изтеглите последната версия на jQuery от официалния сайт на проекта.
или да я включите чрез CDN (Content Delivery Network)
jQuery @jQuery CDN
jQuery @Google CDN
or just search in google: jQuery CDN
За да включите jQuery в страницата си, поставете следния код в <head> секцията:

				<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Предимства при използване на CDN

По-бързо зареждане на страницата: Когато използвате CDN, браузърът на потребителя ще зареди библиотеката от най-близкия сървър на CDN клауд мрежата.
Кеш на браузъра: Ако потребителят е посетил друг сайт, който използва същата версия на библиотеката, тя вече ще бъде кеширана в браузъра му. Това означава, че не е нужно да се зарежда отново и може да се използва от кеша на браузъра, което пак води до по-бързо зареждане на страницата.
По-малко натоварване на сървъра: Използването на CDN може да намали натоварването на сървъра на уебсайта, тъй като библиотеката ще бъде заредена от CDN, а не от сървъра на уебсайта.
Актуализации и поддръжка: Библиотеките, качени на CDN са обикновено актуализирани и поддържани от екипите на CDN доставчиците, което означава, че ще получавате последните версии и поправки на бъгове без да трябва да ги инсталирате ръчно.

jQuery Syntax

Синтаксис на jQuery

В основата на работа с jQuery е концепцията да "изберете някои елементи и направете нещо с тях".
Синтаксисът на jQuery е персонализиран за избор на HTML елементи и извършване на манипулация върху елемент(ите).

			$(selector).manipulation()
		

			$("div").hide() - скрива всички DIV елементи <div>.

			$(".red").hide() - скрива всички елементи с клас="red"

			$("#vip").hide() - скрива елемента с id="vip"

			$(this).hide() - скрива текущия елемент.

Селектиране на елементи

Селектиране на елементи

Библиотеката jQuery излага своите методи и свойства чрез функцията jQuery(), или $(), като $ е просто псевдоним за jQuery и често се използва, защото е по-кратък и по-бърз за писане. Т.е. $(selector) е еквивалетно на jQuery(selector)
Като аргумент на $(selector) можем да подадем CSS селектор, например:

				<ul id="shoppint-list">
					<li>Item 1</li>
					<li>Item 2</li>
					<li>Item 3</li>
				</ul>
				<script>
					$("li:nth-of-type(2)").css('background-color', '#F00');
				</script>
jQuery поддържа повечето CSS3 селектори,както и някои нестандартни такива (Reference: Selectors @jquery.com)

Манипулиране на елементи

Манипулиране на елементи

С помощта на jQuery можете лесно да манипулирате елементите на страницата.
Например, за да промените текста на елемент, използвайте функцията `text()`:

				$('.my-class').text('Нов текст');
За да добавите нов елемент в DOM дървото, използвайте функцията `append()`:

				$('body').append('
Нов елемент
');
Reference: jQuery DOM manipulations

Промяна на стила на елементите

Можем да променяме стила на елементите чрез метода css(property, value)
Ако искате да промените фона на елемента div на червен цвят, можете да напишете следния код:

				$("div").css("background-color", "red");
За да промените повече от едно CSS свойство на елемент, можете да използвате обект, който да съдържа свойствата, които искате да промените. Например, ако искате да промените както фона, така и цвета на шрифта на елементите div, можете да напишете следното:

				$("div").css({
					"background-color": "red",
					"color": "white"
				});

jQuery Events

jQuery Events

jQuery предоставя прости методи за свързване на event handlers към елементи.
В jQuery повечето DOM събития имат еквивалентен метод в jQuery. Например:

			$(".title").click();
			$(".title").dblclick();

Синтаксис


			$( 'selector' ).eventMethod( eventHandlerFunction );
eventMethd е някой от jQuery Event Methods
eventHandlerFunction - дефиниция на функцията, която ще бъде изпълнена, когато събитието се стартира.

				$('.title').click(function (e) {
					$(this).css('color','red');
				})
$(this) избира елемента, който е бил кликнат

Методът on()

Свързва функция за обработка на събития (event-handler function) за едно или повече събития към избраните елементи.

				$('.item').on('click', function (e) {
					$(this).css('color','red');
				})
Референция: on() @jquery

Event Object

Функцията за обработка на събития може да получи обект за събитие (event object), когато събитието се активира.
Event object представлява обект, който съдържа информация за текущото събитие, като например типа на събитието и координатите на курсора в момента на кликване. Например:

				$(".title").on("click", function(event) {
					console.log("Кликнахте върху елемент с клас 'title'");
					console.log("Тип на събитието: " + event.type);
					console.log("Координати на курсора: " + event.pageX + ", " + event.pageY);
				});
Референция: event object @jquery

Събитието Document Ready

Добра практика е да стартирате кода си веднага след като документът е готов за манипулиране, а не преди това.

			$( document ).ready(function() {

				// Вашият код тук.

			});
		

			// Съкращение на $( document ).ready()
			$(function() {

				// Вашият код тук.

			});

jQuery Traversing

jQuery Traversing

Overview

jQuery Traversing е процесът на движение напред и назад в DOM дървото, като се използват методи на jQuery за манипулация на елементите. Тези методи ви позволяват да намирате, манипулирате и избирате елементи на базата на тяхната позиция в DOM дървото, на техния тип, атрибути и много други.
Reference: jQuery Traversing

find()

find() методa намира всички деца на елемента, които отговарят на даден селектор. Например, ако имате HTML код с множество елементи div, и искате да намерите всички p елементи в тези div-ове, можете да използвате метода .find():

				$('div').find('p');

siblings()

Tози метод връща всички съседни елементи на даден елемент. Например, ако имате HTML код с множество елементи div, искате да намерите всички съседни елементи на div с клас "selected", можете да използвате метода .siblings():

				$('.selected').siblings();

next()

Този метод връща следващия елемент в DOM дървото. Например, ако имате HTML код с множество елементи div, искате да намерите следващия елемент след div с клас "selected", можете да използвате метода .next():

				$('.selected').prev();

prev()

Този метод връща предходния елемент в DOM дървото. Например, ако имате HTML код с множество елементи div, искате да намерите предходния елемент преди div с клас "selected", можете да използвате метода .prev():

				$('.selected').prev();

jQuery Plugins

jQuery Plugins

jQuery Plugins са допълнителни библиотеки, които може да използвате с jQuery, за да разширите функционалността на вашата уеб страница. Тези плъгини са най-често създадени от други потребители на jQuery и са налични безплатно в мрежата.
Te включват набор от методи, функции и CSS стилове, които могат да бъдат лесно добавени към вашето jQuery приложение.
jQuery Plugins предлагат готови решения на общи проблеми, като например анимации, валидация на форми, карусели, галерии и много други. Например, ако имате нужда от слайдшоу на вашата уеб страница, можете да използвате плъгин като Cycle2, за да добавите карусел с минимални усилия. Вместо да създавате слайдшоу от самото начало, вие можете да използвате плъгина и да го персонализирате според нуждите си.
Всеки плъгин за jQuery има своя документация, която обяснява как се използва и конфигурира. За да използвате плъгин, трябва да добавите референция към него в HTML файл и да активирате метода на плъгина върху елементите, към които желаете да се приложи. Когато използвате плъгин, е важно да проверите дали той е съвместим с версията на jQuery, която използвате в своето приложение.

Demo - Cycle2 (slideshow plugin)

Docs: Cycle2

Demo - DataTables

Docs: datatables.net

These slides are based on

customised version of

Hakimel's reveal.js

framework