jQuery
Селекторы

Вступление

Синтаксис

• Тег: нет маркера, используйте тег напрямую
• Id: #id
• Класс: .className
• Атрибут: [attributeName]
• Атрибут со значением: [attributeName ='value']
• Атрибут начинается со значения ^= : [attributeName ^= 'value']
• Атрибут заканчивается значением $= : [attributeName $='value']
• Атрибут содержит значение *= : [attributeName *= 'value']
• Псевдоселектор:: :pseudo-selector
• Любой потомок: Пробел между селекторами
• Прямые дети: > между селекторами
• Близлежащий брат, следующий за первым: +
• Несмещенный родной брат после первого: ~
• Или: , (запятая) между селектором

замечания

<span id="temp.foobar"><span>

$('#temp\\.foobar')

Типы переключателей

В jQuery вы можете выбирать элементы на странице, используя множество различных свойств элемента, включая:

• Тип
• Учебный класс
• Я БЫ
• Владение атрибутом
• Значение атрибута
• Индексированный селектор
• Псевдо-состояние

Если вы знаете CSS-селектора, вы заметите, что селектора в jQuery одинаковы (с незначительными исключениями).

Возьмем следующий HTML-код:

<a href="index.html"></a>                  <!-- 1 -->
<a id="second-link"></a>                   <!-- 2 -->
<a class="example"></a>                    <!-- 3 -->
<a class="example" href="about.html"></a>  <!-- 4 -->
<span class="example"></span>              <!-- 5 -->

Выбор по типу:

Следующий селектор jQuery выберет все элементы <a> , включая 1, 2, 3 и 4.

$("a")

Выбор по классам

Следующий селектор jQuery выберет все элементы example класса (включая не-элементы), которые представляют собой 3, 4 и 5.

$(".example")

Выбор по идентификатору

Следующий селектор jQuery выберет элемент с данным идентификатором, который равен 2.

$("#second-link")

Выбор по владению атрибутом

Следующий селектор jQuery выберет все элементы с определенным атрибутом href , включая 1 и 4.

$("[href]")

Выбор по значению атрибута

Следующий селектор jQuery выберет все элементы, где существует атрибут href со значением index.html , который равен только 1.

$("[href='index.html']")

Выбор по индексированной позиции ( индексированный селектор )

Следующий селектор jQuery будет выбирать только 1, второй <a> ie. second-link поскольку указанный индекс равен 1 например, eq(1) (обратите внимание, что индекс начинается с 0 следовательно, второй выбран здесь!).

$("a:eq(1)")

Выбор с индексированным исключением

Чтобы исключить элемент, используя его индекс :not(:eq())

Следующий выбирает <a> элементы, за исключением того, что с example класса, который равен 1

$("a").not(":eq(0)")

Выбор с исключением

Чтобы исключить элемент из выделения, используйте :not()

Следующие элементы <a> , кроме тех, что указаны в example класса, равны 1 и 2.

$("a:not(.example)")

Выбор по псевдо-состоянию

Вы также можете выбрать в jQuery, используя псевдо-состояния, включая :first-child :last-child :first-of-type :last-of-type и т. Д.

Следующий селектор jQuery выберет только первый элемент <a> : номер 1.

$("a:first-of-type")

Объединение селекторов jQuery

Вы также можете увеличить свою специфичность, объединив несколько селекторов jQuery; вы можете комбинировать любое их количество или объединить их все. Вы также можете одновременно выбрать несколько классов, атрибутов и состояний.

$("a.class1.class2.class3#someID[attr1][attr2='something'][attr3='something']:first-of-type:first-child")

Это позволит выбрать элемент <a> :

• Имеет следующие классы: class1, class2, and class3
• Имеет следующий идентификатор: someID
• Имеет следующий атрибут: attr1
• Имеет следующие атрибуты и значения: attr2 со значением something , attr3 со значением something
• Имеет следующие состояния: first-child и first-of-type

Вы также можете отделить разные селекторы запятой:

$("a, .class1, #someID")  

Это позволит выбрать:

• Все элементы <a>
• Все элементы, имеющие класс class1
• Элемент с идентификатором id #someID

Выбор ребенка и родного брата

Селекторы jQuery обычно соответствуют тем же соглашениям, что и CSS, что позволяет вам выбирать детей и братьев и сестер таким же образом.

• Чтобы выбрать непрямого ребенка, используйте пробел
• Чтобы выбрать прямой дочерний элемент, используйте команду >
• Чтобы выбрать соседнего брата, следующего за первым, используйте +
• Чтобы выбрать несмежный брат, следующий за первым, используйте ~

Выбор подстановочных знаков

Могут быть случаи, когда мы хотим выбрать все элементы, но не существует общего свойства для выбора (класс, атрибут и т. Д.). В этом случае мы можем использовать селектор * , который просто выбирает все элементы:

$('#wrapper *')    // Select all elements inside #wrapper element

Объединение селекторов

Рассмотрим следующую структуру DOM

<ul class="parentUl">
    <li> Level 1
        <ul class="childUl">
            <li>Level 1-1 <span> Item - 1 </span></li>
            <li>Level 1-1 <span> Item - 2 </span></li>
        </ul>
    </li>
    <li> Level 2
        <ul class="childUl">
            <li>Level 2-1 <span> Item - 1 </span></li>
            <li>Level 2-1 <span> Item - 1 </span></li>
        </ul>
    </li>
</ul>

