С този пост започваме темите от раздел Query
01.Learn How Script Tags and Document Ready Work връзка>>Сега сме готови да научим jQuery, най-популярният инструмент за JavaScript на всички времена.
Преди да можем да започнем да използваме jQuery, трябва да добавим някои неща към нашия HTML.
Първо добавете скриптов елемент в горната част на страницата си. Не забравяйте да го затворите на следващия ред. Вашият браузър ще стартира всеки JavaScript в елемент на скрипт, включително jQuery.
Във вашия скриптов елемент добавете този код: $(document).ready(function() { към вашия скрипт. След това го затворете на следващия ред (все още във вашия скриптов елемент) с: });
Ще научим повече за функциите по-късно. Важното, което трябва да знаете, е, че кодът, който сте поставили в тази функция, ще се стартира веднага щом браузърът ви зареди страницата ви.
Това е важно, защото без функцията ви за готовност за документ, вашият код може да се изпълни преди HTML да бъде изобразен, което би причинило грешки.
02.Target HTML Elements with Selectors Using jQuery
Сега имаме функция document ready.
Сега нека напишем първото си изявление на jQuery. Всички функции на jQuery започват с $, обикновено наричан оператор на знак за долар или като bling.
jQuery често избира HTML елемент със селектор, след което прави нещо с този елемент.
Например, нека накараме всичките ви button елементи да отскачат. Просто добавете този код във вашата функция за готов документ:
$("button").addClass("animated bounce");
Имайте предвид, че вече сме включили както библиотеката jQuery, така и библиотеката Animate.css във фонов режим, така че да можете да ги използвате в редактора. Така че използвате jQuery, за да приложите класа Animate.css за отскачане към елементите на бутоните си.
03.Target Elements by Class Using jQuery
Виждате ли как накарахме всичките ви елементи да отскачат? Избрахме ги с $("button"), след което добавихме някои CSS класове към тях с .addClass("animated bounce");.
Току-що използвахте функцията .addClass() на jQuery, която ви позволява да добавяте класове към елементи.
Първо, нека насочим вашите div елементи към класа well, като използваме селектора $(".well").Имайте предвид, че, точно както при CSS декларациите, въвеждате . пред името на класа.След това използвайте функцията .addClass() на jQuery, за да добавите анимирани и разклатени класове.
Например, можете да направите всички елементи с класа text-primary shake, като добавите следното към вашата функция за готовност за документ:
$(".text-primary").addClass("animated shake");
04.Target Elements by id Using jQuery
Можете също да насочвате елементи по техните идентификационни атрибути id.
Първо насочете към елемента си бутон с идентификатора target3, като използвате селектора $("#target3"). Обърнете внимание, че, точно както при CSS декларациите, въвеждате # преди името на идентификатора.
След това използвайте функцията .addClass() на jQuery, за да добавите анимираните и избледняващи класове.
Ето как бихте накарали елемента бутон с идентификатор target6 да избледнее:
$("#target6").addClass("animated fadeOut");
Тези анимации бяха готини в началото, но сега стават някак разсейващи. Изтрийте и трите от тези функции на jQuery от вашата функция за готовност за документ (document ready function), но оставете самата си функция за готов документ непокътната.
06.Target the Same Element with Multiple jQuery Selectors връзка>> Сега знаете три начина за насочване към елементи: по тип: $("button"), по клас: $(".btn") и по идентификатор $("#target1").
Въпреки че е възможно да добавите множество класове в едно извикване на .addClass(), нека ги добавим към един и същи елемент по три отделни начина.
Използвайки .addClass(), добавете само по един клас към един и същи елемент по три различни начина:
Добавете анимирания клас(animated class ) към всички елементи от тип button.
Добавете класа shake (shake class ) към всички бутони с клас .btn.
Добавете btn-primary клас към бутона с идентификатор #target1.
Забележка: Трябва да се насочвате само към един елемент и да добавяте само един клас наведнъж. Като цяло, вашите три индивидуални селектора ще добавят трите класа shake, animated и btn-primary към #target1.
По същия начин можете да добавяте класове към елемент с функцията addClass() на jQuery, можете да ги премахнете с функцията removeClass() на jQuery.
Ето как бихте направили това за конкретен бутон:
$("#target2").removeClass("btn-default");
Нека премахнем класа btn-default от всички наши бутонни елементи.
Можем също да променим CSS на HTML елемент директно с jQuery.
jQuery има функция, наречена .css(), която ви позволява да промените CSS на елемент.
Ето как бихме променили цвета му на син:
$("#target1").css("color", "blue");
Това е малко по-различно от нормалната CSS декларация, тъй като CSS свойството и неговата стойност са в кавички и разделени със запетая вместо с двоеточие.
Изтрийте вашите jQuery селектори, оставяйки празен document ready function.
Изберете target1 и променете цвета му на червен.
09.Disable an Element Using jQuery връзка>> Можете също да промените non-CSS свойствата на HTML елементите с jQuery. Например, можете да деактивирате бутоните. Когато деактивирате бутон, той ще стане сив и вече не може да се щракне.
jQuery има функция, наречена .prop(), която ви позволява да регулирате свойствата на елементите. Ето как бихте деактивирали всички бутони:
$("button").prop("disabled", true);
Деактивирайте само бутона target1.
10.Change Text Inside an Element Using jQuery
С помощта на jQuery можете да промените текста между началния и крайния tag на елемент. Можете дори да промените HTML маркирането.
jQuery има функция, наречена .html(), която ви позволява да добавяте HTML тагове и текст в рамките на елемент. Всяко съдържание преди това в елемента ще бъде напълно заменено със съдържанието, което предоставяте с помощта на тази функция.
Ето как бихте пренаписали и подчертаете текста на нашата рубрика:
$("h3").html("<em>jQuery Playground</em>");
jQuery също има подобна функция, наречена .text(), която променя само текста, без да добавя тагове. С други думи, тази функция няма да приеме никакви HTML тагове, предадени към нея, а вместо това ще я третира като текст, с който искате да замените съществуващото съдържание.
Променете бутона с идентификатор target4, като подчертаете неговия текст.
Имайте предвид, че тагът <i> традиционно се използваше за подчертаване на текст, но вече се използва като таг за икони. Тагът <em> вече е широко приет като таг за подчертаване. И двете ще работят за това предизвикателство.
11.Remove an Element Using jQuery
Сега нека премахнем HTML елемент от вашата страница с помощта на jQuery.
jQuery има функция, наречена .remove(), която ще премахне изцяло HTML елемент.
Премахнете елемента #target4 от страницата, като използвате функцията .remove().
12.Use appendTo to Move Elements with jQuery
Сега нека опитаме да преместим елементи от един div в друг.
jQuery има функция, наречена appendTo(), която ви позволява да избирате HTML елементи и да ги добавяте към друг елемент.
Например, ако искаме да преместим target4 от дясната well колона към лявата well, ще използваме:
$("#target4").appendTo("#left-well");
Преместете вашия елемент target2 от left-well към right-well.
13.Clone an Element Using jQueryОсвен да местите елементи, можете да ги копирате от едно място на друго.
jQuery има функция, наречена clone(), която прави копие на елемент.
Например, ако искаме да копираме target2 от нашия left-well в right-well, ще използваме:
$("#target2").clone().appendTo("#right-well");
Забелязахте ли, че това включва залепване на две jQuery функции заедно? Това се нарича верижно свързване на функции и е удобен начин да свършите нещата с jQuery.
Клонирайте вашия елемент target5 и го добавете към лявата колона.
14.Target the Parent of an Element Using jQuery
Всеки HTML елемент има родителски елемент, от който наследява свойства.
Например, вашият jQuery Playground h3 елемент има родителския елемент на <div class="container-fluid">, който сам по себе си има родителското тяло.
jQuery има функция, наречена parent(), която ви позволява да получите достъп до родителя на избрания от вас елемент.
Ето пример за това как бихте използвали функцията parent(), ако искате да дадете на родителския елемент на елемента left-well син цвят на фона:
$("#left-well").parent().css("background-color", "blue");
Дайте на родитеския елемент на #target1 червен цвят на фона.
Вижте другите уроци от
