ЈКуери је библиотека метода написаних на језикуЈаваСцрипт, који су дизајнирани да поједноставе рад са елементима ХТМЛ странице. Ова библиотека такође знатно поједностављује избор ових елемената, јер подржава скуп селектора, од којих је већина позајмљена из ЦСС-а. У овом чланку ћемо детаљно објаснити све јКуери селекторе и дати примере њихове употребе.
ЦСС и јКуери
Као што је горе поменуто, селектори у јКуери-у су позајмљени из ЦСС-а, али овде има неколико „АЛИ“.
- Прво, јКуери подржава само селекторе који бирају ДОМ елементе, што значи да не можете радити са селекторима догађаја као што су ховер и псеудо-елементи првог реда.
- Друго, јКуери има много других селектора које нисте видели у ЦСС правилима, због чега ће овај чланак и даље бити релевантан за вас ако већ знате све ЦСС елементе.
Основни елементи
Ови бирачи се најчешће користе јер су најједноставнији и најпоузданији начин за одабир предмета. Ова група је у потпуности доследна ЦСС селекторима:
| Селектор | Опис селектора |
| $ ("*") | Избор укључује све елементе на страници. |
| $ ("б") | Избор укључује елементе са изабраном ознаком из ХТМЛ ознаке, у овом примеру - елементе <б> ... </б> |
| $ (". цлассА") | Избор укључује елементе са наведеном класом (<див цласс = "цлассА">) |
| $ ("# ИДоне") | Избор укључује елементе са наведеним ид (<див ид = "ИДоне">) |
Као и код ЦСС-а, можете одабрати више њихјКуери селектори истовремено. Могу се одвојити зарезима. На пример, користите селектор јкуери према имену ознаке и према ИД - $ ("# ИДоне, б"). Такође је дозвољен избор преко ознаке + класе или ознаке + ИД, на пример, $ ("б.цлассА").
Селектори атрибута
Коришћење различитих ЦМС-а можете наићиситуација у којој се Ид или класа не могу поставити на елемент ХТМЛ ознаке. Исти проблем се јавља приликом руковања корисничким садржајем. Ово покреће проблем дохватања одређених елемената, али се лако може решити помоћу селектора атрибута из јкуери.
| Селектор | Опис селектора |
| $ ("див [атрибут]") | Обрађује све елементе наведеним атрибутом, а занемарује његову вредност |
| $ ("див [атрибут =" вредност "]") | При одабиру елемента узима у обзир његов атрибут и вредност |
| $ ("див [атрибут! =" вредност "]") | Одабире елемент за који се наведени атрибут разликује од наведене вредности. Избор такође укључује елементе који немају овај атрибут. |
| $ ("див [атрибут ^ =" вредност "]") | Одабире елемент чији задати атрибут започиње низом наведеним у вредности |
| $ ("див [атрибут $ =" вредност "]") | Одабире елемент чији се дати атрибут завршава низом наведеним у вредности |
| $ ("див [атрибут * =" вредност "]") | Бира елемент чији задати атрибут садржи низ наведен у вредности у било ком делу |
| $ ("див [атрибут ~ =" вредност "]") | Бира елемент за који дати атрибут има реч наведену у вредности (низ знакова без размака) |
| $ ("див [атрибут | =" вредност "]") | Одабире елемент чији се дати атрибут подудара са вредношћу наведеном у вредности или започиње с њом, након чега следи цртица |
Атрибуте можете да комбинујете да бисте сузили претрагу одговарајућих елемената, на пример $ ("имг [видтх = 500] [хеигхт = 260]").
Избор елемената према садржају
Копајте по садржају елемената ХТМЛ странице иодабир жељеног на основу резултата јединствена је карактеристика јКуери-а. Користећи овакву технику, можете, на пример, да направите селектор јкуери на тексту садржаном у пасусу (<п> текст </п>).
| Селектор | Пример селектора | Опис селектора |
| : садржи () | $ ("п: цонтаинс (" валуе ")") - бира све <п> пасусе који садрже низ "валуе". | Бира елемент који садржи наведенолинија. Елемент ће бити у реду чак и ако је наведени низ унутар његовог подређеног елемента. Имајте на уму да овај селектор разликује велика и мала слова, тако да се „тект“ неће подударати са наведеним „ТЕКСТ“ |
| : хас () | $ ("п: хас (б)") - бира све <п> елементе који садрже <б>. | Одабире елемент који садржи други елемент наведен у заградама. Овај селектор такође узима у обзир подређене елементе. |
| : родитељ | $ ("п: надређени") - бира све <п> који садрже нешто. | Бира елемент који садржи било шта |
| : празно | $ ("п: емпти") - бира све празне <п> с. | Бира елемент који не садржи ништа. |
Сваки од представљених селектора ће одабрати одређени елемент из кода на слици испод.
Овај јкуери селектор такође се може комбиновати са другима, на пример, $ ("п.маил: цонтаинс (" е-маил ")") ће одабрати све пасусе са класом "маил" који садрже низ "е-маил".
Избор чланова по хијерархији
Ова метода је апсолутно идентична селекторима изЦСС. Омогућава вам одабир елемената на основу њиховог положаја у односу на братске елементе у ДОМ структури. Овде је боље одмах анализирати јкуери селекторе са примерима.
| Пример селектора | Опис селектора |
| $ ("ул> ли") | Бира све елементе са ознаком <ли> који су директни потомци (деца) од <ул> |
| $ ("ул а") | Бира све елементе означене <а> који су потомци било ког нивоа <ул> |
| $ ("х1 + п") | Бира елемент брата и сестре означен <п> одмах након <х1> |
| $ ("ли ~ а") | Одабире елемент са ознаком <а> која одмах следи <ли>, међутим овде можда нису брат или сестра, али морају имати заједничког претка |
| $ ("ли: прво дете") | Бира елемент са ознаком <ли> који је прво дете његовог родитеља, на пример <ул> |
| $ ("ли: последње дете") | Бира елемент означен <ли> који је последње дете његовог родитеља, на пример <ул> |
| $ ("ли: н-то дете (3)") | Бира елемент означен <ли> који је треће дете његовог родитеља. Уместо тројке, наравно, можете да користите било који други број. |
| $ ("ли: само-дете") | Бира оне елементе ознаком <ли> чији родитељ има само директне потомке (децу) |
Одвојено, вреди разговарати о селектору јкуери ли:нтх-цхилд (н), јер вам омогућава да наведете више од одређених бројева. Дакле, он може да изабере све парне елементе, ако уместо н наведе константу парно или непарно, наводећи непарно. Такође можете користити израз уместо н, на пример, $ ("ли: нтх-цхилд (2н + 3)") ће одабрати сваки други елемент почев од трећег директног детета.
Рад са пољима образаца
Улазна ознака има много различитих варијација, у зависности од атрибута типа који ће радити. ЈКуери нуди посебне бираче за одабир различитих врста поља за унос.
| Селектор | Пример селектора | Опис селектора |
| : дугме | $ ("унос: дугме") | Бира сва дугмад |
| : поље за потврду | $ ("инпут: цхецкбок") | Поља за потврду |
| : датотека | $ ("улаз: датотека") | Поља за отпремање датотека |
| : слика | $ ("инпут: имаге") | Поља за унос слике |
| : Лозинка | $ ("унос: лозинка") | Поља за лозинку |
| : радио | $ ("улаз: радио") | Радио дугмад |
| : ресетовати | $ ("инпут: ресет") | Тастери за ресетовање |
| : прихвати | $ ("инпут: субмит") | Дугмад за слање обрасца |
| : текст | $ ("унос: текст") | Поља за текст |
| : улазни | $ (": инпут") | Сва поља обрасца |
| : проверено | $ ("улаз: потврђен") | Означена поља у пољима за потврду или радио дугмад |
| : изабрано | $ ("опција: изабрана") | Ставке менија опција |
| : онемогућен | $ ("инпут: дисаблед") | Онемогућена поља обрасца |
| : омогућено | $ ("инпут: енаблед") | Укључена поља обрасца |
Избор положаја
Изборник положаја јКуери врло је сличан хијерархијском бирачу. Он бира елемент према његовом положају са листе елемената који се подударају са претходним условом.
| Селектор | Опис |
| : први | Ради на првој ставци са одговарајуће листе |
| : ласт | Са последњом ставком са списка |
| : ек (н) | Бира елемент са листе према његовом индексу (н). Пажња! Елементи који одговарају услову јКуери селецт нумерисани су од 0! |
| : лт () | Бира све елементе са списка до елемента са индексом н |
| : гт () | Бира све елементе са листе који су иза елемента са индексом н |
| : Чак | Бира елементе са парним бројем индекса |
| : непарно | Бира елементе са непарним индексним бројем |
Остали селектори
Ови селектори не могу да се прикачебило која група, али нису ништа мање важне. На пример, селектор: нот (), који се може назвати логичким приказом, омогућава вам да "преокренете" услов или његов део избором из неприкладних услова.
Такође је користан: скривени селектор који ће проширити елемент слике 0к0 пк да би испунио цео екран, на пример притиском на дугме.
| Селектор | Опис |
| : не () | Бира елементе који се не подударају са условом датим у заградама |
| : анимирани | Бира елементе који тренутно анимирају јКуери |
| : сакривен | Бира елементе са својством приказа:ниједна, упишите = "скривено" и са висином и ширином од 0 пиксела. Такође се односи на елементе који садрже скривене елементе на један од горе наведених начина. Пажња! Елемент са видљивошћу подешеном на „скривен“ неће бити укључен у јкуери селецт |
| : видљиво | Супротно: скривено |
| : заглавље | Бира елементе х1, х2, х3, х4, х5 и х6 |
Који је најбољи начин за коришћење селектора?
Оптимизација веб страница је важан задатак, јер одквалитет његовог извршења зависи од оптерећења на серверу, погодности корисника, као и времена одзива интерфејса. Постоји много књига написаних о оптимизацији скрипти у јКуери-ју и ЈаваСцрипт-у уопште, али оне су изван домета овог чланка. Даћемо само неколико једноставних савета који ће значајно повећати перформансе скрипти при одабиру ставки.
- Покушајте да се снађете са основним јКуери селекторима.
- Приликом одабира више предмета за обрадупокушајте да их комбинујете у неку групу, а не да изаберете сваку засебно. То се може урадити кроз наставу или помоћу одређенијих селектора.
- Користећи избор по положају, покушајте да умањите листу са које ће се извршити избор што је више могуће - то ће значајно смањити брзину проналажења жељеног елемента.
Пример скрипте са јКуери-ом и његовим селекторима:
Закључак
Сад кад знате апсолутно све селекторе из јКуери-ја, надамо се да су вам примери помогли да разумете како да направите жељено стање из неколико различитих селектора.
