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

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

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

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

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

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

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

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

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

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

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

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

jquery множество селектори

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

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

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

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

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

Прочетете повече: