Как да използваме jQuery Selectors и CSS Selectors, както и основите на това как работят

Онзи ден интервюирах някой, който е завършил предното сертифициране на freeCodeCamp. Той също беше завършил доста престижен bootcamp, където участниците кодираха от 8:00 до 20:00 за шест седмици поред. Да!

Способността му за програмиране беше страхотна, но с изненада видях, че познанията му в CSS липсват. И като липсва, искам да кажа, че той не знаеше как да избере клас, за да приложи стил. Това не се отразява непременно негативно на него. Ако не друго, това подчертава как много програмисти гледат CSS.

Много хора смятат, че изучаването на CSS е маловажно, тъй като дизайнерите обикновено ще могат да внедрят CSS вместо вас. Въпреки че това е вярно, много пъти вие (като програмист) ще трябва да знаете някои основни CSS, за да изберете елемент и да му кажете да направи нещо, когато се случи нещо друго.

Например, платформата за анимация Green Sock (GSAP) вероятно е твърде програмирана, за да бъде ориентирана към дизайнера. Изисква разработчик с познания за CSS, както и програмиране.

Не казвам, че всеки разработчик трябва да бъде майстор на CSS. Но мисля, че ако ще се наричате разработчик на пълен стек, трябва да знаете основите на CSS. И основите започват от селектора .

Отказ от отговорност: селекторите jQuery всъщност не са уникални за jQuery - те всъщност са CSS селектори. Ако обаче сте нещо като мен, научихте jQuery преди да научите правилно CSS и следователно автоматично свързвате селектори с jQuery. Въпреки че тази статия е за CSS селектори, тя ще ви помогне, ако имате нужда от някои разяснения и за jQuery селектори.

Селекторът на CSS

Винаги ми е полезно да играя с код, затова ето един прост CodePen за игра с основни селектори.

В HTML има три начина за етикетиране или категоризиране на елементи. Първият начин е най-широкият: по име на етикет. Например можете да изберете всичкиdiv s на вашата страница, като използвате простия селектор div. Ей, това беше лесно!

Вторият начин вероятно е този, който ще използвате най-много: classатрибутът. Можете да изберете по клас, като използвате точка ( .), така че в горния пример, за да изберете всичкиелементи с клас, sectionкойто използвам .sectionкато селектор.

Третият начин често се прекалява, но все пак е полезен и това е idатрибутът. Идентификаторите трябва да идентифицират вашите елементи, точно както вашият SSN (в САЩ) може да ви идентифицира като човек. Това означава, че идентификационните номера трябва да са уникални за цялата страница. За да изберете елемент с конкретен ID, използвате #хаштага ( ) или octothorpe, както обичам да го наричам. За да изберете елемента с идентификатора на otherI use #other.

Това са най-основните селектори. За да обобщите:

  • изберете по име на етикет (без префикс)
  • изберете по име на клас (префикс на .)
  • изберете по ID (префикс на #)

Само тези три селектора ще ви позволят да изберете почти всичко на вашата уеб страница.

Тест 1

  1. Как бихте избрали всички етикети на абзаци на страницата? (намек: етикетите на абзаци са p)
  2. Как бихте избрали всички елементи с клас button-text?
  3. Как бихте избрали елемента с ID на form-userinput?

Чувствайте се свободни да споделяте отговорите си в коментарите!

Трябва ли всички идентификатори да са уникални?

Това е малко отклонение, което според мен е много важно. Но ако сте тук само за да научите как да използвате селектори, можете да преминете към следващия раздел

С име като ID бихте предположили, че всеки HTML ID трябва да е уникален или вашият HTML документ няма да работи. В края на краищата, опитът да има две constпроменливи ще накара много редактори да ви крещят, така че няма ли и HTML да вика?

Проблемът е, че HTML няма да ви крещи. Всъщност никой дори няма да ви каже, че нещо не е наред. Може да намерите грешка, която произтича от не уникален идентификатор. Но ще се побъркате, опитвайки се да разберете основната причина за грешката, защото това е много фин провал.

Примерът по-горе показва защо наличието на дублиращи се идентификатори може да доведе до проблем на вашата уеб страница. Първо, всъщност има две divs с ID other. Ако коментирате стиловете #other, ще видите, че и двата елемента всъщност се оформят. Това може да ви накара да си помислите: „Е, хей, мога да използвам взаимозаменяеми идентификатори и имена на класове!“

Не толкова бързо. Ако погледнете панела на JavaScript, ще видите, че съм избрал конкретни елементи въз основа на етикета на елемента им: име на етикет, име на клас или ID. Ще забележите това document.getElementsByTagNameи ще document.getElementsByClassNameвърнете колекция от всички съвпадащи HTML елементи. document.getElementByIdвръща само първия HTML елемент, който може да намери със съответстващия ID. Можете да проверите това, като коментирате getVanillaSelectorsфункцията и проверите конзолата.

За допълнително усложняване на нещата, ако използвате querySelectorAllметода на JavaScript (който взема CSS селектор като вход), получавате напълно различен резултат.

И просто за да се забърка с вас, jQuery прави нещо различно, въпреки че има подобен синтаксис querySelectorAll.

Нямам обяснение за различното поведение. Мога обаче да ви кажа как да го избегнете. Ето моите правила:

  1. Никога не използвайте идентификатори. classВместо това използвайте атрибути.
  2. Ако трябва да използвам идентификатор, го поставете така, че да бъде уникален, дори ако подобен елемент съществува на страницата; напримерmenu-item-01

Понякога формулярите и техните полета за въвеждане може да се нуждаят от идентификатори. В този случай можете да следвате правило номер 2. Ето как бих поставил пространство за имена на формуляр за потребителска регистрация:

По този начин, ако имам два формуляра на една и съща страница (да кажем user-signupи user-signin), те гарантирано ще имат уникални идентификатори. Дори полетата на userID да са сходни между формите.

Комбиниране на селектори

Понякога един селектор просто няма да го отреже. Понякога трябва да получите всеки, divкойто има име на клас section. Друг път ви трябват всеки елемент с име на клас, sectionкойто е дъщерен елемент на с divс ID user-signup. Има много възможни други комбинации от селектори.

В този раздел ще научите три начина за комбиниране на селектори и съм уверен, че те ще отговарят на 90% от вашите нужди. Ако установите, че повече от 11% от вашите нужди са неизпълнени, заповядайте да ми се оплачете и аз ще редактирам това, за да кажа 89% от вашите нужди :).

