jQuery - Селекторы (фильтры видимости)

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

Фильтры видимости предназначены для выбора элементов в зависимости от того отображаются они на веб-странице или нет.

jQuery - Фильтры видимости

  • :hidden - выбирает все элементы, которые скрыты. Элемент считается скрытым, если он или любой из его родителей не занимает пространства на веб-странице.

    Более подробно определить, является элемент скрытым или нет, можно с помощью следующих условий:

    • он имеет CSS-свойство display со значением none.
    • он является элементом формы с type="hidden".
    • ширина и высота элемента имеют значения, равные 0.
    • элемент не отображается на странице, т.к. скрыт его предок.
    Примечание:
    • элементы с visibility:hidden или opacity:0 считаются видимыми, поскольку они по-прежнему занимают место на веб-странице.
    • во время выполнения анимации, которая скрывает элемент, элемент считается видимым до конца выполнения этой анимации.
    • элементы, которые созданы в памяти и ещё не добавлены в документ, не считаются видимыми из-за того, что jQuery не может определить будут они видимы или нет, когда они добавятся в документ. Т.к. их видимость зависит от стилей, которые к ним будут применены, после того как они будут добавлены в документ.
    • во время выполнения анимации, которая показывает элемент, элемент считается видимым уже с начала выполнения анимации.
    • фильтр :hidden не является частью спецификации CSS. Он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll(), получена не будет. Для увеличения производительности запроса в современных браузерах, используйте следующую конструкцию:
      $("селектор").filter(":hidden");
      
    • использование этого селектора может сильно сказаться на производительности запроса, т.к. он может заставить браузер заново перерисовать страницу, прежде чем он сможет определить видимость указанных элементов. Для лучшей производительности, если это возможно, лучше организовать отслеживание видимости элементов через другие методы, например с помощью классов.

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

    <!doctype html>
    <html lang="ru">
    <head>
      <meta charset="utf-8">
      <title></title>
      <style>
      div {
        height: 20px;
      }
      .hidden {
        display: none;
      }
      </style>
    </head>
    <body>
     
      <div></div><!--Этот элемент не будет выбран, т.к. он не скрыт, т.е. занимает определённую область в документе-->
      <div style="height: 0px; width: 0px;"></div><!--Этот элемент будет выбран, т.к. он скрыт, т.е. не занимает область в документе-->
      <div style="display:none;"></div><!--Этот элемент будет выбран, т.к. он скрыт, т.е. не занимает область в документе-->
      <div class="hidden"></div><!--Этот элемент будет выбран, т.к. он скрыт, т.е. не занимает область в документе-->
      <div style="visibility: hidden;"></div><!--Этот элемент не будет выбран, т.к. он не скрыт, т.е. занимает определённую область в документе-->
     
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script>
        $("div:hidden");
        //или с помощью метода filter
        $("div").filter(":hidden");
      </script>
    </body>
    </html>
    

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

  • :visible - выбирает все элементы, которые отображаются (видимы). Элементы считаются видимыми, если они занимают место на веб-странице. Видимые элементы имеют ширину или высоту больше нуля.

    Примечание:
    • элементы с visibility:hidden или opacity:0 считаются видимыми, поскольку они по-прежнему занимают место на веб-странице.
    • элементы, которые созданы в памяти и ещё не добавлены в документ, считаются скрытыми из-за того, что jQuery не может определить будут они видимы или нет, когда они добавятся в документ. Т.к. их видимость зависит от стилей, которые к ним будут применены, после того как они будут добавлены в документ.
    • все элементы option рассматриваются как скрытые, независимо от того находятся они в состоянии selected или нет.
    • во время выполнения анимации, которая скрывает элемент, элемент считается видимым до конца выполнения этой анимации.
    • во время выполнения анимации, которая показывает элемент, элемент считается видимым уже с начала выполнения анимации.
    • фильтр :visible не является частью спецификации CSS. Он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll(), получена не будет. Для увеличения производительности запроса в современных браузерах, используйте следующую конструкцию:
      $("селектор").filter(":visible");
      
    • использование этого селектора может сильно сказаться на производительности запроса, т.к. он может заставить браузер заново перерисовать страницу, прежде чем он сможет определить видимость указанных элементов. Для лучшей производительности, если это возможно, лучше организовать отслеживание видимости элементов через другие методы, например с помощью классов.

    Например, выбрать все элементы div, которые отображаются (видимы) на веб-странице:

    <!doctype html>
    <html lang="ru">
    <head>
      <meta charset="utf-8">
      <title></title>
      <style>
      div {
        height: 20px;
      }
      .hidden {
        display: none;
      }
      </style>
    </head>
    <body>
     
      <div></div><!--Этот элемент будет выбран, т.к. он не скрыт, т.е. занимает определённую область в документе-->
      <div style="height: 0px; width: 0px;"></div><!--Этот элемент не будет выбран, т.к. он скрыт, т.е. не занимает область в документе-->
      <div style="display:none;"></div><!--Этот элемент не будет выбран, т.к. он скрыт, т.е. не занимает область в документе-->
      <div class="hidden"></div><!--Этот элемент не будет выбран, т.к. он скрыт, т.е. не занимает область в документе-->
      <div style="visibility: hidden;"></div><!--Этот элемент будет выбран, т.к. он не скрыт, т.е. занимает определённую область в документе-->
      <div style="opacity:0;"></div><!--Этот элемент будет выбран, т.к. он не скрыт, т.е. занимает определённую область в документе-->
     
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script>
        $("div:visible");
        //или с помощью метода filter
        $("div").filter(":visible");
      </script>
    </body>
    </html>
    

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



   JavaScript и jQuery 0    1274 0

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

  1. Комментарий был удален.
    1. Александр Мальцев # 0
      Запрещено размещать сообщения рекламного характера без согласия с администрацией сайта (admin@itchief.ru).

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