Не работает jquery в opera
Обновлено: 03.07.2024
С момента выпуска jQuery в 2006 году DOM и нативное API браузеров значительно улучшились. Статьи о том, что вполне можно обходиться без jQuery, выходят с 2013 года. Не хотелось бы пересказывать уже старые тезисы, но с тех пор в браузерной стране многое изменилось. Браузеры продолжают внедрять новые API-интерфейсы, которые избавляют от проблем при разработке без использования JavaScript библиотек, многие из которых напрямую скопированы из jQuery.
Давайте рассмотрим несколько новых ванильных альтернатив методам jQuery.
Удалить элемент со страницы
Помните безумно окольный способ, которым вы должны были удалить элемент со страницы в ванильном DOM? Тогда надо было создать весьма громоздкую конструкцию типа el.parentNode.removeChild(el);. Вот сравнение способа jQuery и нового улучшенного способа "из коробки".
Внимание! В этой статье мы будем предполагать, что $elem - набор элементов, выбранный jQuery, а elem является нативным элементом DOM, выбранным в JavaScript.
Добавить элемент
Вставить элемент перед другим элементом
Заменить элемент другим элементом
Найти ближайшего предка, который соответствует данному селектору
Поддержка браузерами методов манипуляции DOM
Эти методы в настоящее время довольно активно поддерживаются большинством браузерами.
Согласно данным с сайта Caniuse на сегодня мы имеем следующее положение дел. Число показывает версию браузера, начиная с которой поддерживается данные функции.
| Chrome | Opera | Firefox | IE | Edge | Safari |
|---|---|---|---|---|---|
| 54 | 41 | 49 | Нет | 17 | 10 |
| iOS Safari | Opera Mobile | Opera Mini | Android | Android Chrome | Android Firefox |
|---|---|---|---|---|---|
| 10.0-10.2 | 46 | Нет | 67 | 75 | 67 |
Также на текущий момент эти методы реализованы в Edge.
Исчезновение элемента
Написав собственный CSS, вы можете в большей степени контролировать анимацию элемента:
Разовый вызов обработчика события
В прошлом при написании чистого JavaScript приходилось вызывать функцию removeEventListener внутри функции обратного вызова:
Теперь все намного чище. Возможно, вы видели третий необязательный параметр, иногда передаваемый в addEventListener. Это логическое значение, которое определяет тип события — захват или всплытие. Теперь же этот третий параметр также может быть объектом конфигурации:
Если же вы все еще хотите использовать тип события захват, а также вызывать функцию обратного вызова только один раз, то вы можете указать это в объекте конфигурации:
Анимация
jQuery метод .animate() довольно ограничен.
В документации говорится: "Все анимированные свойства должны быть анимированы по одному числовому значению, за исключением случаев, указанных ниже; большинство свойств, которые не являются числовыми, не могут быть анимированы с использованием базовых функций jQuery." Это делает невозможным какие-либо преобразования, и, например, для анимации цветов вам потребуется специальный плагин. Вам было бы намного проще с новым API веб-анимации.
Если мы хотим простоты использования, есть более простой вариант, который приобрел популярность - но он не является родным для браузера, и это приводит нас к .
Использование микробиблиотек
Axios - это популярная библиотека для Ajax. Это отличный пример микробиблиотеки - библиотеки, предназначенной только для одной цели. Хотя большинство библиотек не будут так хорошо тестироваться, как jQuery, они часто могут стать привлекательной альтернативой бегемоту jQuery.
(Почти) Все можно возместить
Итак, теперь вы знаете, что с DOM теперь приятно работать! Но, возможно, посмотрев на все эти новшества, вы только вздохнете и скажете: "Ну что ж, все это хорошо, но мне все равно нужно поддерживать IE 9, поэтому я лучше останусь с jQuery". Однако, в большинстве случаев не имеет значения, что говорит сервис CANIUSE о доступности определенной функции, которую необходимо использовать. Вы можете использовать все, что вам нравится, а полифилы помогут заполнить пробелы. Было время, когда, если вы хотели использовать необычную новую функцию браузера, вам нужно было найти полифил, а затем подключить его на свою страницу. Делать это для всех функций, отсутствующих в IE9, было бы трудной задачей. Теперь же все гораздо проще. Достаточно добавить одну строку:
Этот простой скрипт может заполнить все что угодно. Если вы не слышали об этом сервисе полифила от Financial Times, вы можете прочитать об этом на polyfill.io.
Итерация NodeList в 2017
Популярность библиотеки jQuery было обусловлена не только исключительно ее способностью надежно устранять ошибки браузера и несоответствия в старом IE. На сегодняшний день у jQuery есть еще одно серьезное преимущество - итерация.
Вполне разумно, что списки NodeList нельзя перебирать (итерировать). Разработчикам до сих пор приходится прыгать через обручи, чтобы сделать их такими. Классический цикл for может быть наиболее оптимизированным по производительности подходом, но не всякому понравится набирать кучу текста. И вот мы уже приходим к такому безобразию:
Совсем недавно появился Array.from, предоставивший более изящный способ превратить nodeList в массив.
Но вот пришла грандиозная новость - списки NodeList теперь могут перебираться по умолчанию!
Теперь достаточно написать:
На сегодняшний день только Edge остался единственным браузером, не поддерживающим перебираемые NodeLists. Но и он работает над исправлением этого недостатка.
jQuery медленная?
Библиотека jQuery может быть гораздо быстрее коряво написанного чистого JS. Но это только лишний повод лучше изучить JavaScript! Один из создателей jQuery Пол Айриш в свое время писал в Twitter, что лучше на работающем сайте отказаться от использования методов show()/hide() в пользу классов, так как они снижают скорость работы сайта.
Вот что написал создатель jQuery о изучении нативного DOM в своей книге по Javascript "Secrets of the JavaScript Ninja":
"Зачем вам нужно понимать, как это работает, если библиотека позаботится об этом за вас? Наиболее убедительной причиной является производительность. Понимание того, как модификация DOM работает в библиотеках, позволяет вам писать более качественный и быстрый код."
Что мне не нравится в jQuery
Вместо того, чтобы сглаживать только остающиеся уродливые части некоторых браузерных API, jQuery стремится заменить их все оптом. Возвращая объект jQuery, а не NodeList, библиотека по сути закрывает встроенные методы браузера, что означает, что вы вынуждены абсолютно все делать через jQuery. Для новичков то, что когда-то было доступно посредством интерфейсных скриптов, теперь является препятствием, поскольку по сути это означает, что есть два дублирующих способа все сделать. Если вы хотите легко читать чужой код и применять его как к заданиям, требующим чистого JS, так и к заданиям, требующим jQuery, вам придется учиться вдвое больше. Однако есть библиотеки, которые приняли API, который будет достаточно знаком поклонникам jQuery, но который возвращает NodeList, а не объект jQuery.
Не можете жить без $?
Возможно, вы полюбили этот $ от jQuery. К счастью, есть ряд микробиблиотек, которые эмулируют API jQuery.
- Леа Веру, приглашенный эксперт из рабочей группы W3C CSS, написавшая статью о вреде jQuery, является автором Bliss.js. Bliss использует знакомый синтаксис $, но возвращает NodeList.
- Тем временем, Пол Ирриш выпустил Bling.js "потому что вы хотите получить $ jQuery без jQuery".
- А Реми Шарп предложил аналогичную микробиблиотеку, метко названную min.js.
Тем не менее, не стоит думать, что мы ярые противники jQuery. Некоторые великие разработчики все еще предпочитают использовать именно эту библиотеку. Если вы комфортно чувствуете себя, используя jQuery, и вы знаете его API как свои пять пальцев, то нет никакой значительной причины выкидывать его в мусорное ведро. В конце концов, есть люди, которые используют jQuery и знают, что такое замыкание, и которые пишут веб-приложения корпоративного уровня, и есть люди, которые используют чистый JS, но не лезут в разработку сверх-приложений. При этом, множество вакансий программистов числят его среди необходимых навыков. Хотя для любого, кто только начинает свой путь на этом поприще, jQuery все чаще выглядит плохим выбором. Internet Explorer 11, к счастью, является окончательной версией этого адского устройства. Как только IE умрет, весь ландшафт браузеров станет вечно зеленым, а jQuery будет все больше и больше восприниматься как пережиток грязного прошлого DOM.
Консоль должна быть открыта. Закрытая консоль, конечно же, не ошибка в коде, однако, ошибочный подход во время отладки сценария. Именно консоль поможет быстро сориентироваться в том, где и какая допущена ошибка, а также следить за ходом выполнения сценария. Во всех современных браузерах - этот инструмент присутствует по умолчанию. Например, в FireFox консоль можно вызвать с помощью сочетания клавиш Ctrl + Shift + K или "Меню" > "Разработка" > "Веб-консоль". В Chrome вызывается сочетанием клавиш Ctrl + Shift + J или "Меню" > "Дополнительные инструменты" > "Консоль JavaScript". В Opera - сочетание клавиш аналогичны Chrome, вызов из меню - "Инструменты разработчика" > "Веб-инспектор" ("Инструменты разработчика" предварительно включить в пункте "Другие инструменты"). Кроме того, существуют инструменты/аддоны, как, например, замечательный FireBug под FireFox или Web Developer для Chrome и этот же инструмент для FireFox
Не подключена библиотека. У кого-то этот пункт вызовет улыбку, но могу вас уверить, что по моей личной статистике, как минимум раз в месяц, на форуме появляется вопрос о том, почему ничего не работает, а после долгих выяснений оказывается, что js-файл с библиотекой просто не подключен на странице. Библиотека jQuery должна быть по возможности новее, подключена первой, до скриптов, в которых она используется и в единственном числе. Если вы используете какой-нибудь старенький плагин, которому для работы требуется такая же старая версия jQuery, то есть несколько нормальных путей решения, чем подключение на страницу и новой библиотеки и старой для плагина:
- Оставляем одну новую библиотеку и сразу после неё подключаем плагин jQuery Migrate, который, в большинстве случаев, помогает решить вопрос совместимости.
- Без каких-либо дополнений, сами заменяем в плагине удаленные методы на их современные аналоги. Обычно, это такие устаревшие или удаленные методы, как live(), $.browser и т.д.
- И конечно же, можно найти современный аналог плагина, который вам понравился. Не зацикливайтесь на одном.
Ну, и примерный порядок подключения:
Код не обернут в конструкцию DOM-Ready. Одна из наиболее популярных ошибок. Если ваш скрипт расположен/подключен в теге <head>, то его нужно обязательно заключить в такой код:
Это так называемый "обработчик готовности дерева DOM". Попробую "на пальца" и простым языком объяснить, что это и зачем нужно. Браузер загружает страницу, начиная с первого на ней элемента и движется вниз. Всё, что подключено в теге <head>: CSS, JS и т.д., загрузится и начнёт выполняться раньше, чем дело дойдёт до элементов, которые находятся в <body>. Поэтому, при обращении к элементу из JS-кода, его еще попросту нет на странице. А обёртка, которую я показал выше, откладывает выполнение сценария до тех пор, пока вся структура страницы не будет загружена браузером полностью. Как вариант, который совсем не лишён логики и даже рекомендуется тем же Google, весь свой код можно расположить в конце страницы, перед закрывающим тегом </body>. Так же, хоть и не совсем по теме этого пункта, рекомендуется в некоторых случаях использовать атрибут async для тега <script>.
Не используется делегированная обработка событий для динамических элементов. Этот случай знаком многим, кто использует технологию Ajax. Пунктом выше, мы затронули тему DOM и доступностью элементов при загрузке страницы, но что делать, если элементы добавляются динамически и с ними нужно работать так же, как и со статичными? Вот тут на помощь приходит делегированная обработка событий. Синтаксис:
- static_parent - статичный родительский элемент
- event - событие
- dinamic_child - динамический дочерний элемент
- handler - функция-обработчик
К примеру, в каком-то блоке с классом "my_block", есть несколько ссылок с классом "my_link", при клике на которые, выполнялось какое-то действие. Все они изначально присутствовали при загрузке страницы. Теперь мы добавили еще несколько ссылок с таким же классом, но без делегированной обработки, они будут просто проигнорированы и нужное действие уже не выполнится. Для того, чтоб событие обрабатывалось и на старых, и на новых ссылках, нам нужно записать так:
! При чём, объект $(this) внутри обработчика - это именно ссылка ".my_link", на которой событие было вызвано, а не родительский элемент ".my_block", как это бы было при обычной записи, а не делегированной. Старайтесь находить ближайший родительский статичный элемент, что ускорит работу кода. Хотя, в качестве такого, можно выбрать и body, и даже document.
Неправильно подобранный селектор. Вообще, эта тема гораздо обширнее, чем звучит, но тут разберём самые основные промахи, которые допускают новички. Селектор, говоря образно, это признак элемента, по которому мы к этому элементу обращаемся или применяем какой-либо из методов. Селекторами в jQuery (и не только), может быть как имя тега, класс элемента (атрибут "class"), его идентификатор (атрибут "id"), так и любые другие атрибуты или же их комбинации. Тем, кто знаком с CSS, можно расслабится, т.к. селекторы jQuery строятся по такому же принципу, как и в CSS, а вот остальным придётся познакомиться с CSS поближе. Парочка примеров:
Теперь о главной и критической ошибке всех новичков, связанной с селекторами. Возьмите себе за правило, повесьте в рамочке на самом видном месте, повторяйте как мантру перед сном: "В пределах одной страницы - не может быть два и более элементов с одинаковыми атрибутами ID"! Это правило не имеет никаких "а вдруг . " или "а если . ". Поэтому, если вы очень удивлены тому, что на одном элементе событие срабатывает, а на втором таком же нет, то в первую очередь проверьте, а не попадают ли они под правило выше.
В этой статье точку не поставишь, поэтому следите за её обновлениями и не делайте ошибок или учитесь их исправлять ;)
Я тестирую свою веб-страницу в браузерах, и кажется, что некоторые биты не работают в Firefox и Opera. Я предполагаю, что это вызвано jQuery, используемым на моей странице.
В нижней части исходного кода вы можете найти весь используемый код jQuery (в основном для вызова и применения плагинов). У меня возникают проблемы, чтобы определить, что не так, так как в консоли не отображаются ошибки (firefox 20.0). Основные неисправности
проигрыватель, просто сравните, как он работает в Chrome, а затем проверьте его в Firefox или Opera, во-первых, он не показывает ". ", что означает загрузку, во-вторых, когда вы нажимаете кнопку воспроизведения на другом плеере, обе песни продолжают играть, где, как и в других браузерах, первая песня приостанавливается, поэтому проигрывается только одна песня.
у рекламы должны быть поля сверху и снизу, рассчитанные jQuery, в опере и в firefox этого нет. Так я что-то упустил? Может быть, мне нужно применить определенные стандарты кода?
Кажется, это все, но я не уверен.
Я помещу здесь написанный мной код (скорее всего, проблема в нем), обратите внимание, над ним есть несколько плагинов jQuery.
1 ответ
1. реклама должна иметь поля сверху и снизу, рассчитанные с помощью jQuery, в опере и в firefox этого нет. Так я что-то упустил? Может быть, мне нужно применить определенные стандарты кода?
Ваш элемент имеет авто поля, поэтому, в зависимости от браузера, .css('margin-left') может возвращать разные значения, в том числе 0 ,
Я рекомендую использовать библиотеку JsSizes, которая представляет собой легкий плагин, который позволит вам получить фактические поля в пикселях.
2. плеер, просто сравните, как он работает в Chrome, а затем проверьте его в Firefox или Opera, во-первых, он не показывает ". ", что означает загрузку, во-вторых, когда вы нажимаете кнопку воспроизведения на другом плеере, обе песни сохраняются. воспроизведение, где, как и в других браузерах, первая песня приостанавливается, поэтому проигрывается только одна песня.
Firefox и Opera не поддерживают mp3 в своих аудиоэлементах, поэтому он заменяется флэш-объектом. Поэтому вы больше не можете слушать эти события DOM.
Хотя, согласно их аннотированному исходному коду, у флэш-объекта есть открытые методы play() , pause() , а также isPlaying ,
Я бы посоветовал прослушать событие нажатия на кнопку "play-pause" и использовать эти функции. Как это:
Достаточно большое количество ресурсов в интернете с помощью технологии JavaScript воспроизводят видео и подгружают данные. Поэтому актуальным остается вопрос, как запустить данную функцию в различных браузерах. Рассмотрим, как её включить в веб-обозревателе Opera.
Активация JavaScript в Opera
Активировать JavaScript можно как глобально для всех сайтов, так и только для тех из них, которым вы больше всего доверяете. Рассмотрим алгоритм действий для обоих этих вариантов.
Вариант 1: Глобальная активация
Для начала рассмотрим, как включить JavaScript в браузере Opera для всех веб-ресурсов без исключения.
- Чтобы активировать описываемую технологию, необходимо перейти в настройки браузера. Для этого кликните по логотипу Оперы в левом верхнем углу. В открывшемся меню выберите пункт «Настройки» либо просто примените сочетание горячих клавиш Alt+P.
Вариант 2: Включение для отдельных сайтов
Описываемую технологию можно также активировать в Opera только для отдельных, доверенных ресурсов в интернете.
-
Для начала необходимо перейти в окно настроек JavaScript, действуя по тому алгоритму, который описан в предыдущем способе по пункт 5 включительно. Далее, оставив переключатель напротив параметра «Разрешено» в деактивированном состоянии, щелкните по кнопке «Добавить» напротив параметра «Разрешить».
Как видим, с помощью внутренних настроек браузера Opera имеется возможность включить технологию JavaScript как для всех сайтов без исключения, так и так и только для отдельных, доверенных веб-ресурсов.
Отблагодарите автора, поделитесь статьей в социальных сетях.
Читайте также: