селектор jQuery

один, базовый селектор 1. Селектор идентификатора Селектор идентификатора#id использует значение атрибута id элемента DOM для фильтрации совпадающих элементов и возвращает его объекту в виде набора пакетов iQuery. 使用公式:(“#id”) Пример:(“#box”) //Получаем элемент, значение атрибута id которого равно box 2. селектор элементов селектор Элементы соответствуют соответствующему элементу на основе имени элемента. селектор Элементы указывают на имя тега элемента DOM, то есть селектор. Элементы выбираются на основе тэга элемента. Используйте формулу:(“element”) Пример:(“div”) //Получаем все элементы div 3. Селектор имени класса Селектор классов находит соответствующие элементы DOM по имени класса CSS, принадлежащего элементу. На странице элемент может иметь несколько классов CSS, а класс CSS может соответствовать нескольким элементам. Если в элементе есть соответствующее имя класса, его можно выбрать с помощью селектора классов. Проще говоря, селектор имени класса предназначен для поиска совпадающих элементов на основе имени класса CSS элемента. Используйте формулу:(“.class”) Пример:(“.box”) //Получаем все элементы, значение атрибута класса которых равно box 4. Селектор соединений Составной селектор объединяет несколько селекторов (может быть Селектор идентификатора、селектор элементы или селектор имени класса) объединяются вместе, а два селектора разделяются запятой «,». Если какое-либо из условий фильтра выполнено, оно будет сопоставлено. Возвращается набор пакетов jQuery. Форма коллекции. Использование Индексатор jQuery может извлекать объекты jQuery из коллекции. Примечание. Селекторы с несколькими условиями соответствия не соответствуют элементам, которые одновременно соответствуют условиям соответствия этих селекторов. Вместо этого каждый совпадающий элемент объединяется и возвращается вместе. Используйте формулу:(“selector1,selector2,……,selectorN”) selector1: действительный селектор, который может быть Селектором. идентификатора、селектор селектор элементов или имени класса и т. д. selector2: еще один допустимый селектор, который может быть Селектором. идентификатора、селектор селектор элементов или имени класса и т. д. selectorN: (необязательно) любое количество селекторов, которые могут быть Селектором. идентификатора、селектор селектор элементов или имени класса и т. д. Пример:(“div,#btn”) //Чтобы запросить все документы<div>элементы иidСвойстваbtnэлементы 5. Выбор подстановочного знака

2. Селектор уровня 1. ancestor селектор потомков ancesdor селектор В потомках ancestor представляет предка, а потомок представляет потомка, что используется для сопоставления всех элементов-потомков под данным элементом-предком. Используйте формулу:(“ancestor descendant”) предок относится к любому допустимому селектору. потомок — это селектор, используемый для сопоставления элементов, и он является потомком элемента, указанного предком. Пример:(“ul li”) //Сопоставление всех элементов li под элементом ul 2. parent>childселектор parent>childселектор中的parentПредставляет родительский элемент,дочерний элемент представляет дочерний элемент,Используется для сопоставления всех дочерних элементов данного родительского элемента.,使用该селектор只能选择父элемент的直接子элемент Используйте формулу:(” parent>child “) родительский элемент относится к любому допустимому селектору дочерний элемент — это селектор, используемый для сопоставления элементов, и это дочерний элемент родительского элемента. Пример:(“prev+next”) prev относится к любому допустимому селектору next — допустимый селектор, следующий сразу за предыдущим селектором. Пример:(“div+img”) //соответствовать<div>после этикетки<img>отметка 4. селектор предыдущих братьев и сестер селектор предыдущих братьев и сестер используется для сопоставления всех элементов siblings после элемента prev, где prev и siblings являются одними и теми же элементами поколения. Используйте формулу:

