jQuery
Selektory

Wprowadzenie

Składnia

• Tag: Brak znacznika, użyj tagu bezpośrednio
• Id: #id
• Klasa: .className
• Atrybut: [attributeName]
• Atrybut o wartości: [attributeName ='value']
• Atrybut zaczyna się od wartości ^= : [attributeName ^= 'value']
• Atrybut kończy się na wartość $= : [attributeName $='value']
• Atrybut zawiera wartość *= : [attributeName *= 'value']
• Pseudo-selektor :pseudo-selector
• Każdy potomek: odstęp między selektorami
• Bezpośrednie dzieci: > między selektorami
• Przylegające rodzeństwo po pierwszym: +
• Nie sąsiadujące rodzeństwo po pierwszym: ~
• Lub: , (przecinek) pomiędzy selektorem

Uwagi

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

$('#temp\\.foobar')

Rodzaje selektorów

W jQuery możesz wybierać elementy na stronie, używając wielu różnych właściwości elementu, w tym:

• Rodzaj
• Klasa
• ID
• Posiadanie atrybutu
• Wartość atrybutu
• Indeksowany Selektor
• Pseudo-stan

Jeśli znasz selektory CSS , zauważysz, że selektory w jQuery są takie same (z niewielkimi wyjątkami).

Weźmy na przykład następujący kod 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 -->

Wybieranie według typu:

Poniższy selektor jQuery wybierze wszystkie elementy <a> , w tym 1, 2, 3 i 4.

$("a")

Wybieranie według klasy

Poniższy selektor jQuery wybierze wszystkie elementy example klasy (w tym elementy inne niż a), które są 3, 4 i 5.

$(".example")

Wybór według ID

Poniższy selektor jQuery wybierze element o podanym ID, czyli 2.

$("#second-link")

Wybieranie według posiadania atrybutu

Poniższy selektor jQuery wybierze wszystkie elementy ze zdefiniowanym atrybutem href , w tym 1 i 4.

$("[href]")

Wybieranie według wartości atrybutu

Poniższy selektor jQuery wybierze wszystkie elementy, w których istnieje atrybut href , o wartości index.html , która wynosi tylko 1.

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

Wybieranie według pozycji indeksowanej ( Selektor indeksowany )

Poniższy selektor jQuery wybierze tylko 1, drugi <a> tj. second-link ponieważ podany indeks ma wartość 1 podobnie jak eq(1) (Zauważ, że indeks zaczyna się od 0 stąd drugi tutaj został wybrany!).

$("a:eq(1)")

Wybieranie z wykluczeniem indeksowanym

Aby wykluczyć element za pomocą jego indeksu :not(:eq())

Poniżej <a> elementy <a> , z wyjątkiem tego z example klasy, którym jest 1

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

Wybieranie z wykluczeniem

Aby wykluczyć element z zaznaczenia, użyj :not()

Poniżej <a> elementy <a> , z wyjątkiem tych z example klasy, które są 1 i 2.

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

Wybieranie według pseudo-stanu

Możesz także wybrać w jQuery przy użyciu pseudo-stanów, w tym :first-child :last-child :first-of-type :last-of-type itp.

Następujący selektor jQuery wybierze tylko pierwszy element <a> : liczba 1.

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

Łączenie selektorów jQuery

Możesz także zwiększyć swoją specyficzność, łącząc wiele selektorów jQuery; możesz połączyć dowolną ich liczbę lub połączyć je wszystkie. Możesz także wybrać wiele klas, atrybutów i stanów jednocześnie.

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

To <a> element <a> , który:

• Ma następujące klasy: class1, class2, and class3
• Ma następujący identyfikator: someID
• Ma następujący atrybut: attr1
• Ma następujące atrybuty i wartości: attr2 z wartością something , attr3 z wartością something
• Ma następujące stany: first-child i first-of-type

Możesz także oddzielić różne selektory przecinkiem:

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

To wybrałoby:

• Wszystkie elementy <a>
• Wszystkie elementy, które mają klasę class1
• Element o id #someID

Wybór dla dzieci i rodzeństwa

Selektory jQuery są na ogół zgodne z tymi samymi konwencjami co CSS, co pozwala wybrać dzieci i rodzeństwo w ten sam sposób.

• Aby wybrać dziecko niebezpośrednie, użyj spacji
• Aby wybrać bezpośrednie dziecko, użyj >
• Aby wybrać sąsiednie rodzeństwo po pierwszym, użyj +
• Aby wybrać nie sąsiadujące rodzeństwo po pierwszym, użyj ~

Wybór symboli wieloznacznych

Mogą wystąpić przypadki, w których chcemy wybrać wszystkie elementy, ale nie ma wspólnej właściwości do wyboru (klasa, atrybut itp.). W takim przypadku możemy użyć selektora * , który po prostu wybiera wszystkie elementy:

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

