jQuery - Селекторы (основные)

На этом уроке мы познакомимся с основными селекторами, которые будем использовать в качестве аргумента функции jQuery("селектор") для выбора элементов.

Управление веб-страницей обычно начинается с поиска (получения) необходимых элементов (DOM-элементов). Функция jQuery() поддерживает различные способы получения элементов, но на этом уроке остановимся на рассмотрении выбора элементов с помощью селектора.

jQuery - выбор элементов на основе селектора

Селектор - это строка, содержащая некоторое описание, на основании которой осуществляется выбор DOM-элементов на веб-странице.

Принцип работы функции jQuery("селектор") заключается в следующем: она перебирает все DOM-элементы и выбирает только те, которые соответствуют селектору. После этого функция jQuery("селектор") конструирует объект jQuery, в который "складывает" все найденные DOM-элементы. Узнать количество DOM-элементов в объекте jQuery можно с помощью свойства length.

Внимание: Выбор элементов с помощью функции jQuery("селектор") и стандартных методов JavaScript (getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector(), querySelectorAll()) имеет одно существенное различие, которое заключается в том, что:

  • функция jQuery("селектор") возвращает объект jQuery, содержащий найденные DOM-элементы;
  • стандартные методы JavaScript возвращают DOM-элемент или HTML-коллекцию, состоящую из DOM-элементов.

Это различие накладывает ограничение на возможность использование методов jQuery к выбранным элементам. Т.е. к элементам, выбранным с помощью стандартных методов JavaScript применять методы jQuery нельзя, т.к. они "понимают" только объект jQuery. То же самое касается DOM-элементов и HTML-коллекций, к которым нельзя применять методы jQuery.

Основное правило: "Методы jQuery можно применять только к элементам, находящимся в объекте jQuery".

Рассмотрим следующий пример:

//переменная myElement содержит объект jQuery, состоящий из элемента body
var myElement = $("body");
//добавить каждому элементу, содержащемуся в объекте jQuery стиль CSS, изменяющий цвет фона элемента на красный
myElement.css("background-color","red");

//получить DOM-элемент body
var myElement2 = document.body;
//попытка вызвать у DOM-элемента метод jQuery приведёт к ошибке, т.к. его можно вызывать только у объекта jQuery
myElement2.css("background-color","green");

//Если вы хотите применить к выбранному DOM-элементу метод jQuery, то его предварительно необходимо обернуть в объект jQuery с помощью функции jQuery()
$(myElement2).css("background-color","green")

jQuery - различие между jQuery и методами JavaScript

Селекторы в jQuery разделены на следующие категории:

  • основные селекторы;
  • иерархические селекторы;
  • основные фильтры;
  • фильтры для выбора дочерних элементов;
  • фильтры для указания видимости элементов;
  • фильтры по контенту;
  • селекторы элементов форм;
  • селекторы атрибутов.

jQuery - категории селекторов

  • * - выбрать все элементы.

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

    //будут выбраны все элементы на веб-странице, включая html
    $("*");
    
  • элемент - выбрать элементы с указанным тегом (селектор по имени).

    Например, выбрать все элементы р в документе:
    $("р"); 
    
  • .имя_класса - выбрать элементы с указанным классом (селектор класса).

    Например, выбрать все элементы, имеющие класс btn:

    <!--Будет выбран этот элемент, т.к. он имеет класс btn-->
    <button class="btn">Пересчитать</button>
    <!--Этот элемент выбран не будет, т.к. он не имеет класс btn-->
    <button class="button">Отправить заказ</button>
    
    <script>
    //выбрать среди всех элементов, элементы, имеющие класс btn 
    $(".btn");
    //вышеприведённый селектор также можно записать следующим образом:
    $("*.btn");
    </script>
    

    Например, выбрать элементы a, имеющие класс btn:

    <!--Будет выбран этот элемент, т.к. он является элементом а и один из его классов равен btn-->
    <a class="btn btn-default" href="http://itchief.ru">Перейти на сайт itchief.ru</a>
    <!--Этот элемент выбран не будет, т.к. его класс не равен btn-->
    <a class="main-link" href="http://getbootstrap.com">Перейти на сайт getbootstrap.com</a>
    <!--Этот элемент не будет выбран, т.к. он не имеет классов-->
    <a href="http://jquery.com">Перейти на сайт jquery.com</a> 
    <!--Будет выбран этот элемент, т.к. он является элементом а и его класс равен btn-->
    <a class="btn" href="http://modx.com">Перейти на сайт modx.com</a>
    <!--Этот элемент выбран не будет, т.к. он не является элементом а-->
    <button class="btn">Оформить заказ</button>
    
    <script>
    //выбрать среди всех элементов а, элементы, имеющие класс btn
    $("a.btn");
    </script>
    
  • идентификатор - выбрать элемент с указанным идентификатором.

    Например, выбрать элемент в документе, имеющий id="carousel".

    <!--Этот элемент выбран не будет, т.к. он не имеет идентификатора-->
    <div class="alert alert-warning">...</div>
    <!--Будет выбран этот элемент, т.к. у него идентификатор равен carousel-->
    <div id="carousel">...</div>
    <!--Этот элемент выбран не будет, т.к. у него идентификатор не равен carousel-->
    <div id="menu">...</div>
    
    <script>
    //Выбрать среди всех элементов, элемент, имеющий идентификатор carousel
    $("#carousel");
    </script>
    

    Например, выбрать элемент div, имеющий идентификатор carousel.

    //бывают такие ситуации, когда на разных страницах вашего сайта
    //разные элементы могут иметь одинаковый идентификатор. И если Вам
    //необходимо выбрать определённый элемент с определённым
    //идентификатором, то можно воспользоваться следующей конструкцией:
    
    //выбрать элемент div, имеющий идентификатор carousel
    $("div#carousel"); 
    
  • селектор1,селектор2,... - выбрать элементы, соответствующие указанным селекторам.

    Например, используя несколько селекторов jQuery, выбрать элементы div с классом main и элементы div с классом sidebar:

    <!--Этот элемент выбран не будет, т.к. он не соответствует не одному из указанных селекторов-->
    <div>
      <!--Будет выбран этот элемент, т.к. он соответствует одному из указанных селекторов-->
      <div class="main">...</div>
      <!--Будет выбран этот элемент, т.к. он соответствует одному из указанных селекторов-->
      <div class="sidebar">...</div>
    </div>
    
    <script>
    //выбрать элементы, соответствующие одному из указанных селекторов
    $("div.main, div.sidebar");
    </script>
    

Рассмотрим следующий пример:

<body>
  <ul id="list">
    <li>Кофе</li>
    <li class="active">Чай</li>
    <li>Какао</li>
  </ul>
  <p>Текст</p>
</body>

jQuery - использование основных селекторов



   JavaScript и jQuery 0    1793 0

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

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