3. Выбор фильтра 1. Простой фильтр Простые фильтры — это фильтры, которые начинаются с двоеточия и обычно используются для достижения простых эффектов фильтрации. :first Описание: Соответствует первому найденному элементу, который используется вместе с селектором. Пример:(“tr:first”) //Сопоставляем первую строку таблицы :last Описание: Соответствует последнему найденному элементу, который используется вместе с селектором. Пример:(“tr:last”) //Сопоставляем последнюю строку таблицы :even Описание: Сопоставляет все элементы с четным значением индекса, при этом значение индекса начинает отсчет с 0. Пример:(“tr:even”) //Сопоставляем строки с четными значениями индекса :odd Описание: Сопоставляет все элементы с нечетным значением индекса, при этом значение индекса начинает отсчет с 0. Пример:(“tr:odd”) //Сопоставляем строки с нечетными значениями индекса :eq(index) Описание: Соответствует элементу с заданным значением индекса. Пример:(“div:eq(1)”) // Соответствуем второму элементу div :gt(index) Описание: Соответствует всем элементам, превышающим заданное значение индекса. Пример:(“span:gt(0)”) //Сопоставляем элементы диапазона с индексом больше 0 (Примечание: больше 0, не включая 0) :lt(index) Описание: Соответствует всем элементам, меньшим заданного значения индекса. Пример:(“div:lt(2)”) //Сопоставляем элементы div с индексом меньше 2 (примечание: меньше 2, не включая 2) :header Описание: Сопоставление элементов заголовка, таких как h1, h2, h3... Пример:(“.cls:header”) // Сопоставить все элементы заголовка с именем класса cls. Если перед ним не написано ":", будут сопоставлены все элементы заголовка. :not(selector) Описание: Удалить все элементы, соответствующие данному селектору. Пример:(“input:not(:checked)”) // Соответствуем элементам ввода, которые не выбраны animated Описание: Соответствует всем элементам, выполняющим анимационные эффекты. Пример:(“div:animated”) //Соответствуем элементу div выполняемой анимации 2. Фильтры контента Фильтры контента фильтруют текстовое содержимое, содержащееся в элементах DOM, и содержат ли они совпадающие элементы. :contains(text) Описание: Соответствует элементам, содержащим заданный текст. Пример:(“li:contains(‘word’)”) // Сопоставление элементов, содержащих текстовое содержимое «слово» :empty Описание: Соответствует всем пустым элементам, которые не содержат дочерних элементов или текста. Пример:(“td:empty”) // Сопоставление ячеек, которые не содержат дочерних элементов или текста :has(selector) Описание: Сопоставляет элементы, содержащие элементы, соответствующие селектору. Пример:(“td:has(p)”) //соответствовать表格的单元格中还有<p>отметка的单元格 :parent Описание: Сопоставляет элементы, содержащие дочерние элементы или текст. Пример:(“input:checked”) //Сопоставить все выбранные элементы ввода :disabled Описание: Сопоставить все недоступные элементы. Пример:(“input:disenabled”) //Сопоставить все недоступные элементы ввода :enabled Описание: Сопоставьте все доступные элементы. Пример:(“input:enabled”) //Сопоставление всем доступным элементам ввода :selected Описание: Сопоставить все выбранные элементы опции. Пример:(“select option:selected”) //Сопоставить все выбранные элементы опции 5. Фильтр дочерних элементов 子селектор Элементы предназначены для фильтрации дочерних элементов данного элемента. Конкретные условия фильтрации определяются типом селектора. :first-child Описание: Соответствует первому дочернему элементу всех заданных элементов. Пример:(“ul li:first-child”) //Сопоставление первого подэлемента li в элементе ul :last-child Описание: Соответствует последнему дочернему элементу всех заданных элементов. Пример:(“ul li:last-child”) //Сопоставляем последний подэлемент li в элементе ul :only-child Примечание. Если элемент является единственным дочерним элементом своего родительского элемента, он будет сопоставлен. Если родительский элемент содержит другие элементы, он не будет сопоставлен. Пример:(“ul li:only-child”) //Сопоставление li в элементе ul, который содержит только один элемент li :nth-child(index/even/odd/equation) Примечание. Соответствует индексному дочернему или нечетно-четному элементу каждого родительского элемента. Индекс начинается с 1, а не с 0. Пример:(“ul li :nth-child(even)”) //Сопоставляем элементы li с четными значениями индекса в ul

4. Селектор атрибутов Селектор атрибутов предназначен для фильтрации объектов, используя атрибуты элементов в качестве условий фильтрации. [attribute] Описание: Соответствует элементам, содержащим данный атрибут. Пример:(“div[name]”) //Сопоставление элементов div, содержащих атрибуты имени [attribute=value] Описание: Сопоставление элементов, значением атрибута которых является значение. Пример:(“div[name=’test’]”) //Сопоставление элемента div, атрибут имени которого имеет значение test [attribute!=value] Описание: Сопоставление элементов, значение атрибута которых не равно значению. Пример:(“div[name!=’test’]”) //Сопоставление элементов div, атрибут имени которых не является тестовым [attribute*=value] Описание: Сопоставление элементов, значение атрибута которых содержит значение. Пример:(“div[name*=”test”]”) //Сопоставление элементов div, содержащих проверочное значение в значении атрибута имени [attribute^=value] Описание: Сопоставляет элементы, значение атрибута которых начинается со значения. Пример:(“div[name^=’test’]”) //Сопоставляем элементы div, атрибут имени которых начинается с test [attribute=value] Описание: Сопоставление элементов, значение атрибута которых заканчивается значением. Пример:(“div[name=’test’]”) //Сопоставление элементов div, атрибут имени которых заканчивается на test [selector1][selector2][selectorN] Описание: Селектор составных атрибутов, используемый, когда необходимо одновременно выполнить несколько условий. Пример:

