JQuery селектори и филтри
В предишните уроци обсъдихме въпроса за основните концепции на JQuery и начините за свързване.
В тази статия, ние ще обсъдим използването на селектори в JQuery (CSS и XPath), която дава възможност за лесно и точно да изберете един или повече DOM елементи. Всеки селектор воля показва кода например приложението. Използването на JQuery селектори не доведе до проблеми с работата в по-старите браузъри, като IE 6, така че тя съдържа механизмите за CSS 1-3 дела.
Структурата на кода JQuery
$ Знакът за долар - показва използването на JQuery. селектор - DOM елемент, с който да работи и специална функция JQuery с неговите параметри (например, анимация, разполагане, за трансфер, и т.н.).
Пример код JQuery
Селектори в JQuery
В този урок, ние ще се съсредоточи по-подробно по въпроса за селектори. Какво е това?
Ако искате да работите с конкретен елемент, а само веднъж (на теория, тъй като на практика, някои браузъри не презират идентификатор повторна употреба), а след това с уникален идентификатор присвоите.
#ID - избира един елемент с предава идентификатор (ID). В този случай, специален
.клас - изберете всички елементи с определен клас. Това е така, може да има няколко. Основното нещо, което е едно и също име на класа.
Както можете да видите, че част (DIV) и двата класа са едни и същи.
Всички елементи, където spec_class клас стойност и са същите граници като в предишния пример, но в червено.
Избери всички на определен тип елемент. Това е или тялото. или всички Разделение. или всичко на масата, и така нататък.
Всички Разделение появява зелена рамка.
* (Всички предмети) - изберете абсолютно всички елементи. Дори по главата и тялото.
Всички елементи на документа ще се появи синя рамка.
Изберете всички елементи в тялото и да го черна рамка от 2 пиксела направи.
По тип: selector1, selector2. selectorN - списък на всички елементи. По-долу е интересен пример за селектори, които споделят.
Избира всички елементи DIV, педя и р, в който е посочено клас spec_class. Всички селектори просто държави, разделени със запетаи.
Йерархични селектори в JQuery
Избрани основен елемент (изходен елемент) и елементи, включени в тях (потомци). Да разгледаме примера по-долу потомците на родителската форма и изберете.
Всички елементи изберете, потомци форма ще определи черното пунктирана граница.
Сега изберете всички потомци на член на майка.
В началото на всички наследници изберете елемент с идентификатор ID. и след това те създават двоен черна рамка.
предишна и следваща (предишен и следващ)
Посочете елементи достигат до следното (следващо) на елемента, посочен като предишния (пред).
Изборът на входа елементи, достигайки за етикета. Задайте ги на свойствата на CSS - цвят във формата на черно, а стойността (.val) набор Готово!
Сега ние работим с братя и сестри. Vyyuiraem всички сестри, след предходен елемент (пред).
Търсим всички DIV елементи, които са сестра по отношение един към друг и веднага следват с #prev на идентификационен елемент. Имайте предвид, че в примера няма да бъде избран за регулиране на чувствителността елементи, тъй като изборът е само за елементи DIV.
основни филтри
първият елемент е избран със споменатия селектор.
В първия ред (TR) в таблицата се маркира с удебелен шрифт (удебелен).
Сега ние ще изберем последния елемент с определения за избор.
Намерете последния ред (TR) в таблицата и боя на заден план в жълто и да зададете смели (дързък).
Използването на филтри отрицание елементи. Избери всички вложените материали, които не си струва в квадратчето (отметка), както и педя, след тях
Полета за отметка стойност не се променя.
Внимание! Интересен пример. който използва всяка секунда в тяхната практика. Как да изберем равна или нечетни елементи? Необходимо е след това да ред от текста или дори да направи по-лесно кода. Стойността на старт 0.
Избираме дори редове в таблицата. Подчертаната ще бъде първата, третата и така он-лайн. Внимание! Прочитане отива индексите, и в която първият ред е настроена на 0. След избран ред на индекси 0, 2, 4 и т.н.).
Сега изберете странни елементи. Смята се, стойността на индекса се започва от 0. Съответно 1,3,5,7 стойности ще бъде избран и така нататък. Това съответства на 2,4,6 и така линиите, тъй като те разчитат идва след факта, до първия.
Предшестващо състояние на нечетните линии са боядисани в сиво.
Изборът на конкретен индекс на елемента. Примерът ще рисувам само един ред от таблицата.
Изборът на индекса на елемента 2. Не забравяйте, че това ще бъде третия ред, тъй като проучването за осъществимост, ще бъде третият от индекса на полувремето (0,1,2).
Сега изберете стойностите на индексите, които са посочени в селектора.
Изберете реда от таблицата, индексът е по-голяма от 4, т.е. индекс им е 5.6, и така нататък. Това съответства на 6, 7, и т.н. срещащи елементи, в този случай редовете на таблицата.
Сега изберете стойността на индекса, който е по-малък от посочения в селектора.
Избор на всички елементи с TD индекс mNaprimer на търсите всички елементи на ТД, с индекс на по-малко от 3. Тъй като броят, отново си спомни се извършва от земята, този ред на таблицата (ТД) 1,2,3.
всички елементи, които са групирани ще бъдат избрани (Н1, Н2, Н3, и т.н.)
За всички заглавия (з елементи), ние си поставихме за син печат и светъл фон Серве.
Те ще бъдат избрани от всички елементи, които са в момента, анимирани.
Ето един пример малко по-сложно. След като щракнете върху бутона промените цвета на анимационен елемент (DIV). При липсата на анимирани елементи е без промяна.