Как да използвате JQuery селектори, за да изберете елементи на страницата

Обикновено JQuery селектори се използват, за да изберете елементи на страницата, за да след това се обадете методи JQuery, за да ги манипулират.

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

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

Урокът включва следните раздели:

JQuery поддържа само тези, селектори CSS, DOM елементи, които са избрани. Например. Посетих. мишката и: първа линия, не се поддържат.

Ключови селектори

Ключови селектори ви познати, ако някога са създали най-малко един CSS шаблон. най-вероятно, че ще използвате набора от данни за 90% от времето работи с JQuery:

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

Избирането на елементи от атрибут

Ключови селектори са идеални в случаите, когато трябва да изберете всички точки на страницата или елемента, който искате да изберете CSS клас или ID.

Въпреки това, понякога е необходимо да изберете определен елемент, който няма клас или лична и не може просто да добавите клас или ID на елемента в маркирането. Такава ситуация може да възникне, когато с помощта на CMS с фиксиран HTML шаблон или използването на съдържание, създадено от потребителя.

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

• Изображение на SRC атрибут
• Линк HREF атрибут
• Всички полета входни форми, които имат тип атрибут = "отметката"

JQuery има много селекции, които могат да бъдат използвани, за да изберете елементи от атрибут:

Избира елемент (и), които съдържат специфичен атрибут независимо от стойността на атрибута.

Избира елемент (и), които съдържат предварително определен атрибут с предварително определена стойност.

Умение не е равно на

Избира елемент (и), които не съдържат даден атрибут или sozherzhat даден атрибут, но стойността не съвпада.

Умение започва с

Избира елемент (и), които съдържат предварително определен атрибут, чиято стойност започва с дадена линия.

Избира елемент (и), които съдържат характеристиката, чиято стойност е дадена краища низ.

Избира елемент (и), която съдържа атрибут, чиято стойност съдържа зададения низ.

Умение съдържа думата

Избира елемент (и), който съдържа атрибут, чиято стойност включва предварително определена дума. "Словото" - поредица от символи, без интервали.

Умение съдържа префикса

Избира елемент (и), който съдържа атрибут, чиято стойност е или равна на предварително определена линия или започва с даден ред, последвано от тире.

Можете да комбинирате на атрибутите селектори, за да стесните областта на избор. Например:

Селекторът "атрибут съдържа префикс" изглежда неефективно, но това се прави за обработка на език, атрибути, като например Ланг = "ен" и Lang = "EN-US".

Избирането елементи по съдържание

Ако не можете да ограничите избора на основните селектори и атрибутите, че е възможно да "копае" в елемента съдържание, за да се определи, че е подходящ за избор или не. JQuery селектор 4 има за тази цел:

Избира елемент (и), които съдържат посочения текст. Текст, може да бъде самият елемент и в който и да е елемент в рамките на избрания елемент. Забележка. съдържа () на буквите има значение - "Здравей" не отговаря на "здравей".