Селекторы потомков и детей

Если родительский <ul> - parentUl находит своих потомков ( <li> ),

1. Простой $('parent child')

   >> $('ul.parentUl li')

   Это приведет к тому, что все соответствующие потомки указанного предка будут опущены на все уровни .

2. > - $('parent > child')

   >> $('ul.parentUl > li')

   Это находит всех соответствующих детей ( только 1 уровень вниз ).

3. Контекстный селектор - $('child','parent')

   >> $('li','ul.parentUl')

   Это работает так же, как и выше.

4. find() - $('parent').find('child')

   >> $('ul.parentUl').find('li')

   Это работает так же, как и выше.

5. children() - $('parent').find('child')

   >> $('ul.parentUl').children('li')

   Это работает так же, как и выше.

Другие комбинаторы

Селектор групп: ","

Выберите все элементы <ul> И все элементы <li> И все элементы <span> :

$('ul, li, span')

Селектор мультипликации: "" (без символа)

Выделите все элементы <ul> с классом parentUl :

$('ul.parentUl')

Смежный селектор: «+»

Выделите все элементы <li> , которые помещаются сразу после другого элемента <li> :

$('li + li')

Общий селектор сиблинга: "~"

Выберите все элементы <li> которые являются братьями и сестрами других элементов <li> :

$('li ~ li')

обзор

Элементы могут быть выбраны jQuery с помощью селекторов jQuery . Функция возвращает либо элемент, либо список элементов.

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

$("*")                       // All elements
$("div")                     // All <div> elements
$(".blue")                   // All elements with class=blue
$(".blue.red")               // All elements with class=blue AND class=red
$(".blue,.red")              // All elements with class=blue OR class=red
$("#headline")               // The (first) element with id=headline
$("[href]")                  // All elements with an href attribute
$("[href='example.com']")    // All elements with href=example.com

Операторы отношения

$("div span")          // All <span>s that are descendants of a <div>
$("div > span")        // All <span>s that are a direct child of a <div>
$("a ~ span")          // All <span>s that are siblings following an <a>
$("a + span")          // All <span>s that are immediately after an <a>

Кэширование Селекторы

Каждый раз, когда вы используете селектор в jQuery, DOM ищет элементы, соответствующие вашему запросу. Выполнение этого слишком часто или неоднократно снижает производительность. Если вы ссылаетесь на определенный селектор более одного раза, вы должны добавить его в кэш, назначив его переменной:

var nav = $('#navigation');
nav.show();

Это заменит:

$('#navigation').show();

Кэширование этого селектора может оказаться полезным, если вашему веб-сайту часто приходится показывать / скрывать этот элемент. Если имеется несколько элементов с одним и тем же селектором, переменная станет массивом этих элементов:

<div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
</div>

<script>
    var children = $('.child');
    var firstChildText = children[0].text();
    console.log(firstChildText); 
    
    // output: "Child 1"
</script>

ПРИМЕЧАНИЕ . Элемент должен существовать в DOM во время его назначения переменной. Если в DOM нет элемента с классом child вы будете хранить пустой массив в этой переменной.

<div class="parent"></div>

<script>
    var parent   = $('.parent');
    var children = $('.child');
    console.log(children);

    // output: []

    parent.append('<div class="child">Child 1</div>');
    children = $('.child');
    console.log(children[0].text());

    // output: "Child 1"
</script>

Не забудьте переназначить селектор переменной после добавления / удаления элементов в DOM с помощью этого селектора.

Примечание . При кешировании селекторов многие разработчики запустит имя переменной с помощью $ чтобы обозначить, что переменная является объектом jQuery следующим образом:

var $nav = $('#navigation');
$nav.show();

Элементы DOM в качестве селекторов

jQuery принимает множество параметров, и один из них является фактическим элементом DOM. Передача элемента DOM в jQuery приведет к тому, что базовая структура массива объекта jQuery удерживает этот элемент.

jQuery обнаружит, что аргумент является элементом DOM, проверяя его nodeType.

Наиболее частое использование элемента DOM происходит в обратных вызовах, где текущий элемент передается конструктору jQuery, чтобы получить доступ к API jQuery.

Например, в each обратном вызове (примечание: каждая функция итератора).

$(".elements").each(function(){
    //the current element is bound to `this` internally by jQuery when using each
    var currentElement = this;

    //at this point, currentElement (or this) has access to the Native API
    
    //construct a jQuery object with the currentElement(this)
    var $currentElement = $(this);

    //now $currentElement has access to the jQuery API
});

Строки HTML как селекторы

jQuery принимает множество параметров как «селекторов», а одна из них - строка HTML. Передача строки в jQuery приведет к тому, что базовая структура объекта jQuery, подобная массиву, сохранит полученный построенный HTML.

jQuery использует regex, чтобы определить, является ли строка, передаваемая конструктору, строкой HTML, а также что она должна начинаться с < . Это регулярное выражение определяется как rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/ ( пояснение в regex101.com ).

Наиболее частое использование строки HTML в качестве селектора - это когда набор элементов DOM необходимо создавать только в коде, часто это используется библиотеками для таких вещей, как всплывающие окна Modal.

Например, функция, которая вернула привязку, завернутую в div как шаблон

function template(href,text){
    return $("<div><a href='" + href + "'>" + text + "</a></div>");
}

Вернул бы объект jQuery

<div>
    <a href="google.com">Google</a>
</div>

если он называется template("google.com","Google") .