DOM манипулация с jQuery

DOM дървоThe DOM дърво е йерархичната организация на съдържанието на нашия документ HTMLТова е много полезно при идентифициране на различните елементи, които се съдържат в споменатия документ, тъй като с уникални идентификатори можем да присвоим различни имена на структури, които, въпреки че имат подобни етикети, имат различна цел.
Проблемът в миналото беше, че не беше възможно лесно да се премине през DOM дърво в реално време, тъй като трябваше да се създадат тромави рутини и функции Javascript, обаче всичко това се промени с появата на jQuery. Тази рамка помогна да се осигури подход за използването на Javascript за не-експерти това накара популярността му отново да скочи.
Едно от най -интересните неща, които може да изглеждат много сложни, е да изберете деца на елементДокато говорим за йерархична структура, можем да говорим за семейство, където бащата е най -висшият елемент, а децата му са елементи, които се управляват под неговата мантия или закрила.
Да кажем например, че имаме нередовен списък или елемент , логично е да се мисли, че децата им са елементите което може да съдържа, ако искаме да изберем елемент Конкретен списък може да изглежда като много сложна задача, но с jQuery можем да го постигнем по много прост и чист начин.
МетодиЗа да направим това, трябва само да дадем уникален идентификатор на нашия родителски елемент и след това да извикаме метода в неговия селектор деца (), с това ще получим позицията, на която можем да отидем с метода всеки () всяко негово дете.
Нека видим в следния код малък пример за това, за което говорим:

 DOM манипулация с JQuery

Син 1
Син 2
Син 3

Опитай 

Първо започваме с включването jQuery от CDN официално, с това нямаме нужда да съхраняваме файла със изходния код на нашия компютър, така че с браузър и връзка с интернет можем да използваме този пример.
След това създаваме малък скрипт, където посочваме, че когато щракнете върху елемента с идентификатора Старт вътрешният код се изпълнява.
Кодът, който трябва да бъде изпълнен, просто изразява, че елементът с идентификатора трябва да се търси татко и към този селектор прилагаме метода деца () да локализира своите деца и накрая с метода всеки () Преминаваме през всеки един от тях, в случая с кода има три, които ще ни позволят да направим пътуването и това трябва да ни покаже текста, който всеки от тях съдържа. Нека да видим как работи горният код в нашия браузър:

След натискане на бутона опитай можем да видим първия Тревога:

Увеличете

Ако продължим да затваряме сигналите, ще видим всички дъщерни елементи, съдържащи се в йерархичната структура:

Увеличете

Както видяхме, боравенето с елементите в структурата на нашата страница изобщо не е сложно, това е само малък пример, който ни дава отворена уста за това, което ще продължим да виждаме в този урок.
Въпреки че намирането на дъщерни елементи е доста полезно, има метод, който ни позволява да правим по -директно търсене чрез отивам, вълни Уроци. Позоваваме се на метода намирам (), този метод ще намери всички съвпадения на дъщерните елементи на селектора, който го извиква.
С това можем да имаме страхотно и се обадете на а намирам () върху него, за да намерите класове или id по -специално, с което стигаме до следващата точка.
Инжектиране на стиловеСлед като намерим желания елемент в СЛЪНЦЕ, много пъти не искаме да отпечатваме съдържанието му, ако не го подчертаем по някакъв начин, интересен начин е да добавим стил към споменатия елемент, това ще ни позволи да манипулираме CSS на нашата страница косвено и да можем да подчертаем важни елементи в нея и по този начин можем да видим нещо по -динамично в нашия документ HTML.
Нека да видим в следния код как ще приложим използването на метода намирам () и след това стил инжекция относно откритите елементи, по този начин можем да се доближим до нещо, което можем да дадем полезно в реалния живот:

 DOM манипулация с JQuery

Син 1
Син 2
Син 3

Опитай 

В този код, ако погледнем, имаме нещо много подобно на предишния трик, променихме това, че на първо място съдържанието на етикета тук, вместо да пресичаме децата на елемент, използваме метода намирам () за локализиране на елемент с класа подчертайте и към този елемент с метода css () Ще въведем стилове в него, в този случай ще го зададем като червен цвят на фона.
Нека да видим как изглежда в нашия браузър, след като кликнете върху бутона опитай:

Точно както успяхме да локализираме дете на елемент, можем да постигнем ефекта в обратния смисъл на йерархията, тоест от сине, можем да намерим бащата. Това е много полезно при дълги списъци, които се генерират динамично, тъй като по този начин можем да подчертаем или използваме родителите според нашите нужди.
Родители () методЗа това имаме метода родители () че по подобен начин на деца () локализира родителя на селектора, който се извиква. Ако добавим метода each () към това, ще донесем цялото наследяване на елемента, например ако е ще внесем елемента и ако отидем по -нагоре в йерархията до елемента и така нататък, докато стигнем до елемента, тъй като по йерархия всички те са родители по начина, по който се съдържат.
Нека да видим в следния код как можем да направим скрипт jQuery което ни позволява да постигнем тази цел да покажем всички родители на избрания от нас елемент:

 DOM манипулация с JQuery

Син 1
Син 2
Син 3

Опитай 

Структурата е много подобна на предишните примери, но тук правим промяна, този път използваме класа подчертайте като селектор и прилагаме метода родители () и след това с всеки () можем да преминем през йерархията отвътре навън.
Нека да видим как изглежда горният код, когато го стартираме в браузъра си:

Увеличете

Подобно на предишния пример, стига да затваряме Сигнали ще видим всички родители на елемента, докато стигнем до HTML.
Предишният трик ни помага да установим родословното дърво на елемент, може би ще ни помогне да отстраним грешките в нашия HTML, но какво се случва, ако искаме да получим конкретен родител, например ако имаме няколко списъка, но искаме родителят на конкретен да бъде подчертан.
Не бива да се притесняваме, за този случай имаме метода roditeljiUntil (), с това можем да посочим точка на пристигане и можем да направим a HTML инжектиране За да подчертаем целия блок, нека видим следния код, където сме приложили това знание:

 DOM манипулация с JQuery

Син 1
Син 2
Син 3

Опитай 

Ако забележим, че този код е леко изменение на предишния, основната промяна се случва при извикването на метода, който току -що обяснихме roditeljiUntil () до която преминахме div, където търсенето на родителски елементи на селектора, който засягаме, ще спре.
За да покажем, че всичко работи, сме инжектирали малко HTML За да оцветите маркираната секция в червено, нека видим как изглежда това в нашия браузър, когато кликнете върху опитай:

След това виждаме, че само секцията с div е тази, оцветена в червено, като по този начин показваме, че сме спрели търсенето на родителя в конкретния елемент, дори като имаме директен родител като елемента което ни показва силата на търсене чрез DOM дърво.
С това завършихме нашия урок, това е само малка демонстрация на цялата сила на jQuery да манипулирате СЛЪНЦЕ от нашите HTML, важното е, че трябва да практикуваме много и да четем документацията много добре, тъй като с нея ще можем да получим допълнителни знания и ресурси, за да можем да повишим нивото си на развитие.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка