jQuery - Селектор по атрибуту

На этом уроке познакомимся с тем как найти элементы на странице по атрибуту.


В jQuery выборка элементов по атрибуту выполнена в соответствии со спецификацией CSS.

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

Например:

<a href="#" rel="nofollow">...</a><!-- Будет выбран этот элемент, т.к. он является элементом a и имеет атрибут rel со значением nofollow. -->
<a href="example.html" rel="nofollow next">...</a><!-- Этот элемент выбран не будет, т.к. значение его атрибута rel не равно nofollow, а содержит 2 значения nofollow и next. -->
...
<script>
  // Выбрать элементы a, имеющие атрибут rel="nofollow"
  $("a[rel='nofollow']");
</script>

Значение атрибута в выражении селектора должно быть заключено в кавычки. Осуществляется это одним из следующих способов:

  • двойные кавычки внутри одинарных кавычек: $('a[rel="nofollow"]').
  • одинарные кавычки внутри двойных кавычек: $("[rel='nofollow']").
  • экранированные одинарные кавычки внутри одинарных кавычек: $('a[rel=\'nofollow\']').
  • экранированные двойные кавычки внутри двойных кавычек: $("a[rel=\"nofollow\"]").

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

jQuery - Селекторы по атрибуту

  • [name|="value"] - выбирает элементы, которые имеют указанный атрибут (name) со значением, равным заданной строки (value) или начинающимся с этой строки (value), за которой следует дефис.

    Например, выбрать все элементы div, которые имеют атрибут class со значением, равным alert или начинающимся с alert-.

      <div class="alert">...</div><!--Этот элемент будет выбран, т.к. он является элементом div и имеет атрибут class со значением равным alert-->
      <p class="alert">...</div><!--Этот элемент выбран не будет, т.к. он не является элементом div-->
      <div class="alert-warning">...</div><!--Этот элемент будет выбран, т.к. он является элементом div и имеет атрибут class со значением, начинающимся с alert за которым следует дефис-->
      <div class="alertwarning">...</div><!--Этот элемент выбран не будет, т.к. значение атрибута class не равно alert и не начинается с alert за которым следует пробел-->
      <div class="warning">...</div><!--Этот элемент выбран не будет, т.к. значение атрибута class не равно alert и не начинается с alert за которым следует пробел-->
      <div>...</div><!--Этот элемент выбран не будет, т.к. он не имеет атрибута class-->
    
      <script>
        //Выберет все элементы div, которые имеют атрибут class со
        //значением alert или со значением, начинающимся с alert-
        $('div[class|="alert"]');
      </script>
    
  • [name*="value"] - - выбирает элементы, который имеют указанный атрибут (name) со значением, содержащим заданную подстроку (value).

    Например: выбрать все элементы, которые имеют атрибут href, содержащий в качестве своего значения подстроку youtube:

    <a href="http://www.youtube.com/">...</a><!--Этот элемент будет выбран, т.к. значение атрибута href содержит подстроку yuotube-->
    <a href="#">...</a><!--Этот элемент не будет выбран, т.к. значение атрибута href не содержит подстроку yuotube-->
    <div>...</div><!--Этот элемент не будет выбран, т.к. он не имеет атрибута href-->
    
    <script>
      //Выберет элементы, которые имеют атрибут href со значением    
      //содержащим подстроку youtube
      $('[href*="youtube"]');
    </script>
    
  • [name~="value"] - выбирает элементы, которые имеют указанный атрибут (name) со значением, содержащим заданное значение (value) как одно из его значений (т.е. отделенно от другого значения пробелом) или равным этому значению (value).

    Например, выбрать все элементы а, которые имеют атрибут class со значением, содержащим значение btn как одно из его значений (т.е. отделено от другого знаения пробелом) или равным btn:

    <a class="btn btn-default" href="#">...</a><!--Этот элемент будет выбран, т.к. он является элементом a и имеет атрибут class, содержащий значение btn как одно из его значений (т.е. оно отделено от другого его значения пробелом)-->
    <a class="btn" href="#">...</a><!--Этот элемент будет выбран, т.к. он является a и имеет атрибут class, содержащий значение равное btn-->
    <button class="btn btn-default" type="submit">Отправить</button><!--Этот элемент не будет выбран, т.к. он не является элементом a-->
    <a href="#">...</a><!--Этот элемент не будет выбран, т.к. он не имеет атрибута href-->
    <a class="btn-default" href="#">...</a><!--Этот элемент не будет выбран, т.к. он имеет атрибут class со значением, не содержащим значение btn как одно из его значений и не равным btn-->
        
    <script>
      $('a[class~="btn"]');
    </script>
    
  • [name$="value"] - выбирает элементы, которые имеют указанный атрибут (name) со значением, которое заканчивается заданным значением (value).

    Например, выбрать все элементы, которые имеют атрибут href, заканчивающийся на ".zip".

    <a href="downloads/archive.zip">...</a><!--Этот элемент будет выбран, т.к. значение атрибута href заканчивается на .zip-->
    <a href="#">...</a><!--Этот элемент не будет выбран, т.к. значение атрибута href не заканчивается на .zip-->
    <div>...</div><!--Этот элемент не будет выбран, т.к. он не имеет атрибута href-->
    
    <script>
      //выберет все элементы а, у которых значение атрибута href заканчивается на .zip
      $('a[href$=".zip"]');
    </script>
    
  • [name="value"] - выбирает элементы, у которых указанный атрибут (name) имеет значение value.

    Например, выбрать все элементы, которые атрибут type со значением button:

    <input type="button" value="Расчитать стоимость заказа"><!--Этот элемент будет выбран, т.к. его атрибут type содержит значение button-->
    <button type="button">Информация о заказе</button><!--Этот элемент будет выбран, т.к. его атрибут type содержит значение button-->
    <input type="submit" value="Отправить заказ"><!--Этот элемент не будет выбран, т.к. его атрибут type не содержит значение button-->
     
    <script>
      $('[type="button"]');
    </script>
    
  • [name!="value"] - выбирает элементы, которые не имеют указанный атрибут (name) или имеют указанный атрибут (name), но он не содержит заданного значения (value).

    Например, выбрать элементы a, которые не имеют атрибут rel или имеют его, но он не содержит значение nofollow.

    <a href="#" rel="nofollow">...</a><!--Это элемент не будет выбран, т.к. его атрибут rel содержит значение, равное nofollow-->
    <a href="#" rel="nofollow next">...</a><!--Это элемент будет выбран, т.к. он является элементом a и содержит атрибут rel со значением не равным nofollow-->
    <a href="#">...</a><!--Это элемент будет выбран, т.к. он является элементом a и не содержит атрибут rel-->
    <a href="#" rel="next">...</a><!--Это элемент будет выбран, т.к. он является элементом a и содержит атрибут rel со значением не равным nofollow-->
    <p>...</p><!--Это элемент не будет выбран, т.к. он не является элементом a-->
     
    <script>
      $('a[rel!="nofollow"]');
    </script>
    
  • [name^="value"] - выбирает элементы, которые имеют указанный атрибут (name) со значением, начинающимся с заданного значения (value).

    Например, выбрать все элементы а, имеющие класс btn и атрибут href со значением, начинающимся с "http".

    <a class="btn btn-default" href="http://itchief.ru">...</a><!--Этот элемент будет выбран, т.к. он является элементом a, имеет класс btn и атрибут href со значением, начинающимся с http-->
    <a href="http://jquery.com/">...</a><!--Этот элемент не будет выбран, т.к. он не имеет класс btn-->
    <a class="btn" href="my1.html">...</a><!--Этот элемент не будет выбран, т.к. у него значение атрибута href не начинается с http-->
     
    <script>
      $('a.btn[href^="http"]');
    </script>
    
  • [name] - выбирает элементы, которые имеют указанный атрибут (name). Значение данного атрибута (name) может быть любым.

    Например, выбрать изображения (img), имеющие атрибут alt:

    <img src="photo-1.jpg" alt=""><!--Этот элемент будет выбран, т.к. он является элементом img и имеет атрибут alt-->
    <img src="photo-2.jpg" alt="Фотография 2"><!--Этот элемент будет выбран, т.к. он является элементом img и имеет атрибут alt-->
    <img src="photo-3.jpg"><!--Этот элемент не будет выбран, т.к. он не имеет атрибут alt-->
    
    <script>
      $('img[alt]');
    </script>
    
  • [name1="Value1"][name2="Value2"] - выбирает элементы, у которых указанные атрибуты (name1 и name2) имеют соответствующие значения (Value1 и Value2).

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

    $("[attr1][attr2][attrN]");
    //attr1 - селектор атрибута 1
    //attr2 - селектор атрибута 2
    //attrN - селектор атрибута N
    

    Например, выбрать элементы a, имеющие атрибут id, атрибут href начинающийся с http и атрибут class со значением, содержащим значение btn как одно из его значений или равным btn:

    <a id="myID" class="btn btn-default" href="http://getbootstrap.com/">...</a><!--Это элемент будет выбран, т.к. он является элементом a и соответствует всем 3 фильтрам атрибутов-->
    <a class="btn btn-warning" href="http://itchief.ru/">...</a><!--Это элемент не будет выбран, т.к. он не соответствует фильтру [id]-->
    <a href="index5.html">...</a><!--Это элемент не будет выбран, т.к. он не соответствует всем 3 фильтрам: [id], [href^="http"] и [class~="btn"]-->
    
    <script>
      $('a[id][href^="http"][class~="btn"]');
    </script>
    


   JavaScript и jQuery 0    3602 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.