jQuery - Селекторы (базовые фильтры)

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

jQuery - основные фильтры

  • :animated - выбирает все элементы, которые в данный момент (т.е. в момент выбора) находятся в процессе выполнения анимации.

    Фильтр :animated не является частью спецификации CSS. Он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll(), получена не будет.

    Для увеличения производительности запроса в современных браузерах, используйте следующую конструкцию:

    $("селектор").filter(":animated");
    

    Например, выбрать элементы div, которые в данный момент выполняют некоторую анимацию:

    $("div:animated");
    $("div").filter(":animated");
    

    Например, вывести в консоль объект jQuery, состоящий из элементов div, которые при нажатии мышкой на документе находятся в анимации:

    <!--div, имеющий id="myDiv"-->
    <div id="myDiv"></div>
    <!--div, имеющий id="mover"-->
    <div id="mover" style="background: yellow; border: 1px solid #aaa; width: 80px; height: 80px; margin: 0 5px; float: left;"></div>
     
    <script>
    //выводит в консоль содержимое объекта jQuery, состоящий из элементов div, находящихся в анимации
    $(document).click(function() {
      console.log($( "div:animated" ));
    });
    //функция, задающая элементу c id="mover" выполнение некоторой анимации 
    function animateIt() {
      $( "#mover" ).slideToggle( "slow", animateIt );
    }
    //вызов функции animateIt
    animateIt();
    </script>
    
  • :eq(index) - выбирает элемент из выборки по его индексу (index). Отсчёт элементов в выборке начинается с 0. Поэтому, если вы хотите выбрать 1 элемент из выборки, то необходимо использовать фильтр :eq с индексом 0 (:eq(0)). Кроме этого данный фильтр позволяет выбирать элементы с конца посредством указывания отрицательных значений индекса. Если например Вы хотите получить последний элемент из выборки, т.е. первый с конца, то необходимо использовать фильтр :eq(-1).

    jQuery - фильтр eq

    Фильтр :eq не является частью спецификации CSS. Он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll(), получена не будет.

    Для увеличения производительности запроса в современных браузерах, используйте следующую конструкцию:

    $("селектор").eq(index);
    

    Например, выберем из выборки, содержащей элементы р, 2 элемент:

    <p id="myP1">...</p>
    <p id="myP2">...</p><!--Будет выбран этот элемент-->
    <p id="myP3">...</p>
    <p id="myP4">...</p>
    
    <script>
    $("p:eq(1)");
    //или
    $("p").eq(1);
    </script>
    
  • :even - выбрать чётные элементы из выборки. Т.к. отсчёт элементов в выборке начинается с 0, то чётными элементами считаются 0, 2, 4, ...

    Фильтр :even не является частью спецификации CSS. Он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll(), получена не будет.

    Для увеличения производительности запроса в современных браузерах, используйте следующую конструкцию:

    $("селектор").filter(":even");
    

    Например, выбрать из выборки, содержащей элементы li, только чётные элементы:

    <ul id="list">
      <li>...</li><!--Будет выбран этот элемент (индекс 0)-->
      <li>...</li>
      <li>...</li><!--Будет выбран этот элемент (индекс 2)-->
      <li>...</li>
      <li>...</li><!--Будет выбран этот элемент (индекс 4)-->
    </ul>
    
    <script>
    $("li:even");
    //или
    $("li").filter(":even");
    </script>
    
  • :first - выбрать первый элемент из выборки. Фильтр :first эквивалентен фильтру :eq(0). Он также может быть записан как :lt(1).

    Фильтр :first не является частью спецификации CSS. Он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll(), получена не будет.

    Для увеличения производительности запроса в современных браузерах, используйте следующую конструкцию:

    $("селектор").filter(":first");
    

    Например, выбрать из выборки, содержащей элементы ul, только первый элемент:

    <ul id="list">
      <li>...</li><!--Будет выбран этот элемент-->
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
    </ul>
    
    <script>
    $("li:first");
    //или
    $("li").filter(":first");
    </script>
    
  • :focus - выбрать элемент, который находится в фокусе.

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

    $("p:focus");
    
  • :gt(index) - выбрать из выборки только те элементы, индекс которых выше чем указанный индекс (index). Т.к. отсчёт элементов в выборке начинается с 0, то это необходимо учитывать при выборки элементов.

    Например, для того чтобы выбрать элементы индекс которых больше 2, необходимо использовать фильтр :gt(1).

    Кроме этого, данный фильтр позволяет задавать индекс элемента с конца. Например, для того чтобы выбрать из выборки два последних элемента, необходимо использовать фильтр :lt(-3).

    jQuery - фильтр :gt

    Фильтр :gt(index) не является частью спецификации CSS. Он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll(), получена не будет.

    Для увеличения производительности запроса в современных браузерах, используйте следующую конструкцию:

    $("селектор").slice(index);
    

    Например, выбрать из выборки, содержащей элементы li, только те элементы, индекс которых выше 2. Т.е. все элементы p кроме тех, которые имеют индекс 0, 1 и 2:

    <ul id="list">
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li><!--Будет выбран этот элемент (индекс 3)-->
      <li>...</li><!--Будет выбран этот элемент (индекс 4)-->
    </ul>
    
    <script>
    $("li:gt(2)");
    //или
    $("li").slice(2);
    </script>
    
  • :header - выбрать элементы, которые являются заголовками h1, h2, h3 и т.д.

    Фильтр :header не является частью спецификации CSS. Он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll(), получена не будет.

    Для увеличения производительности запроса в современных браузерах, используйте следующую конструкцию:

    $("селектор").filter(":header");
    

    Например, выбрать заголовки, которые расположенные в элементе, имеющим id="main":

    $("#main *:header");
    

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

    <h1>...</h1><!--Будет выбран этот элемент-->
    <p>...</p>
    <h2>...</h2><!--Будет выбран этот элемент-->
    <p>...</p>
    
    <script>
    $(":header");
    //или
    $("*").filter(":header");
    </script>
    
  • :lang() - выбрать из выборки элементы, имеющие указанный язык.

    Например, выбрать среди элементов div только те, которые имеют атрибут lang со значением "ru":

    <div lang="ru"><!--Будет выбран этот элемент-->
      <div lang="fr">...</div>
      <div>...</div><!--Будет выбран этот элемент-->
      <div lang="ru">...</div><!--Будет выбран этот элемент-->
    </div>
    <div lang="en">...</div>
    <div lang="it">
      <div lang="ru">...</div><!--Будет выбран этот элемент-->
      <div>...</div>
    </div>
    
    <script>
    $("div:lang('ru')");
    </script>
    
  • :last - выбрать последний элемент из выборки. Фильтр :last эквивалентен фильтру :eq(-1). Он также может быть записан как :gt(-2).

    Фильтр :last не является частью спецификации CSS. Он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll(), получена не будет.

    Для увеличения производительности запроса в современных браузерах, используйте следующую конструкцию:

    $("селектор").filter(":last");
    

    Например, выбрать из выборки, содержащей элементы ul, только последний элемент:

    <ul id="list">
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li><!--Будет выбран этот элемент-->
    </ul>
         
    <script>
      $("li:last");
      //или
      $("li").filter(":last");
    </script>
    
  • :lt(index) - выбрать из выборки только те элементы, индекс которых меньше чем указанный индекс (index). Т.к. отсчёт элементов в выборке начинается с 0, то это необходимо учитывать при выборки элементов.

    Например, для того чтобы выбрать элементы индекс которых меньше 2 (т.е. 2 первых элемента), необходимо использовать фильтр :lt(2).

    Кроме этого, данный фильтр позволяет задавать индекс элемента с конца. Например, для того чтобы выбрать из выборки все элементы кроме последних двух, необходимо использовать фильтр :lt(-2).

    Фильтр :lt(index) не является частью спецификации CSS. Он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll(), получена не будет.

    Для увеличения производительности запроса в современных браузерах, используйте следующую конструкцию:

    $("селектор").slice(0, index);
    

    Например, выбрать из выборки, содержащей элементы li, только те элементы, индекс которых меньше 3. Т.е. все элементы li, которые имеют в выборке индекс 0, 1 и 2:

    <ul id="list">
      <li>...</li><!--Будет выбран этот элемент (индекс 0)-->
      <li>...</li><!--Будет выбран этот элемент (индекс 1)-->
      <li>...</li><!--Будет выбран этот элемент (индекс 2)-->
      <li>...</li>
      <li>...</li>
    </ul>
        
    <script>
      $("li:lt(3)");
      //или
      $("li").slice(0,3);
    </script>
    
  • :not(selector) - исключить из выборки элементы, которые совпадают с указанным селектором.

    Например, выбрать из выборки, содержащей элементы div, только те элементы, которые не содержат класс alert:

    <div class="alert alert-warning">...</div>
    <div>...</div><!--Будет выбран этот элемент-->
    <div class="alert alert-danger">...</div>
    <div>...</div><!--Будет выбран этот элемент-->
    
    <script>
    $("div:not('.alert')");
    </script>
    
  • :odd - выбрать нечётные элементы из выборки. Т.к. отсчёт элементов в выборке начинается с 0, то нечётными элементами считаются 1, 3, 5, ...

    Фильтр :odd не является частью спецификации CSS. Он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll(), получена не будет.

    Для увеличения производительности запроса в современных браузерах, используйте следующую конструкцию:

    $("селектор").filter(":odd");
    

    Например, выбрать из выборки, содержащей элементы li, только чётные элементы:

    <ul id="list">
      <li>...</li>
      <li>...</li><!--Будет выбран этот элемент (индекс 1)-->
      <li>...</li>
      <li>...</li><!--Будет выбран этот элемент (индекс 3)-->
      <li>...</li>
    </ul>
         
    <script>
      $("li:odd");
      //или
      $("li").filter(":odd");
    </script>
    
  • :root - выбрать корневой элемент документа. В HTML-документе, корневым элементом всегда является элемент html.

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

    $(":root");
    
  • :target - выбрать элемент с указанным идентификатором, который определен в URI документа.

    Например, http://itchief.ru/jquery#test1.

    <div class="alert alert-warning">...</div>
    <div>...</div><!--Будет выбран этот элемент-->
    <div class="alert alert-danger">...</div>
    <div>...</div><!--Будет выбран этот элемент-->
    
    <script>
    //будет выбран элемент имеющий id="test1"
    $(":target");
    </script>
    


   JavaScript и jQuery 0    1220 0

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

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