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

Модерният уеб дизайнер не само трябва да притежаваосновите на HTML, CSS и JavaScript, но също така могат да работят в библиотеката на jQuery, която се фокусира върху взаимодействието на JavaScript с 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селектори, ако искате да се стесни полето за избор. Например, $ (р [цвят = синьо] [размер = 12]) - са избрани само тези елементи, р, които имат син цвят и размер 12.

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

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

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

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

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

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

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

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

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