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

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

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

jQuery - Фильтры контента

  • :contains() - выбирает все элементы, которые имеют указанный текст.

    Например, выбрать все элементы div, которые содержат текст "Виноград":

    <div>Виноград</div><!--Этот элемент будет выбран, т.к. он является элементом div и содержит текст "Виноград"-->
    <div>Персик Виноград Апельсин</div><!--Этот элемент будет выбран, т.к. он является элементом div и содержит текст "Виноград"-->
    <div>Манго виноград Киви</div><!--Этот элемент не будет выбран, т.к. он не содержит текст "Виноград". Данный фильтр учитывает регистр букв.-->
    <div>Вишня Лимон</div><!--Этот элемент не будет выбран, т.к. он не содержит текст "Виноград"-->
    <p>Виноград</p><!--Этот элемент не будет выбран, т.к. он не является элементом div-->
     
    <script>
      $("div:contains('Виноград')");
    </script>
    

    jQuery - пример работы фильтра :contains()

  • :empty - выбирает все элементы, которые не имеют детей (включая текстовые узлы).

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

    <p id="p-1"></p><!--Этот элемент будет выбран, т.к. он является элементом p и не имеет детей-->
    <p id="p-2"><span></span></p><!--Этот элемент не будет выбран, т.к. он содержит элемент span -->
    <p id="p-3">Текст элемента</p><!--Этот элемент не будет выбран, т.к. он содержит текстовый узел-->
    <div></div><!--Этот элемент не будет выбран, т.к. он не является элементом p-->
    <p id="p-4"><!--Комментарий--></p><!--Этот элемент будет выбран, т.к. он содержит комментарий. Комментарий не является элементом или текстовым узлом.-->
    
    <script>
      $("p:empty");
    </script>
    

    jQuery - пример работы фильтра :empty

  • :has() - выбирает элементы, содержащие в себе не менее одного элемента, соответствующего указанному в качестве параметра данного фильтра селектору.

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

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

    $("селектор").has(селектор_или_DOM-элемент);
    

    Например, выбрать все элементы div, которые содержат элемент p в качестве одного из своих потомков:

    <div id="id-1"><!--Этот элемент будет выбран, т.к. он содержит элемент p в качестве одного из своих потомков-->
      <p>...</p><!--Этот элемент не будет выбран, т.к. он не является элементом div-->
      <div id="id-2"><!--Этот элемент не будет выбран, т.к. он не содержит элемент p в качестве одного из своих потомков-->
        <div id="id-3"><!--Этот элемент не будет выбран, т.к. он не содержит элемент p в качестве одного из своих потомков-->
          <h3>...</h3><!--Этот элемент будет выбран, т.к. он не является элементом p-->
        </div>
      </div>
    </div>
    <div id="id-4"><!--Этот элемент будет выбран, т.к. он содержит элемент p в качестве одного из своих потомков-->
      <div id="id-5"><!--Этот элемент будет выбран, т.к. он содержит элемент p в качестве одного из своих потомков-->
        <div id="id-6"><!--Этот элемент будет выбран, т.к. он содержит элемент p в качестве одного из своих потомков-->
          <p>...</p><!--Этот элемент не будет выбран, т.к. он не является элементом div-->
        </div>
      </div>
    </div>
    
    <script>
      $("div:has(p)");
      //или с помощью метода .has()
      $("div").has("p");
    </script>
    

    jQuery - пример работы фильтра :has()

  • :parent - выбирает все элементы, имеющие детей (включая текстовые узлы). Этот фильтр выполняет действия обратные фильтру :empty.

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

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

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

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

    <p id="p-1"></p><!--Этот элемент не будет выбран, т.к. он не имеет детей-->
    <div><!--Этот элемент не будет выбран, т.к. он не является элементом p-->
      <p id="p-2"></p><!--Этот элемент не будет выбран, т.к. он не имеет детей-->
      <p id="p-3">Некоторый текст</p><!--Этот элемент будет выбран, т.к. он имеет одного ребёнка (текстовый узел)-->
      <p id="p-4"><!--Этот элемент будет выбран, т.к. он содержит детей (текстовый узел и элемент span)-->
        <span></span><!--Этот элемент не будет выбран, т.к. он не является элементом p-->
      </p>
    </div>
    
    <script>
      $("p:parent");
      //или с помощью метода .filter
      $("p").filter(":parent");
    </script>
    

    jQuery - пример работы фильтра :parent



   JavaScript и jQuery 0    1201 0

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

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