// Избери всички Разделение, които съдържат "myText":
$ ( "Div: съдържа (" myText ') ")

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

// Избери всички Разделение, което съдържа параграфи:
$ ( "Div: има (р)")

Избира елемент (и), които съдържат други елементи или текстови възли.

// Избери всички Разделение, което съдържа нещо:
$ ( "Div: родител")

Избира елемент (и), които не съдържат други елементи или текстови възли.

// Избери всички Разделение, които не съдържат нищо:
$ ( "Div: празно")

Следващият пример показва как да използвате: съдържа (). заедно с избора на клас за избор на секции, които имат определен клас, допълнителното условие е при условие, че съдържанието на даден ред (или редове):

Избирането на елементи чрез йерархия

Друг начин да изберете елементи в JQuery - е да се помисли как те се отнасят един към друг на страницата. Вероятно знаете много от тези селекции, за да работят с CSS:

Избира елемент (и), които са дете (пряк потомък) на даден родител (и).

// Избиране на всички елементи от списъка с клас "връхна точка", която е дете на списъка с ID "навигация":
$ ( "# Ул навигация> li.highlight")

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

// Избор на всички връзки в списъка с ID "навигация":
$ ( "# Ул навигация а")

Следваща брат

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

// Избор на всички точки, които веднага следват заглавието на H1:
$ ( "H1 + р")

Следваща брат елемент

Избира елемент (и), която следва друг елемент, при което двата елемента са потомци на родител. Това е по-обобщен вариант на следващия селектора брат.

// Изберете всички клетки на таблицата след клетка, която съдържа думата "Здравейте":
$ ( "Td: съдържа (здравей)

Избира елемент (и), което е първото дете на неговата майка.

// Изберете първите позиции във всички списъци на страницата:
$ ( "Ли: първо дете")

Избира елемент (и), която е последната дете на неговата майка.

// Изберете последни редове във всички списъци на страницата:
$ ( "Ли: последната дете")

Избира елемент (и), който е N-ти детето си майка (виж забележката по-долу).

// Изберете третия параграф във всички списъци на страницата:
$ ( "Ли: тото-дете (3)")

Избира елемент (и), които са на детето от родителите, които имат само деца.

// изберете само елементите в един елемент от списъка:
$ ( "Ли: само дете")

В допълнение към създаването на определен брой на детето с помощта на: тото-дете (). може да посочи дори (за да изберете всички деца четно число), странно (за да изберете всички деца с нечетни числа) или израз (например, "Ли: тото-дете (3n + 2)", изберете всеки трети елемент в списъка и броенето Тя започва с втория елемент).

Следващият пример избира първата клетка на нечетните редове в таблицата, която има ИД "myTable".

Изборът на полета на формуляра

Форма елементи имат някои специфични свойства, които са принудени да използват някои трикове за своя избор. Проверете например кутии, заедно с много други видове полета, са елементите на вход. По този начин. да поставите отметка в под формата трябва да използвате $ ( "вход [тип =" отметка "]").

По същия начин, идентифицирането на избраните елементи в списъка за избор или маркират квадратчетата на формата може да бъде скучен. /

За щастие, JQuery осигурява редица специфични форми на селектори, които правят живота по-лесен:

Избира всички налични полета.

Следващият пример търси формата, която има свойството действие със стойност "mailform.php". след това се избира всички маркирани под формата на радио бутони:

Избор на елементи от тяхната позиция

Понякога трябва да изберете елемент, за който знаем, че тя се намира в серия от предварително избраните елементи. Така например, необходимостта да се подчертае, първа алинея, която има "MyClass" клас. За да се усложнят примера приемаме, че трябва да изберете всички елементи в списъка, който има "MyClass" клас. и след това изберете пети елемент от получената комплекта.

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

Избира първия елемент в набор от избрани елементи.

// Изберете първия параграф, който е клас "MyClass":
$ ( "P.myClass: първо")

Избира последния елемент в набора от избрани елементи.

// Изберете последния параграф, който е клас "MyClass":
$ ( "P.myClass: последен")

Избира един елемент от множеството от подбрани елементи. Избор на елемент носи на индексен номер серийния (0 = първия елемент = 1 секунда, и така нататък).

// Изберете първата от точка, която има клас "MyClass":
$ ( "P.myClass: екв (2)")

Избира елементите в множеството от подбрани елементи, които са разположени пред елемент на посочения индекс. Например, ако първият елемент 2 ще бъдат избрани определен индекс на 2 (т.е., третият елемент) (индекси 0 и 1).

// / 2 Избира първия параграф, които имат клас "MyClass":
$ ( "P.myClass: LT (2)")

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

// Избор на всички точки, които имат клас "MyClass", с изключение на първите три:
$ ( "P.myClass: GT (2)")

Избира всички елементи, с още по-индекси, включени в комплекта на избраните елементи. Имайте предвид, че индексите започват с 0, и по този начин всъщност избира първи, 3-ти, и така нататък елементи.

// Изберете 1-ви, 3-ти, 5-ти, и така нататък точки, които имат клас "MyClass":
$ ( "P.myClass: дори")

Избира всички елементи с нечетни индекси в набора от вече избраните елементи. Имайте предвид, че индексите започват с 0, и по този начин всъщност избира 2-ри, 4-ти и така нататък елементи

// Изберете 2-ри, 4-ти, 6-ти, и така нататък точки, които имат клас "MyClass":
$ ( "P.myClass: странно")

Имайте предвид, че тези селектори не работят, както и: първо дете. последно дете. и така нататък. Например, li.myClass: първо дете избира само елемента списък с "MyClass" клас. който е първият елемент в съответния списък. А li.myClass: първо да намерите всички предмети от списъка на страницата, която има клас "MyClass". и след това се избира първия елемент в списъка в набор от резултатите от търсенето.

В следващия пример, всички клетки са избрани в първите два реда от таблицата, която има ID "myTable".

Други полезни JQuery селектори

Ако нито един от инструментите за избор не ви помогне да определите елементите, които искате, опитайте да използвате следните опции:

До получаване на информация от два канала (зрение и слух) на ефективността на обучението далеч по-добър живот от книги. А домашните задачи и онлайн тестове ще ви позволи да мисля постоянно в целевия език и веднага провери знанията си!

Ако искате по-дълго време, за да проучи как да се HTML, че ме има, за което трябва добра новина!

Ако вече сте се научили HTML и искат да се движи напред, следващата стъпка ще бъде да се проучи CSS технологията.

Ако искате да се разбере концепцията на домейн и хостинг, да научат как да се създаде база данни, да качвате файлове към уеб сайт чрез FTP сървър, създаване на поддомейни, да конфигурирате пощенските кутии за сайта и мониторинг на посещаемостта, този курс е разработен специално за вас!