Съдържание
Тези елементи или селектори могат да бъдат манипулирани с Jquery и css за създаване на ефекти и получаване на съдържание, скриване или добавяне и прилагане на някакъв ефект към него, улеснявайки работата на програмистите. Някои селектори са по -известни с css кода например:ИДЕНТИФИКАТОРИ
Те са елемент от най -високата йерархия и определят общи параметри за елементите на блок.Определят се като #id и обикновено се прилагат към списъци или блокове.
Това е селекторът за идентификатор на абзац
Абзац без селектор
Можем да видим как абзацът в блока е повлиян от идентификатора, но този отвън не е засегнат.
УРОЦИ
Те са елементи от по -ниска йерархия и се използват за отделни елементи или за определяне на класове в рамките на идентифициране, като например:
Това е селекторът за идентификатор на абзац
Син параграф с п
Син параграф с divЧервен параграф с div
Тук можем да видим, че класът .parraforojo определя цвета на абзаца, но зависи от размера, който определя идентификатора на по -висока йерархия #pararafo.
Докато независимият клас .parrafoazul може да приложи елемент p, който не зависи от никого, можем дори да го приложим към други елементи като div, но ако се опитаме да приложим класа parraforojo независимо от идентификатора #paragraph, ще видим, че го прави не работи, тъй като не изпълнява йерархията, която налага неговия идентификатор #параграф.
Има много селектори, които можем да използваме тук, ще видим някои
Селектор за четни (четни) и нечетни (нечетни)
Този селектор се прилага към масив от елементи, които използват един и същ клас и може да повлияе на четни или нечетни елементи, например оцветяваме фона на списък с абзаци.
ПАРАГРАФИ
Потребител 1 е оставил съобщение
Потребител 2 е оставил съобщение
Потребител 3 е оставил съобщение
Потребител 4 е оставил съобщение
UL СПИСЪК
- Потребител 1 е оставил съобщение
- Потребител 2 е оставил съобщение
- Потребител 3 е оставил съобщение
- Потребител 4 е оставил съобщение
СЕЛЕКТОР ПЪРВИ (първи) и последен (последен)
Тези селектори ни позволяват да манипулираме първия и последния елемент от определен списък, например задаваме списъка в сиво, първият елемент в зелено и последният елемент в синьо.
UL СПИСЪК
- Потребител 1 е оставил съобщение
- Потребител 2 е оставил съобщение
- Потребител 3 е оставил съобщение
- Потребител 4 е оставил съобщение
ИЗБОР НА ФОКУС
Фокусът върху елемент се активира, когато щракнете върху елемент и се деактивира, когато щракнете върху друга област на мрежата или върху друг елемент. Ще видим пример с формуляр за вход, създаваме класа .focologin и след това го прилагаме върху идентификатора на формуляра #login, за да повлияем на всички елементи, които съдържа. Можем също да го приложим към слой или div блок и да поставим формата вътре в блока.
ФОРМУЛЯР
Потребителска парола:
Присвояване или промяна на css стил на елемент с AddClass
Ако искаме да присвоим css стил динамично или да променим според някакво установено условие, ще използваме AddClass. В този случай имаме бутон .green на клас и на текста от типа на въвеждане присвояваме .box на класа от Jquery. Въвеждането на тип парола не е засегнато и бутонът за изпращане също не е засегнат, тъй като не сме им присвоили никакъв клас css.
ФОРМУЛЯР ЗА РЕГИСТРАЦИЯ
Име:
Адрес:
Телефон:
Електронна поща:
СЕЛЕКТОР РЪВНИ ИЛИ РАВНИ
Този селектор позволява идентифициране на елемент от масив от елементи според позицията, в която е таблична клетка, например, трябва да имаме предвид, че елементите са изброени като индекси на матрица, започваща с 0,1,2 и т.н. .
Заглавие А | Дял Б | Дял В. |
---|---|---|
Клетка 0 | Клетка 1 | Клетка 2 |
Клетка 3 | Клетка 4 | Клетка 5 |
Продължавайки с таблиците и прилагането на селектори, ще видим как да създадем фонов дизайн по променлив начин в цветовете на редовете на таблица, подобно на това, което преди беше прилагано с абзаци и списъци. Ние не добавяме толкова css или дизайн, така че ефектът да бъде по -добре оценен основно.
SELECTOR n-то дете
Продължавайки с предишния пример, можем да използваме селектора на n-то дете като допълнение, подобно на селектора на eq, но разликата е, че с n-то дете позициите могат да бъдат посочени под формата на аритметична операция. Използва се за избор на един или повече елементи, но при условие, че е n -то дете на родителя си. Този селектор е полезен за избор на втори абзац от блок или трети елемент от списък и т.н. Елементите не се приемат като масив, а в ред първи, втори и т.н.
Например, ако в предишния скрипт добавим
В този случай ще бъдат избрани нечетни колони
Други примери за практическо използване на този селектор биха били
- Нечетни колони n-то дете (2n + 1)
- Сдвоени колони nth-child (2n)
- Първа и четвърта колона nth-child (3n + 1)