Łączenie selektorów

Rozważ następującą strukturę 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>

Selektory potomków i dzieci

Biorąc pod uwagę rodzica <ul> - parentUl znajduje swoich potomków ( <li> ),

1. Prosty $('parent child')

   >> $('ul.parentUl li')

   Sprowadza to wszystkich pasujących potomków określonego przodka o wszystkie poziomy w dół .

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

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

   Znajduje wszystkie pasujące dzieci ( tylko 1. poziom w dół ).

3. Selektor kontekstowy - $('child','parent')

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

   Działa to tak samo jak 1. powyżej.

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

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

   Działa to tak samo jak 1. powyżej.

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

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

   Działa to tak samo jak 2. powyżej.

Inne kombinatory

Selektor grup: „,”

Wybierz wszystkie elementy <ul> ORAZ wszystkie elementy <li> ORAZ wszystkie elementy <span> :

$('ul, li, span')

Selektor wielokrotności: „” (bez znaku)

Wybierz wszystkie elementy <ul> z klasą parentUl :

$('ul.parentUl')

Sąsiadujący selektor rodzeństwa: „+”

Wybierz wszystkie elementy <li> , które zostaną umieszczone bezpośrednio po innym elemencie <li> :

$('li + li')

Selektor generalny rodzeństwa: „~”

Wybierz wszystkie elementy <li> , które są rodzeństwem innych elementów <li> :

$('li ~ li')

Przegląd

Elementy mogą być wybierane przez jQuery przy użyciu selektorów jQuery . Funkcja zwraca element lub listę elementów.

Podstawowe selektory

$("*")                       // 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

Operatorzy relacyjni

$("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>

Buforowane selektory

Za każdym razem, gdy używasz selektora w jQuery, DOM jest przeszukiwany pod kątem elementów pasujących do Twojego zapytania. Robienie tego zbyt często lub wielokrotnie obniży wydajność. Jeśli odwołujesz się do określonego selektora więcej niż raz, powinieneś dodać go do pamięci podręcznej, przypisując go do zmiennej:

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

Zastąpiłoby to:

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

Buforowanie tego selektora może okazać się pomocne, jeśli twoja witryna musi często pokazywać / ukrywać ten element. Jeśli istnieje wiele elementów z tym samym selektorem, zmienna stanie się tablicą tych elementów:

<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>

UWAGA: Element musi istnieć w DOM w momencie przypisania do zmiennej. Jeśli w DOM nie ma elementu z klasą o nazwie child , będziesz przechowywać pustą tablicę w tej zmiennej.

<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>

Pamiętaj, aby ponownie przypisać selektor do zmiennej po dodaniu / usunięciu elementów w DOM za pomocą tego selektora.

Uwaga : Podczas buforowania selektorów wielu programistów rozpoczyna nazwę zmiennej od $ aby zaznaczyć, że zmienna jest obiektem jQuery, takim jak:

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

Elementy DOM jako selektory

jQuery akceptuje szeroką gamę parametrów, a jeden z nich jest rzeczywistym elementem DOM. Przekazywanie elementu DOM do jQuery spowoduje, że podstawowa struktura tablicowa obiektu jQuery pomieści ten element.

jQuery wykryje, że argument jest elementem DOM, sprawdzając jego nodeType.

Najczęstszym zastosowaniem elementu DOM są wywołania zwrotne, w których bieżący element jest przekazywany do konstruktora jQuery w celu uzyskania dostępu do interfejsu API jQuery.

Tak jak w each wywołaniu zwrotnym (uwaga: każdy jest funkcją iteratora).

$(".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
});

Ciągi HTML jako selektory

jQuery akceptuje szeroką gamę parametrów jako „selektory”, a jednym z nich jest ciąg HTML. Przekazywanie ciągu HTML do jQuery spowoduje, że podstawowa struktura tablicowa obiektu jQuery zatrzyma powstały skonstruowany HTML.

jQuery używa wyrażenia regularnego, aby ustalić, czy ciąg znaków przekazywany do konstruktora jest łańcuchem HTML, a także czy musi zaczynać się od < . Ten wyrażenie regularne jest zdefiniowane jako rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/ ( objaśnienie na stronie regex101.com ).

Najpopularniejszym zastosowaniem łańcucha HTML jako selektora jest, gdy zestawy elementów DOM muszą być tworzone tylko w kodzie, często jest to wykorzystywane przez biblioteki do takich rzeczy jak popaly modalne.

Na przykład funkcja, która zwróciła tag zakotwiczony zawinięty w div jako szablon

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

Zwróci trzymanie obiektu jQuery

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

jeśli zostanie wywołany jako template("google.com","Google") .