Продължаваме с jQuery предизвикателството. Ако сте пропуснали началото вижте: 2 HTML, CSS and Bootstrap jQuery challenges>>
15.Target the Children of an Element Using jQuery връзка>>
Когато HTML елементите са поставени едно ниво под друго, те се наричат дъщерни (children) на този елемент. Например елементите на бутоните в това предизвикателство с текст #target1, #target2 и #target3 са дъщерни на елемента <div class="well" id="left-well">.
jQuery има функция, наречена children(), която ви позволява да получите достъп до дъщерните елементи на който и да е елемент, който сте избрали.
Ето пример за това как бихте използвали функцията children(), за да дадете на децата на вашия ляв елемент синия цвят:
$("#left-well").children().css("color", "blue")Дайте на всички деца на вашия десен елемент (
right-well ) оранжев цвят.
Видяхте защо атрибутите id са толкова удобни за насочване с jQuery селектори. Но не винаги ще имате толкова чисти идентификатори, с които да работите.
За щастие, jQuery има някои други трикове за насочване към правилните елементи.
jQuery използва CSS селектори за насочване към елементи. CSS селекторът target:nth-child(n) ви позволява да изберете всички n-ти елементи с целевия клас или тип елемент.
Ето как бихте придали на третия елемент във всяка колона (well) отскачащ клас:
$(".target:nth-child(3)").addClass("animated bounce");Накарайте втория дъщерен елемент във всеки от всяка колона (well) да подскочи. Трябва да изберете елементите с target клас.
17.Target Even Elements Using jQuery
Можете също да насочвате към елементи въз основа на техните позиции, като използвате селектори :odd или :even.
Обърнете внимание, че jQuery е с нулев индекс, което означава, че първият елемент в селекцията има позиция 0. Това може да бъде малко объркващо, тъй като, противно на интуицията, :odd избира втория елемент (позиция 1), четвъртия елемент (позиция 3) , и така нататък.
Ето как бихте насочили всички odd elements с клас target и да им добавите клас:
$(".target:odd").addClass("animated shake");Опитайте да изберете всички равни target елементи и да им дадете класовете на анимация(animated) и разклащане(shake). Не забравяйте, че even се отнася до позицията на елементите с нула базирана система в ума.
18.Use jQuery to Modify the Entire Page
Приключихме с изграждането нашата jQuery playground. Да го съборим!
jQuery може да се насочи и към елемента body като well.
Ето как бихме накарали цялото тяло да избледнее: $("body").addClass("animated fadeOut");
Но нека направим нещо по-драматично. Добавете класовете анимирани(animated) и шарнирни(hinge) към вашия body елемент.
Вижте на видео кода и ефекта, който постигнахме.
Успех!Заповядайте в следващото предизвикателство Store Data with Sass Variables
Вижте другите уроци от Front End Development Libraries>>