Главная » Полезные статьи » Разное » Создание собственных jQuery-селекторов
Распечатать статью

Создание собственных jQuery-селекторов

Из всех JavaScript-библиотек, jQuery вероятно имеет синтаксис селекторов, наиболее близкий к спецификации CSS. Это делает её простой для изучения верстальщиками и веб-дизайнерам, разбирающихся в CSS, хотя в jQuery существует целых 52 селектора. Если вам нравятся CSS-селекторы :first-child, :hover или :only-child, то в арсенале jQuery вы сможете воспользоваться 34 подобными селекторами псевдоклассов.

Если вам будет недостаточно стандартных селекторов jQuery — таких как :animated, :even, :not() или :visible — то существует множество других селекторов, созданных сообществом разработчиков jQuery, которые вы можете смело использовать (например, :exactIgnoreCase(), :nothidden или :loaded()).

А все это значит, что вам нет нужды беспокоиться об изучении того, как создавать собственные селекторы — ведь так? А вот и нет!

Чем проще задача, тем больше шанс того, что она будет выполнена без ошибок. Попробуем выполнить следующий код:

1 if ($(el).offset().top > $(window).scrollTop() - $(el).outerHeight(true) && $(el).offset().top < $(window).scrollTop() + $(el).outerHeight(true) + $(window).height())
2 {
3   // выполнить что-нибудь
4 }

А теперь взглянем на этот код:

1 if ($(el).is(":inview")) {
2   // выполнить что-нибудь
3 }

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

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

1 jQuery.extend(jQuery.expr[':'], { // $.extend($.expr[':'], если покороче
2   expression: function () {
3     // функция должна возвращать булевское значение
4     return false;
5   }
6 });

В этом примере expression — это название вашего нового селектора… он может называться, например, inview, loaded или nothidden. В функции нужно отобрать элементы, которые должны быть отфильтрованы вашим селектором.

Теперь посмотрим на функционал функции фильтрации нашего селектора inview:

1 jQuery.extend(jQuery.expr[':'], {
2   inview: function (el) {
3     if ($(el).offset().top > $(window).scrollTop() - $(el).outerHeight(true) && $(el).offset().top < $(window).scrollTop() + $(el).outerHeight(true) + $(window).height()) {
4       return true;
5     }
6     return false;
7   }
8 });

Условие не самое оптимальное, но оно выполняет возложенную на него задачу. Код по созданию селекторов нужно добавить перед их использованием — можно вынести этот код в отдельный файл и оформить в виде плагина. Использовать созданный селектор можно любым доступным способом:

1 $("p:inview").css("color","orange");

или

1 $("p").filter(":inview").each(function(){
2   // выполнить что-нибудь
3 });

или

1 if ($("p#desc").is(":inview")) {
2   // выполнить что-нибудь
3

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

01 jQuery.extend(jQuery.expr[':'], {
02   inview: function (el) {
03     var $e = $(el),
04     $w = $(window),
05     top = $e.offset().top,
06     height = $e.outerHeight(true),
07     windowTop = $w.scrollTop(),
08     windowScroll = windowTop - height,
09     windowHeight = windowTop + height + $w.height();
10     return (top > windowScroll && top < windowHeight);
11   }
12 });

Мы создали свой собственный jQuery-селектор, который отбирает все элементы, видимые в окне браузера. Кроме того наш код оптимизирован и понятен.

Селектор «in view» уже достаточно давно был создан и используется многими разработчиками jQuery. Но только что созданный нами селектор кроме всего прочего учитывает и высоту элемента, так что селектор отберет и элементы, которые только частично видимы в окне браузера.

Источник:   w3pro.ru

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи