Рядко се използва JQuery селектори

Може да сте запознати с най-популярните селектори, тъй като те се основават на CSS. Въпреки това, има по-малко използваните селектори. В този урок, ще ви разкажа за по-малко известни, но не по-малко важни селектори.

Универсалният селектора (*)

с право се нарича универсална за избор, той може да се използва, за да изберете всички елементи на страницата, включително главата, тялото, скрипт или връзката. Виж моята демо. да се разбере за какво говоря.

Това селектор е в тандем с другите елементи на работата се забавя. Въпреки това, скоростта също зависи от това как се използва за избор на и как страницата на браузъра с отворен. Във Firefox следващата рекордните $ ( «# селектор> *»). Намерете ( «Ли») е по-бавен, отколкото $ ( «# селектора> ул»). Намерете ( «Ли»). Друг интересен факт е, че Chrome малко по-бързо, отколкото Firefox пише $ ( «# селектор> *»). Намерете ( «Ли»). Запис $ ( «# селектор *»). Намерете ( «Ли») във всички браузъри е по-бавен, отколкото рекордните $ ( «# селектор ул»). Намерете ( «Ли»). Съветвам ви да се сравни ефективността, преди да използвате селектори.

В това проучване, което сравнява скоростта на всички селектори.

Селектор на анимация (: анимирани)

С този селектор можете да получите достъп до всички елементи, чиято анимация не е приключила към момента на стартиране на селектора: анимирани. Има един проблем - ще бъде избран само елементи анимирани използване JQuery. Това е за избор на разширение на JQuery и не се повиши ефективността код за разлика от родния метод querySelectorAll ().

Използването на JQuery също така е невъзможно да се открие CSS анимация, но е възможно да се определят точно по времето на неговото попълване от animationend събития. Обърнете внимание на следващото демо.

В демото горе, за да извършите $ ( «: анимирани») CSS ( «фон», »# 6F9") ;. анимационен само нечетни DIV тагове, така че те са зелени. След това, функцията за анимация се нарича за останалите елементи DIV. Ако кликнете върху бутон бутон, всички divs ще светне зелено.

Селектор на атрибут неравенство ([ATTR! = "Стойност"])

Конвенционалните атрибутите селектори се определя дали има атрибут с даденото име или стойност. Селектор [ATTR! = "Стойност"] избира всички противоположни елементи с неопределена атрибут или атрибут, чиято стойност не съвпада с комплекта. Еквивалентен запис: не ([ATTR = "стойност"]). За разлика от [ATTR = "стойност"] за избор на [ATTR! = "Стойност"] не е включена в спецификацията на CSS, което означава, че записът във формата на $ ( «CSS-селектор»). Не ( «[ATTR =" стойност "] ") може да подобри производителността в съвременните браузъри.

Следният код за всички Li маркери с данни категория атрибут се добавя CSS клас несъответствие. Полезни неща за отстраняване на грешки или настроите желаната стойност атрибут чрез JS.

В демонстрацията под пускам на двата списъка и коригира стойността на категорията атрибут.

Selector: съдържа (текст)

Селекторът се използва, за да изберете всички етикети, съдържащи определен низ. Низът може да бъде както директно във вътрешността на елемента и в детските неговите елементи.

Примерът по-долу ще ви помогне да разберете действието на селектора. Ние ще постави на жълт фон за всички срещания на фразата в текста Lorem Ipsum. Първо оформление:

От текста става ясно, че фраза Lorem Ipsum текст е намерена 7 пъти на различни места. Нарочно направи изречение с малка буква, за да покаже на буквите е. JS кода по-долу подчертава всички срещания на:

Двойните кавички около низа за търсене, вие не може да се сложи. Т.е. и двете опции $ запис ( «раздел: Съдържа (" Lorem Ipsum ")») и $ ( «раздел: съдържа (Lorem Ipsum)»), ще бъде вярно в демото по-горе. Търсене на площ Избрах секцията тагове и текстът Lorem Ipsum се търси в тази форма. Освен това, тъй като селекторът е с малки букви, като текстовете на втората част на маркера не трябва да се маркира. Този процес ясно показва, че всичко работи.

Селектор: има (селектор)

Това селектор избира всички маркери, които в определен елемент се среща най-малко веднъж. За да съответства на този маркер не е задължително трябва да бъдат преки потомци. е () не е включена в спецификацията на CSS. За да се подобри производителността в съвременните браузъри, можете да използвате рекордните $ ( «чист-CSS-селектор») има (селектор) вместо $ ( «Pure-CSS-селектор: има (селектор)»)..

Един възможен начин на приложение - манипулирането на елементи с определени деца елементи. В примера по-долу, ще промени цвета на всички елементи от списъка, позовавайки се вътре. Markup Демонстрация:

JS код, за да променят цвета си елементи от списъка:

индексни селектори

В допълнение към CSS селектори като: тото-дете () в JQuery има своите индекси селектори -: екв (индекс). LT (индекс) и: GT (индекс). За разлика от CSS селектори вярват, че тези момчета от самото начало. Т.е. Селектор: тото-дете (1) избира първия дете елемент ,: екв (1) избира втората. За избиране на първата използва: екв (0).

селектори Индекс вземат отрицателни стойности. Ако отрицателна стойност, обратното броене започва в обратна посока от последния елемент.

Селектор: LT (индекс), за да изберете всички елементи, които са по-малко от предварително определена стойност. За избор на първите три елемента трябва да бъдат написани: LT (3), тъй като елементите са индекси на 0.1 и 2. Чрез настройване на отрицателен индексът, броене се извършва в обратна посока, и всички стойности са избрани към получения елемент. Подобно селектор: GT (индекс) избира всички елементи над предварително определен индекс.

За да се разбере по-добре работата на селектори на индекса poklikat за различните бутони в демонстрацията.

селектори форми

В JQuery е набор от селектори за лесен достъп до елементите на формуляра. Например, селектор: бутон избира всичко бутона тагове и всички елементи на бутон тип. По същия начин, за избор на: квадратчето избира всички input'y типа отметката. Селектори JQuery имат почти всички INPUT.

Помислете формата по-долу:

Под формата Аз създадох две текстови елементи и 4 отметки. Самата форма е проста, но тя може да ви помогне да разберете как работят селектори форми. С селектор: текст, ние се преброят на текстови елементи и актуализиране на текста в първия вход.

За да изберете целия текст вход аз използвах: текст, а след това аз ги брои по метода на дължина. В третия израз Аз съм с: екв (), за да получите достъп до първия елемент и да го осмислят.

Имайте предвид, че JQuery 1.5.2 селектор: Текстът се връща важи и за елементи, които не посочват типа атрибут. демонстрация

селектор Header (: глава)

Ако някога сте настъпили задача, за да изберете всички заглавия на страницата, можете да го направите с помощта $ ( «: заглавна»), но не рисувам $ ( «h1 h2 h3 h4 h5 h6"). Селекторът не е включена в спецификацията на CSS, което означава, че можете да подобрите производителността, като първо се използва за избор на CSS, и след това .filter ( «: заглавна»).

Така например, на страницата има етикет и чл три заглавия. В този случай, трябва да е като $ ( «статия: заглавна»), а не $ ( «статия h1, h2 статия, статия h3"). И да направят кода по-бързо, можете да използвате $ ( «статия») филтър ( «: Header») - да вземе най-доброто от двата свята.. следния код може да се използва за номериране глава.

Заключителни мисли

Редакция: Екип webformyself.

Най-IT новини и уеб разработки на нашия канал Телеграма