Какво е необходимо и как е написан jQuery селектора?

Модерният уеб дизайнер не само трябва да притежава основите на HTML, CSS и jаvascript, но също така може да работи в библиотеката на jQuery, която се фокусира върху взаимодействието на jаvascript с HTML документи. Той ви позволява бързо да осъществявате достъп до и да манипулирате всички DOM елементи (интерфейсът на програмата, който отваря достъп до съдържанието на html-файлове). Основните структурни звена на тази библиотека са екипите. За да приложите тази или тази команда, ви е необходим jQuery селектор.

Формулата на селекторите в библиотеката jQuery

Селекторите на JQuery се основават на селекторите, използвани в CSS. Те са необходими, за да изберете елементите на HTML файла, за да ги използвате, за да се обадите на един или друг метод за тяхното манипулиране (екипа). Търсенето по селектора се извършва чрез функция $ (). Например, $ (`div`).

Селекторите могат да бъдат класифицирани според начина на избор на елементите:

• основният;
• по атрибут;
• по йерархия;
• по съдържание;
• по позиция;
• избор на формулярни полета;
• др.

Основни селектори

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

• * - избира всички елементи на страницата, включително главата, тялото и т.н .;
• p / div / sidebar / ... - избира всички елементи, свързани с дадения маркер (т.е. p.div, странична лента и т.н.);
• .myClass / p.myClass - избира елементи с посоченото име на класа;
• # myID / p. # myID - избира един елемент с дадения идентификационен номер.

Нека да дадем пример. Да приемем, че трябва да избираме всички елементи на страница с клас пара, входът ще изглежда така: $ (.par). Ако са необходими само елементите на p от този клас, тогава ще напишем: $ (p.par).

Селектори на атрибути

Основният селектор на JQuery може да се използва, ако трябва да изберете елемент, принадлежащ на клас, който има идентификатор или изберете всички елементи на страницата. Все пак има моменти, когато желаният елемент няма клас или идентификатор. Ето защо има селектори по атрибут. Те ви позволяват да опитате от някои атрибут на HTML елемента, например от href или src. Този атрибут е написан на квадратни скоби [].

Най-простият пример: $ ([src]) - избира всички елементи, които имат атрибута src. Можете да стесните зоната на пробата, като зададете атрибута на конкретна стойност: $ ([src = `value`]).

Можете да използвате няколко селектора в JQuery, ако искате да стесните селекцията. Например, $ (p [color = blue] [size = 12]) - само елементите на p, които са сини и размер 12, ще бъдат избрани.

Селектори на съдържанието

В случай, че не е възможно да изберете елементи по атрибути или чрез главни селектори, то е полезно да се позове на тяхното съдържание. Има 4 селектора от този тип:

• : съдържа - избира елементи, съдържащи посочения текст;
• : has - избира елементи, които съдържат други елементи, специфични за този ред;
• : родител - избира елементи, които съдържат други;
• : празен - избира елементи, които не съдържат други.

Нека да дадем пример. За да изберете всички елементи div, съдържащи текст Hello, трябва да напишете $ (div: contains (`Hello`)).

Йерархични селектори

Има още един начин за избор на елементи в JQuery, а именно според тяхната йерархия (т.е. взаимоотношенията помежду си в HTML страницата). Има много от тях, така че тук са две от най-популярните: "дете" и "дете".

В първия случай се избират елементите, които са директни потомци (детето) на даден елемент (предшественикът). Например, за да изберете елементите от списъка в класа на светлината, които са в списъка на NAV, трябва да напишете: $ (ul # nav> li.light).

Вторият случай е по-общ. Тук могат да бъдат избрани и индиректните потомци на даден елемент. Например, за да изберете връзки в списъка на NAV, ще напишем: $ (ul # nav a).

По този начин в JQuery елементите могат да бъдат избрани по различни начини, като се използват параметри като клас, ID, атрибути, съдържание или йерархия на елементите на HTML документа.