Для чаго неабходны і як запісваецца JQuery-селектар?

Сучасны вэб-дызайнер павінен не толькі валодаць асновамі HTML, CSS і JavaScript, але і ўмець працаваць у бібліятэцы JQuery, якая факусуюць на ўзаемадзеянні JavaScript з HTML-дакументамі. Менавіта яна дазваляе хутка атрымаць доступ да любых элементаў DOM (праграмны інтэрфейс, які адкрывае доступ да змесціва html-файлаў) і маніпуляваць імі. Асноўнымі структурнымі адзінкамі гэтай бібліятэкі з'яўляюцца каманды. Для таго каб прымяніць тую ці іншую каманду, патрэбен JQuery-селектар.

Формула селектараў ў бібліятэцы JQuery

Селектары ў JQuery заснаваныя на якія выкарыстоўваюцца ў CSS. Яны неабходны для выбару элементаў HTML-файла, каб з іх дапамогай выклікаць тыя ці іншыя метады маніпуляцыі імі (каманды). Пошук па селектары ажыццяўляецца з дапамогай функцыі $ (). Напрыклад, $ ( 'div').

Селектары можна класіфікаваць у залежнасці ад спосабу выбару элементаў:

• асноўныя;
• па атрыбуту;
• па іерархіі;
• па змесце;
• па становішчы;
• выбар палёў формы;
• іншыя.

асноўныя селектары

У 90% выпадкаў пры працы з дадзенай бібліятэкай выкарыстоўваецца JQuery-селектар, які адносіцца да асноўнай групы. Усе яны досыць простыя і зразумелыя. Разгледзім кожны з іх:

• * - выбірае ўсе элементы старонкі, уключаючы head, body і інш .;
• p / div / sidebar / ... - выбірае ўсе элементы, якія адносяцца да зададзенага тэгу (т. е. да p.div, sidebar і інш.);
• .myClass / p.myClass - выбірае элементы з паказаным імем класа;
• # MyID / p. # MyID - выбірае нейкі адзін элемент з зададзеным ID.

Прывядзём прыклад. Дапусцім, нам неабходна выбраць усе элементы старонкі з класам par, запіс будзе выглядаць наступным чынам: $ (. Par). Калі ж патрэбныя толькі элементы p гэтага класа, то прапішам: $ (p.par).

селектары атрыбутаў

Асноўны JQuery-селектар можна выкарыстоўваць, калі нам неабходна выбраць элемент, які адносіцца да нейкага класу, які мае ID ці ж выбраць усе элементы старонкі. Аднак бываюць выпадкі, калі патрэбны элемент не мае класа або ID. Менавіта для гэтага і існуюць селектары па атрыбуту. Яны дазваляюць рабіць выбарку па нейкім атрыбуту HTML-элемента, напрыклад, па href або src. Запісваецца гэты атрыбут ў квадратных дужках [].

Самы просты прыклад: $ ([src]) - выбар ўсіх элементаў, якія маюць атрыбут src. Можна звузіць вобласць выбаркі, задаўшы атрыбуту пэўнае значэнне: $ ([src = 'http: // site / article / 132222 / value']).

Вы можаце выкарыстоўваць у JQuery некалькі селектараў, калі неабходна звузіць вобласць выбару. Напрыклад, $ (p [color = blue] [size = 12]) - будуць абраныя толькі тыя элементы p, якія маюць блакітны колер і памер 12.

Селектары па змесце

У тым выпадку, калі няма магчымасці выбраць элементы па атрыбутам або па асноўных селектар, то варта звярнуцца да іх змесце. Усяго маецца 4 селектара дадзенага выгляду:

• : Contains - выбірае элементы, якія змяшчаюць зададзены тэкст;
• : Has - выбірае элементы, якія ўтрымліваюць іншыя элементы, характэрныя для дадзенай радкі;
• : Parent - выбірае элементы, якія ўтрымліваюць любыя іншыя;
• : Empty - выбірае элементы, якія не змяшчаюць ніякіх іншых.

Прывядзём прыклад. Для таго, каб выбраць усе элементы div, якія змяшчаюць тэкст Hello, трэба запісаць $ (div: contains ( 'Hello')).

Селектары па іерархіі

Ёсць і яшчэ адзін спосаб выбару элементаў у JQuery, а менавіта - паводле іх іерархіі (гэта значыць суадносін адзін да аднаго на HTML-старонцы). Іх вельмі шмат, таму прывядзем два найбольш папулярных: "дзіця" і "нашчадак".

У першым выпадку выбіраюцца элементы, якія з'яўляюцца прамымі нашчадкамі (дзіця) зададзенага элемента (продак). Напрыклад, каб выбраць элементы спісу ў класе light, якія з'яўляюцца дзіцем спісу nav, то трэба запісаць: $ (ul # nav> li.light).

Другі выпадак - больш агульны. Тут могуць быць выбраны і непрамыя нашчадкі нейкага элемента. Напрыклад, для выбару спасылак ўнутры спісу nav прапішам: $ (ul # nav a).

Такім чынам, у JQuery элементы могуць выбірацца рознымі спосабамі з выкарыстаннем такіх параметраў, як клас, ID, атрыбуты, змест або іерархія элементаў HTML-дакумента.