Както преди, нека започнем с CodePen:

Комбиниране на селектори за един елемент

Добре, първо нека разгледаме комбинирането на селектори за един елемент. Това означава да изберете елемента, който има име на етикет x, И име на клас на yИ ИД на z. Разбира се, не са ви нужни и трите, но можете да комбинирате и трите.

Да кажем, че искаме да изберем всички divs с клас на item. За да направите това, ние комбинираме двете: div.item. Той преминава от най-общия към най-конкретния отляво надясно. Това избира всички divтагове, които също имат името на класа item. Важно е да се отбележи, че между и няма място . Добавянето на интервал променя изцяло селектора , както ще разгледам в следващия раздел.div.item

Ако коментирате съответния CSS, ще видите, че sectionимето на класа на itemне е станало червено. Това е, защото това не е divетикет.

Можете да направите същия модел с имена на класове и идентификатори. Но ако имате идентификатор на елемент, можете просто да използвате идентификатора. Няма причина да избирате идентификатор с конкретно име на клас, защото ако сте спазили правилата за идентификация по-горе, така или иначе имате само един елемент с този идентификатор.

Но само за паритет, ето един пример за избор на divс клас itemи ID на other: div.item#other. Отново, преминавайки отляво надясно, става най-общо към по-конкретно.

Най-вероятно ще използвате този синтаксис, за да изберете елемент, който има множество класове. За да направите това, просто отделете всички класове с точки. За да изберете всички елементи, които имат и двата класа itemи section, бихте използвали .item.section. Поръчката няма значение кога го правите по този начин, така че .section.itemще работи и вие.

Този един трик ще ви позволи да бъдете по-конкретни във вашите селектори.

Селекторът „дете“

Вторият начин, по който можете да комбинирате селектори, е като използвате селектора „дете“, както аз обичам да го наричам. Има два начина да направите това, затова ще започна с най-общия.

Първо, можете да изберете всяко дете на определен елемент, като добавите интервал. Например, за да изберете всички дъщерни елементи itemна #otherелемента, това би било #other .item. Забележете пространството между селекторите.

Второ, можете да изберете непосредствени деца на определен елемент, като използвате &gt ;. „Непосредствено дете“ на елемент е този, който е само на едно ниво. В примера, има т wo .iTEM елементи, съдържащи се в т he #otя елемент, но една от т he .iTEM елементи е увит в a .wrapедин елемент, така че едно е да не незабавен дете.

За да ви даде визуално, ако свиете всичко под #otherелемента, ще видите това:

Тези двамата са единствените преки деца на #otherелемента. За да изберете само директното дъщерно .itemна #other, бихте използвали #other > .item, който би избрал директното дъщерно, но не и това под th .wrap. Чудесно, а?

Тест 2

  1. Как бихте избрали всички маркери на абзаци, които принадлежат на sectionелементи? (намек: етикетите на абзаци са p)
  2. Как бихте избрали всички елементи с клас на button-text, които са потомци на елементи с клас на button?
  3. Как бихте избрали елемента с клас, form-inputкойто е пряко дъщерно на formелементи?
  4. Бонус въпрос : обяснете какво избира този селектор: header.title > form.user-signup button.button-danger

Както и преди, не се колебайте да споделите вашите отговори в коментарите!

Събирайки всичко това - буквално

Можете да комбинирате комбинирани селектори. Наистина ли. Бонусният въпрос по-горе показва пример за него, но съм добавил няколко комбинации в края на примерния код.

Например можете да изберете всички .items, които са деца на divs с клас на, parent-itemкато използвате div.parent-item .item. Уау!

Можете да изберете и преки потомци. Например, за да изберете всички divs с клас, itemкоито са директни потомци на divs с клас на parent-item: div.parent-item > div.item.

И накрая, само за да се забъркваш с вас, можете да се разходите из цялата DOM дървото: div.parent-item .coolest-item .item. itemклас, който е дете на coolest-itemклас, който е дете на divклас с parent-item.

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

Бонус: Използване на Chrome DevTools за получаване на селектор

Можете да използвате Chrome DevTools, за да получите селектора на всеки елемент, който можете да изберете в DOM. Ето как:

  1. Отворете Chrome DevTools. Тъй като избирате елемент, продължете и щракнете с десния бутон върху елемента, който искате да изберете, и кликнете върху „Проверка“:

2. Щракнете с десния бутон върху елемента DOM, който искате да изберете, и задръжте курсора на мишката върху „Копиране“, след което щракнете върху „Копиране на селектора:“

3. Това е! #editor_93 > section > div.section-content > div:nth-child(3) > p.graf.graf — p.graf-after — figure.graf — trailingМежду другото селекторът, който копирах, е .is-selected. Можете да копирате se lector into document.querySelector или jQuery и да получите елемента.

Надяваме се, че този запис е полезен! Ако ви хареса, моля, дайте ми няколко пляскания, за да го видят повече хора. Благодаря!