5. Выбор формы Селектор формы соответствует элементам, которые часто появляются в форме. Но соответствующий элемент не обязательно имеет вид :input Описание: Сопоставить все элементы ввода. Пример: (“:input”) //Сопоставить все входные элементы (“form :input”) //соответствовать<form>отметка中的所有inputэлемент,нужно внимание,Между формой и двоеточием есть пробел :button Описание: Соответствует всем обычным кнопкам, то есть элементам ввода с type="button" Пример:(“.button”) //Соответствуем всем обычным кнопкам :checkbox Описание: Сопоставить все флажки Пример:(“:checkbox”) // Соответствуем всем флажкам :file Описание: Сопоставить все поля файла. Пример:(“:file”) //Сопоставить все поля файла :hidden Описание: Сопоставление всех невидимых элементов или элементов со скрытым типом. Пример:(“:hidden”) //Сопоставляем все скрытые поля :image Описание: Сопоставить все поля изображения. Пример:(“:image”) //Сопоставить все поля изображения :password Описание: Сопоставить все поля пароля. Пример:(“:password”) //Сопоставить все поля пароля :radio Описание: Соответствие всем переключателям. Пример:(“:radio”) // Сопоставить все переключатели :reset Описание: Сопоставление всех кнопок сброса, то есть элементов ввода с type="reset" Пример:(“:reset”) // Соответствуем всем кнопкам сброса :submit Описание: Сопоставление всех кнопок отправки, то есть элементов ввода с type="submit" Пример:(“:submit”) // Соответствуем всем кнопкам отправки :text Описание: соответствие всем однострочным текстовым полям. Пример:(“.text”) //Сопоставить все однострочные текстовые поля

Что следует учитывать в селекторах

1. Меры предосторожности при использовании специальных символов в селекторах Содержащие специальные символы, такие как «.», «#», «{», «}»: согласно правилам W3C значения атрибутов не могут содержать эти специальные символы, но в реальных проектах такие выражения иногда встречаются. Содержит специальные символы. например «#» и «}». В это время, если вы обработаете ее обычным методом, возникнет ошибка. Способ устранения этой ошибки — использовать escape-символы для ее выхода.

<div id=”li#db”>liaidb</div> <div id=”lidb(1)”>lilovedb</div> Если вы получаете его обычным способом, например: (“#li\\#db”); (“#lilovedb\\(1\\)”);

2. Проблема с символом @ в селекторе атрибутов: В процессе обновления jQuery jQuery полностью отказался от символа @, оставшегося от версии 1.1.0, в версии 1.3.1. Если мы используем версии 1.3.1 или выше, нет необходимости добавлять символ @ перед атрибутом.

(“div[@name=”lidb”]”); Правильный способ его написания — убрать символ @, то есть изменить его на следующий вид: (“div[name=”lidb”]”); Что следует помнить о пробелах в селекторах В практических приложениях нельзя игнорировать включение пробелов в селектор. Еще один пробел или один пробел меньше приведет к совершенно другим результатам.

<div class=”name”> <div style=”display: none;”>Сяо Ли</div> <div style=”display: none;”>Сяо Ван</div> <div style=”display: none;”>Сяо Мин</div> <div style=”display: none;” class=name>Сяо Чжан</div> </div> <div style=”display: none;” class=name>Сяоюй</div> <div style=”display: none;” class=name>Сяо Лю</div> Получите их отдельно, используя селектор jQuery, как показано ниже. <script type=”text/javascript”> var b=(“.name:hidden”); console.log(a) console.log(b) </script> Приведенный выше код даст разные результаты из-за разницы между селектором потомка и селектором фильтра.

Заявление об авторских правах: Содержание этой статьи добровольно предоставлено пользователями Интернета, а мнения, выраженные в этой статье, представляют собой только точку зрения автора. Данный сайт лишь предоставляет услуги по хранению информации, не имеет никаких прав собственности и не несет соответствующей юридической ответственности. Если вы обнаружите на этом сайте какое-либо подозрительное нарушение авторских прав/незаконный контент, отправьте электронное письмо, чтобы сообщить. После проверки этот сайт будет немедленно удален.

Издатель: Full stack программист и руководитель стека, укажите источник для перепечатки: https://javaforall.cn/230951.html Исходная ссылка: https://javaforall.cn