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