На практике приходится очень часто проверять существует ли элемент на веб-странице или нет.

Например, задача может быть следующей:

если на странице есть блок div с атрибутом id, то нужно выполнить какие-то действия с элементами, которые в нем находятся.

Такую проверку очень важно производить. Если в скрипте будет запрашиваться элемент, которого нет на странице, то будет ошибка. Скорее всего, вы знаете, насколько могут быть опасны ошибки в Javascript, весь код который расположен ниже, может просто не обрабатываться.

Поэтому производить проверку существования элемента — это очень важный момент.

Хочу рассказать о способе, как это можно сделать с помощью библиотеки Jquery.

Вот пример:

$(«#mydiv»).length – это выражение будет возвращать true, когда скрипту удалось найти элемент и false в противном случае. Именно этот принцип работы и позволяет выполнить необходимую проверку.

Если у вас появляется окно такого вида, значит, все работает нормально.

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

Этот вопрос привлек мое внимание за другим, которое было отмечено как дубликат этого .

Этот ответ суммирует принятый ответ с небольшими подробностями.

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

1. в атрибуте класса невозможно дублировать имена классов с помощью манипулирования элементом DOM с помощью JavaScript. Если у вас есть в вашем HTML, вызывая не добавит дополнительный класс коллапса . Я не знаю основную реализацию, но, полагаю, она должна быть достаточно хорошей.
2. JQuery делает некоторые необходимые проверки в своих реализациях и (я проверил исходный код ). Для после выполнения некоторых проверок и если существует класс, JQuery не пытается добавить его снова.

   Содержание

   • Проверить, существует ли элемент в jQuery
   • Использование классов в jQuery
     • Добавление класса
     • Удаление класса
   • Проверка наличия элемента
     • Проверка классов. Метод hasClass
     • Переключение классов
   • Как проверить наличие конкретного дочернего элемента jquery?
   • $.noConflict()
   • Работа с jQuery с noConflict
   • Реализация noConflict для собственных модулей
   • Заключение
   • Как в jQuery проверить наличие элемента на странице?
     • Материал из JQuery
   • Jquery. Как проверить существует ли элемент на странице?
   • В действии
   • См. также
   • Ссылки

   Проверить, существует ли элемент в jQuery

   Аналогично для JQuery делает что-то по линии который удалит класс только в том случае, если он существует.

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

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

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

В стороне, если вы переключите класс из-за изменений в позиции прокрутки, вам настоятельно рекомендуется throttle обработку событий прокрутки.

Использование классов в jQuery

Последнее обновление: 1.11.2015

Добавление класса

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

$(‘ul’).first().addClass(«redStyle»); // добавление двух классов $(‘div’).first().addClass(«black visible»);

Удаление класса

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

Проверка наличия элемента

И если у элемента имеется такой класс, то он удаляется:

$(‘div’).first().removeClass(«black visible»);

Проверка классов. Метод hasClass

Нередко бывает нужно проверить, имеет ли тот или иной элемент какой-нибудь класс, особенно это бывает необходимо, если классы добавляются динамически. В этом случае нам может помочь метод . И если содержит класс, то данный метод возвращает true, иначе false.

if($(‘ul’).first().hasClass(«redStyle»)){ console.log(‘Список содержит класс redStyle’); } else{ console.log(‘Список не содержит класс redStyle’); }

Переключение классов

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

Здесь мы на кнопку вешаем обработчик события . Сам обработчик передается в виде функции в качестве параметра. В этой функции переключаем класс redStyle с помощью метода — если класс есть, он удаляется, а если его нет, то он добавляется.

jQuery использует символ $ в качестве сокращения объекта jQuery.

Как проверить наличие конкретного дочернего элемента jquery?

Многие другие библиотеки также используют этот символ. А значит подключение нескольких таких библиотек может привести к тому, что некоторые из них не будут работать.

Поскольку в jQuery $ — это всего лишь сокращенное название для объекта jQuery, использование символа $ не является обязательным. Для предотвращения конфликтов в jQuery предусмотрен метод noConflict(). Рассмотрим, как работает метод noConflict().

$.noConflict()

При инициализации jQuery запоминает в локальных переменных текущие значения глобальных переменных $ и jQuery. Метод $.noConflict() просто восстанавливает значения глобальных переменных из локальных. При этом он принимает один параметр, который указывает, восстанавливать ли переменную jQuery или нет.

Как это работает? Допустим, мы подключили какую-то библиотеку, использующую перемнную $, а после нее — jQuery.

До того, как инициализировать собственную глобальную переменную $, jQuery запоминает ее значение в локальной переменной:

При вызове noConflict, если в переменной $ содержится объект jQuery — восстанавливается предыдущее значение из переменной _$.

Метод noConflict принимает параметр deep, если он передан — будет восстановлено еще и значение переменной jQuery:

Это может быть полезно, если вы опасаетесь, что ранее jQuery уже был подключен.

Работа с jQuery с noConflict

Как работать с jQuery без $? Во-первых, можно использовать переменную jQuery:

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

В примере выше $ — это локальная переменная в немедленно вызываемой функции.

Функция обратного вызова, которая передается в jQuery(document).ready() принимает один параметр — ссылку на объект jQuery. Из этого вытекает третий способ — работать с локальной переменной $ внутри этого обработчика:

Наконец, четвертый способ — определить собственную переменную, которая будет ссылкой на объект jQuery:

Реализация noConflict для собственных модулей

Если вы разрабатываете собственную javascript-библиотеку, вы можете использовать глобальные переменные с неуникальными именами, что, в свою очередь, может привести к конфликтам с другим кодом. Хорошим тоном является наличие метода noConflict, который, подобно jQuery, восстановил бы предыдущее значение глобальной переменной. Рассмотрим вариант реализации такой функции.

В этом примере мы описываем модуль в виде немедленно вызываемой функции, принимающей два параметра: имя модуля и его определение. В качестве имени в примере используется ’PdfExporter’, в качестве определения — функция, возвращающая объект PdfExporter.

При выполнении эта функция запоминает объект PdfExporter в локальной переменной module, а текущее значение переменной PdfExporter в локальной переменной old. Далее объекту module добавляется функция noConflict и в глобальную переменную PdfExporter записывается значение module. В функции noConflict восстанавливается значение переменной PdfExporter из переменной old.

Использовать нашу библиотеку можно так же, как описано для jQuery, например:

Немедленно вызываемая функция может также инициализировать модуль в стиле AMD или CommonJS, об этом мы поговорим подробнее отдельно.

Заключение

Мы рассмотрели, что такое метод $.noConflict, как он работает и для чего нужен. Грамотное использование noConflict позволит избежать не только конфликта переменной $ с другими библиотеками, но и конфликта версий jQuery между собой. Хорошим тоном является также добавление функции noConflict к собственным библиотекам, чтобы избежать конфликта имен.

Кроме того, что на веб-страницах можно выбирать элементы по их id, мы можем также выбирать элементы по атрибуту class.

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

Предположим, что у нас есть следующий код на странице.

<!DOCTYPE html> <html> <head> </head> <body> <div class=»elem»>Содержимое блока.</div> </body> </html>

Задача простая, нужно выбрать элемент с классом class=»elem» и произвести с ним какие-то действия с помощью Javascript.

Давайте рассмотрим несколько вариантов, как это можно сделать.

Вариант 1. Воспользоваться методом Javascript getElementsByClassName.

Если не использовать никаких дополнительных библиотек, то обратиться к элементу можно с помощью метода getElementsByClassName(«имя_класса»).

Например, применительно к исходному коду, можно добавить следующие строки кода.

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> </head> <body> <div class=»elem»>Содержимое блока.</div> <script type=»text/javascript»> alert(document.getElementsByClassName(«elem»)[0].innerHTML); </script> </body> </html>

В итоге, если все правильно работает, мы получим всплывающее окно, в котором будет выводиться текст, который находится внутри блока div.

Обратите внимание, что результатом выполнения метода getElementsByClassName будет массив элементов т.к. элементов с одинаковым классом на странице может быть несколько.

Именно поэтому в конце конструкции document.getElementsByClassName(«elem»)[0] нужно указать, что выводится нулевой элемент массива ([0]). Счет в Javascript начинается с нуля, а не с единицы.

Но проблема использования метода getElementsByClassName в том, что этот метод не поддерживается в старых версиях браузеров.

Есть некоторые уловки, как это можно обойти, но это лишний код. Например, можно воспользоваться регулярными выражениями:

if(document.getElementsByClassName == undefined) {     document.getElementsByClassName = function(cl) {        var retnode = [];        var myclass = new RegExp(‘\\b’+cl+’\\b’);        var elem = this.getElementsByTagName(‘*’);        for (var i = 0; i < elem.length; i++) {           var classes = elem[i].className;           if (myclass.test(classes)) {              retnode.push(elem[i]);           }        }        return retnode;     }  };

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

Вариант 2. С помощью библиотеки Jquery.

Использование библиотеки Jquery позволяет решить проблему выбора элементов по их атрибуту class, намного легче. Нужно воспользоваться конструкцией:

$(«.elem»)

Здесь elem – имя класса, присвоенное для элемента.

Нужно помнить, что для того, чтобы это работало, библиотеку Jqueryнужно сначала подключить.

Как в jQuery проверить наличие элемента на странице?

Добавляется она в разделе <head>, одним из способов, как это можно сделать, нужно добавить следующую строку кода:

<script src=»https://steptosleep.ru/wp-content/uploads/2018/06/62594.jpg»></script>

Чтобы библиотека могла подгрузиться должно быть соединение с Интернет.

Давайте посмотрим, как это работает на примере.

<!DOCTYPE html> <html> <head> <script src=»https://steptosleep.ru/wp-content/uploads/2018/06/62594.jpg»></script> </head> <body> <div class=»elem»>Содержимоеблока.</div> <script type=»text/javascript»> alert($(«.elem»).html()); </script> </body> </html>

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

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

Кстати, хотите узнать есть ли смысл в каком-то элементе на вашем сайте с помощью «целей» Яндекс Метрики и Google Analytics?

Уберите то, что НЕ работает, добавьте то, что работает и удвойте вашу выручку.

Курс по настройке целей Яндекс Метрики..

Курс по настройке целей Google Analytics..

Материал из JQuery

Перейти к: навигация, поиск

<< Манипуляции

.addClass()

Добавляет класс(ы) выбранным элементам страницы.

Jquery. Как проверить существует ли элемент на странице?

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

Примеры использования:

$(«#content»).addClass(«blackZone»)	добавит класс blackZone элементу с идентификатором content
$(«.content»).addClass(«blackZone»)	добавит класс blackZone всем элементам с классом content (то есть, у этих элементов станет по меньшей мере два класса: .

В действии

Добавим всем div-элементам на странице класс dotted, для добавления точечной красной рамки:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src=»https://steptosleep.ru/wp-content/uploads/2018/06/95419.jpg»~gt~~lt~/script~gt~ ~lt~style~gt~ div{ display: block; width: 50px; height: 50px; float: left; padding: 15px; margin: 5px; font-size: 20pt; } .green{background-color: #66ff66;} .gray{background-color: #aaa;} .dotted{border:2px dotted red} ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div~gt~ 1 ~lt~/div~gt~ ~lt~div class=»gray»~gt~ 2 ~lt~/div~gt~ ~lt~div class=»green»~gt~ 3 ~lt~/div~gt~ ~lt~script~gt~ $(«div»).addClass(«dotted»); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

См. также

Ссылки