CSS манипулиране с jQuery

С jQuery Можем да постигнем много неща на ниво потребителско взаимодействие, включително манипулиране на DOM дървоЕдно от нещата, които може да не ви дойдат на ум, е CSS манипулация.
Чрез манипулиране на CSS можем да постигнем промени в елементите, които виждаме на екрана по много естествен и плавен начин, без да прибягваме до сложни функции в Javascript чисто, както трябваше да направим преди няколко години.
The СЛЪНЦЕ е начинът, по който е организиран нашият документ HTML, ни позволява да дадем предвидима и йерархична структура на това, което искаме да покажем на екрана. Това е много важно, тъй като това е начинът, по който браузърът тълкува документите, но има и друг аспект, който можем да използваме в наша полза; това е, за да можете да намерите елементите, за да предприемете действия по тях.
Така че, когато трябва да направим промяна в определен елемент, благодарение на СЛЪНЦЕ Можем да използваме различни начини да го локализираме и по този начин да манипулираме неговото съдържание, неговия стил или дори да го премахнем от документа в реално време.
Това е много практично в моменти, в които трябва да подчертаем елемент, когато предприемаме действие в документа или когато получаваме отговор и по този начин не се налага да променяме страницата или да я обновяваме напълно.
Една от най -добрите практики при създаване на стилове CSS е да използваме класове, с това можем да създадем аспекти, които след това можем да приложим независимо към различни елементи, без да се налага да прибягваме до пренаписване на кода отново и отново.
Атрибут на класаЗа да може елемент да приеме тези стилове, просто трябва да го поставим в неговия атрибут class = "" името на съответния клас и ако стилът, който пишем в него, е подходящ за елемента, той ще го отразява.
ОграничениеВсичко звучи страхотно, но има ограничение, стилът се зарежда при повдигане на страницата и ако трябва да включим нов стил, обикновено страницата трябва да се презареди, като по този начин причинява прекъсване на навигацията за потребителя.
jQuery ни позволява да заобиколим тези ограничения, като ни дава възможност да включим споменатите класове в реално време в документа, без да се налага да презареждаме цялата страница, за това просто трябва да използваме метода addClass () и му предайте името на класа CSS които искаме да добавим към момента.
Нека да видим малък практически пример стъпка по стъпка и след това ще видим пълния код на описаното:
1- Първо създаваме нашия файл, наречен add-classes.html и ще включим библиотеката на jQuery, за практически цели осъществяваме директно обаждане от CDN адекватно, това изисква интернет връзка, но можем да запазим файла и да го обслужим локално.
2- Тогава ще създадем нашите класове CSSЗа да можем да видим промяната по -добре, създадохме два класа, всеки променя цвета на фона на елемента, към който е приложен, и всеки клас ще има различен цвят.
3- В тялото на нашия документ създаваме два и на всеки от тях присвояваме идентификационен номер, с който можем да ги идентифицираме в рамките на СЛЪНЦЕ лесно със селекторите jQuery.
4- След това създаваме елемент, към който в събитието onclick казваме му да извика функция Javascript.
5- Накрая изграждаме нашата функция Javascript, това просто ще извика всеки елемент чрез неговия селектор и с метода addClass () Той ще добави клас от тези, които създадохме първоначално, когато направим това, веднага ще видим промяната.
Тъй като сме описали какво трябва да направим, ще видим кода такъв, какъвто е бил:

 Добавяне на класовеНашият първи jQuery CSS блок
Нашият втори блок на jQuery CSS
Щракнете, за да промените класовете

Както виждаме, това е доста просто и когато изпълним това в нашия браузър, ще видим как преди да кликнете върху бутона елементите са нормални и след щракване те променят цвета си и се добавят съответните класове. Нека видим на следващото изображение за какво говорим:

Увеличете

След като щракнем върху бутона, можем да визуализираме прехода на нашата страница:

Ако можем да добавим клас, ние също трябва да можем да направим обратното, което е да го премахнем, за това jQuery ни предоставя метода removeClass (), и това работи с принцип, много подобен на предишния пример, ние просто поставяме елемент и му казваме чрез метода, че той трябва да премахне посочения клас, ако го има, той ще бъде премахнат, в противен случай нищо не се случва.
За да направим нещата малко по -интересни, ще добавим използването на друг метод и това е методът за проверка на класа, това е hasClass () което ни позволява да проверим дали даден елемент има определен клас, с това можем да използваме условни условия и да правим различни експерименти, които диктува нашата логика.
За това ще направим малка страница, в която ще имаме няколко функции, функция ще провери дали елементът има определен клас, ако е така, той ще бъде премахнат, но ако отговорът е отрицателен, тогава ще го добавим .
Това ни дава възможност да играем малко със стиловете динамично, тъй като можем да видим в реално време, ако добавим или премахнем определени стойности.
1- Въз основа на предишния пример ще се концентрираме само върху частта, в която сме написали функцията Javascript.
2- Вътре във функцията ще създадем две условни условия, в първия ще работим с първия елемент, първо ще попитаме с условен блок ако () ако имате извикан клас първи класАко отговорът е положителен, ще приложим метода remove class, но ако нямаме класа, ще го добавим, това ще ни даде ефект на превключвател.
3- Повтаряме предишната стъпка за втория елемент и по този начин постигаме, че той се държи по същия начин.
Нека да видим новия код, който създадохме по -долу:

 Добавяне на класовеНашият първи jQuery CSS блок
Нашият втори jQuery CSS блок
Щракнете, за да промените класовете

Сега нека видим как е изпълнението на нашата програма, в това първо изображение ще видим как изглежда нашият документ HTML В първоначалното си състояние сме включили конзолата Chrome така че да забележим как се променят елементите:

Увеличете

Сега нека видим какво се случва, когато кликнете върху бутона и преходът е направен:

Увеличете

На пръв поглед може да изглежда, че този документ работи абсолютно същото като първия, който направихме в този урок, но ако щракнем отново, ще видим как ще работи методът. removeClass ().
Проверихме и как се прилага методът hasClass () работи, може би не прави нищо, което потребителят вижда, но ни дава възможност да изпълняваме условни условия на нашите HTML.
Има нещо, което ни позволява jQuery и това е за превключване между класове, за това използваме метода toggleClass (), с него можем да посочим на нашия елемент, че когато задействаме събитие, той ще вземе клас, ако има другия в списъка, вече приложен.
Помощна програмаТова е наистина полезно, когато искаме да работим върху промените в състоянието, това е един вид пряк път, за да избегнем необходимостта да пишем условна структура с метода hasClass (). Приложението му е много подобно на методите, които сме виждали досега, единствената разлика е, че вместо клас ще преминем два, разделени с интервал.
Нека видим как ще променим само функцията Javascript от нашия изпитен документ за включване на този нов метод:
1- Ще добавим начален клас към нашите елементи, по този начин ще имаме отправна точка за промените.
2- Тогава в рамките на нашата функция Javascript просто ще приложим метода toggleClass () към всеки от елементите чрез неговия селектор.
Нека да видим как изглежда нашият код с приложените промени:

 Добавяне на класовеНашият първи jQuery CSS блок
Нашият втори jQuery CSS блок
Щракнете, за да промените класовете

Сега нека видим какво се случва, когато заредим документа за първи път:

Сега нека видим какво се случва, когато отново кликнете върху бутона:

Увеличете

Ако продължим да кликваме върху бутона, класовете ще продължат да се редуват без ограничение.
С това завършваме този урок, научихме как можем да манипулираме CSS директно с jQueryС това можем да започнем да имаме по -добри идеи, за да направим нашите потребителски интерфейси по -богати на функционалности.