Разное

Jquery это: Урок 1. Что такое jQuery, основные понятия и возможности

25.07.2023

Поиск DOM элементов с помощью jQuery

В этом уроке мы разберем, как искать елементы с помощью jQuery.

У нас есть html файл с подключенным скриптом code, где мы будем писать наш javascript. Давайте подключим скрипт jQuery до нашего скрипта. Таким образом библиотека будет нам доступна, когда мы будем писать наш код

<body>
  <script src='jquery.js'></script>
  <script src='code.js'></script>
</body>

Как же нам использовать jQuery? Когда мы установили библиотеку jQuery у нас в window появилась две переменных jQuery и $. Это то, как мы можем обращатся к нашей библиотеке, чтобы ее использовать. Обычно все использую знак доллар, так как он короче и код получается лаконичнее.

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

Давайте добавим див с классом app

<div>App</div>

Давайте попробуем найти этот елемент. Я предпочитаю переменные, в которые записаны jQuery елемент начинать с знака $. Это позволяет сразу понимать что внутри.

var $app = $('.app')
console.log($app)

Как мы видим в консоли, мы получили массив, в котором первый елемент является нашим DOM елементом.

Теперь мы можем вызывать jQuery методы прямо на нашу переменную $app, так как это у нас jQuery елемент.

Например давайте поменяем цвет елемента.

var $app = $('.app')
$app.css('color', 'red')

То есть мы вызвали метод jQuery .css, который принимает стиль и значение. Как вы видите, этот код намного лаконичнее, чем мы писали на чистом javascript и мы всегда можем быть уверенны в том, что он работает кроссбраузерно.

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

Например:

var $app = $('. app')
$app.css('color', 'red')
  .css('font-size', '24px')
  .css('border', '1px solid red')

Поиск елементов может так же осуществлятся по тегу, классу, id. Давайте попробуем.

Добавим добавим id к нашему елементу.

<div>App</div>

Теперь мы можем искать елемент по id вот так.

var $app = $('#app')

Либо по тегу.

var $app = $('div')

Еще один плюс, если вы заметили, это то, что мы всегда работаем с массивом и применяем стили на все елементы. В данном случае $app массив.

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

<div>App 1</div>
<div>App 2</div>
<div>App 3</div>

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

Если у вас что-то не получается, либо возникли вопросы и комментарии, пишите их прямо под этим видео и я обязательно на них отвечу.

jQuery для чайников | Введение

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

Все вы наверняка видели на современных сайтах различные всплывающие или наоборот прячущиеся панели, сайдбары – гармошки, картинки плавно затухающие или скользящие, классные фото-галереи и т.п. Красиво, черт!

В шаблонах WordPress а ля «премиум» уже просто не обходится без слайдера с картинками. Смотрится красиво и стильно. Хочется ведь и в своем шаблоне что-то подобное прикрутить.

Самое простое, конечно же, это взять готовый буржуйский шаблон и банально заменить в нем дизайн на свои каляки-маляки, оставив функционал как есть. Но кто даст гарантию, что шаблон после этого не поплывет? Мало ли где что-нибудь напутали.

Поэтому хотя бы на уровне грамотного пользователя jQuery (не разработчика!) изучить данный предмет стоит. Вот этим и займемся.

Еще раз, для прояснения: в данном цикле статей будет в самой простой и доступной форме показан ряд примеров практического применения библиотеки jQuery, без глубокого вникания в суть происходящих процессов. Кому интересно более детальное изучение предмета — читайте профильные форумы и блоги. Вот несколько ссылок:

1. Статья из Wiki
2. Документация на jQuery-Docs.Ru
3. Сайт разработчиков jQuery

Так как сегодняшний пост озаглавлен словом Введение, то с jQuery мы познакомимся пока что лишь в общих чертах. Чтобы сложилось достаточно простое и внятное понимание, о чем вообще идет речь.

Любой начинающий вебмастер, который уже немного разбирается в верстке и знает про HTML и CSS, также знает или хотя бы слышал про JavaScript.

Говоря упрощенно, это программная часть кода веб-сайта, которая позволяет реализовать те или иные эффекты, недоступные или мало-доступные обычным стилевым фишкам на CSS.

Читайте также: JavaScript для начинающих | Введение

Самый простой пример — отображение текущей даты на сайте или обыкновенных часов. Понятно, что одной лишь версткой тут не справиться. Для этого в страницу сайта внедрялись специальные программые куски кода, или иначе — JavaScript.

Выглядело это достаточно просто. В код веб-страницы вставлялась ссылка на внешний файл скрипта:

<script type="text/javascript" src="clock.js"></script>

Практически точно также мы пристегиваем к странице файл стилей CSS. Это просто.

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

<script type="text/javascript">
программный код самого скрипта
</script>

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

Так появилась специальная библиотека сборник по имени jQuery. Теперь достаточно положить в корневую папку нашего сайта один единственный файл jquery.js и затем выдергивать из него необходимые эффекты в нужных местах страницы. Удобно? Безусловно!

Библиотека эта постоянно совершенствуется и пополняется. Ее свежую версию всегда можно скачать с официального сайта разработчиков jquery.com. На данный момент времени (27.01.2010) свежая версия имеет номер 1.4.1

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

Вот как раз для этого дела вначале нужно более или менее изучить основы CSS, ибо посредством стилей и происходит привязка эффектов из библиотеки к деталям страницы. Но об этом (с живым и шевелящимся примером) в следующем посте.

Enjoy!

jQuery для чайников | Введение
jQuery для чайников | Начальные сведения | Простой слайдер
jQuery для чайников | Эффект линзы | плагин JQzoom
jQuery для чайников | Всплывающая подсказка | Плагин Tooltip

jQuery не определен (в пользовательском интерфейсе jQuery)

Задавать вопрос

спросил

Изменено 1 год, 9 месяцев назад

Просмотрено 13 тысяч раз

Я скачал jQuery 3.2.1 и jQuery UI 1.12.1 и загружаю их так:

Я получаю ошибку ссылки Uncaught:

Uncaught ReferenceError: jQuery не определен (анонимная функция) @ jquery-ui.js:14 (анонимная функция) @ jquery-ui.js:16 index.html:165 Uncaught TypeError: table.insertRow не является functionObject. keys.forEach.key @ index.html: 165loadResultsIn @ index.html:164loadhistory @ index.html:186onload @ index.html:12

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

  • jquery
  • jquery-ui
4

Решение найдено здесь: Electron: jQuery не определен

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

Почему устаревший jQuery по-прежнему является доминирующей библиотекой JavaScript

Richard MacManus

Ричард является старшим редактором The New Stack и ведет еженедельную колонку о тенденциях в веб-разработке и разработке приложений. Ранее он основал ReadWriteWeb в 2003 году и превратил его в один из самых влиятельных в мире новостных и аналитических сайтов о технологиях. Подпишитесь на него в Твиттере @ricmac.

jQuery — одна из старейших и наиболее влиятельных библиотек JavaScript в Интернете. По данным BuiltWith, ошеломляющие 78% из 1 миллиона лучших веб-сайтов так или иначе используют jQuery. Что касается самой обсуждаемой сегодня библиотеки JavaScript, React, то ее используют относительно ничтожные 14%.

jQuery был запущен еще в 2006 году, когда термин «Ajax» был на пике популярности. Ajax (асинхронный JavaScript и XML) давно ушел из языка разработчиков, как и другие технологии JavaScript той ранней эры Web 2. 0. Но jQuery выдержал испытание временем. Действительно, до недавнего времени он все еще рос из года в год. Чтобы узнать последние новости об этой устойчивой технологии, я поговорил с одним из разработчиков, который продолжает поддерживать jQuery, Михалом Голембиовски-Овчареком.

Gołębiowski-Owczarek был соавтором двух статей в блоге OpenJS Foundation в начале этого месяца, в которых рассказывалось о текущих «усилиях по модернизации» в проекте jQuery. В первом посте было объявлено о новой версии jQuery UI — библиотеки пользовательского интерфейса, построенной поверх основной библиотеки jQuery. Это будет «последний запланированный выпуск проекта», что означает, что пользовательский интерфейс jQuery теперь находится «в режиме обслуживания». Во втором сообщении было объявлено об устаревании jQuery Mobile, еще одного подпроекта jQuery, который предоставил «систему пользовательского интерфейса на основе HTML5» для мобильных браузеров.

Оба этих проекта сворачиваются с 2018 года, когда они стали «почетными проектами» OpenJS Foundation. Однако ни одно из объявлений не затрагивает так называемый проект jQuery Core, который продолжает оставаться «проектом воздействия» OpenJS Foundation. Другими словами, основной проект jQuery не исчезнет в ближайшее время.

Фактор WordPress

Несмотря на его огромное использование, разработчики сегодня могут даже не знать, что они используют jQuery. Это потому, что он встроен в ряд крупных проектов, в первую очередь в платформу WordPress. Многие темы и плагины WordPress основаны на jQuery. Библиотека jQuery также является базовым слоем некоторых из самых популярных на сегодняшний день фреймворков и наборов инструментов JavaScript, таких как AngularJS и Bootstrap (версия 4.0 и ниже).

«Многие сюрпризы в статистике использования jQuery происходят из-за того, что мы живем в пузыре», — сказал мне Голембиовски-Овчарек. «Большинство веб-сайтов не являются сложными веб-приложениями, нуждающимися в сложной структуре, [это] в основном статические сайты с некоторым динамическим поведением — часто написанные с использованием WordPress. jQuery по-прежнему очень популярен там; он работает и прост, поэтому люди не чувствуют необходимости прекращать его использовать».

jQuery останется частью WordPress еще какое-то время, хотя бы по той причине, что ее будет трудно удалить без нарушения обратной совместимости. Но я спросил Голембиовски-Овчарек, может ли WordPress в конечном итоге отказаться от jQuery?

«Думаю, это уже частично происходит», — ответил он. «Редактор Gutenberg, созданный WordPress, не зависит от jQuery. Так что, по крайней мере, на стороне администратора у них есть варианты, которые от него не зависят».

Он ожидает, что со временем WordPress перейдет на новые технологии, но это будет постепенный процесс.

В сообществе разработчиков WordPress «влияние на производительность использования jQuery в темах WordPress» является горячей темой. Существует даже справочный веб-сайт под названием «Возможно, вам не понадобится jQuery», который предлагает советы о том, как заменить jQuery в вашем приложении WordPress. Его аргументация включает тот факт, что с современными браузерами «вам может не понадобиться ничего, кроме того, с чем браузер поставляется».

Тем не менее, есть еще один документ, который предупреждает, что «разработчики должны знать, что отказ от библиотек, таких как jQuery, может легко потребовать большого количества исследований с их стороны, чтобы избежать ошибок (даже в современных браузерах)». Итак, несмотря на то, что «JQuery мертв?» статьи циркулируют уже несколько лет, по крайней мере, они все еще живы в экосистеме WordPress. Разработчикам предлагается заменить его, но на свой страх и риск.

Роль jQuery тогда…

Так как же jQuery стал таким внедрил в сегодняшнюю сеть? Чтобы ответить на этот вопрос, нужно немного истории.

Когда создатель jQuery Джон Резиг выпустил его в январе 2006 года в BarCampNYC, он написал, что «этот код революционизирует то, как вы можете заставить Javascript взаимодействовать с HTML». В первую очередь он имел в виду тот факт, что jQuery упростил разработчикам работу с DOM (объектной моделью документа). Помните, это было до того, как появился Google Chrome, чтобы встряхнуть мир, так что это была эпоха небольших инноваций в браузерах. У Microsoft Internet Explorer было 85-90% рынка браузеров с доминирующей версией IE6. Даже в то время IE6 имел репутацию исторически плохого браузера.

Саймон Уиллисон, которого Резиг назвал одним из тех, кто оказал на него влияние при создании jQuery, в июньском сообщении 2006 г. отметил некоторые проблемы разработчиков JavaScript с браузерами:

с несовместимостью браузера), с которыми придется иметь дело любому умеренно сложному приложению — такие вещи, как нормализованная обработка событий, выбор узла DOM, разумная анимация или перетаскивание».

Именно эту проблему и намеревался решить Resig, хотя сама jQuery не упоминалась в сообщении Уиллисона. В «большую четверку» ведущих библиотек JavaScript в то время входили Dojo, MochiKit, Prototype/Scriptaculous и библиотека пользовательского интерфейса Yahoo. В своем блоге примерно год спустя Уиллисон признался, что сначала он думал, что jQuery был «милым приемом», но теперь признал его «исключительно умным инженерным решением».

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

…Роль jQuery сейчас

Какова роль jQuery в современной сети, когда ведущие браузеры (даже Safari!) намного лучше соответствуют веб-стандартам? Кроме того, сам стандарт JavaScript значительно улучшился за последнее десятилетие, особенно после выпуска ECMAScript 6 в 2015 году.

Как уже отмечалось, React стал самой обсуждаемой библиотекой JavaScript на сегодняшний день. Современные фреймворки, особенно Next.js, основаны на React. Другие популярные фреймворки, такие как Angular (преемник AngularJS), имеют собственную экосистему библиотек. Современные фреймворки JavaScript также позволяют разбивать пользовательский интерфейс на компоненты, что упрощает масштабирование приложения.

«Эти фреймворки предоставляют абстракции для упрощения синхронизации между данными и представлением», — сказал Голембиовски-Овчарек о таких платформах, как Next.

js и Angular. «Поэтому их пользователям больше не нужно так часто изменять DOM или обращаться к нему напрямую, и им часто не рекомендуется это делать. В такой среде использование jQuery не имеет особого смысла. Но это лишь малая часть всей веб-экосистемы».

Однако Голембиовски-Овчарек признал, что jQuery может иметь проблемы с производительностью для крупномасштабных приложений.

«За эти годы мы значительно улучшили производительность jQuery, — сказал он, — но есть некоторые препятствия, с которыми трудно справиться. Один из них заключается в том, что, чтобы не конфликтовать с браузером, jQuery не изменяет нативные прототипы — как это делали некоторые другие библиотеки (часто позже вызывая проблемы со стандартизацией конфликтующих API), — а вместо этого оборачивает узлы DOM объектами-оболочками jQuery. Каждая операция над такой оберткой создает новую. В большинстве случаев это не имеет значения, но для очень сложных приложений с большим количеством манипуляций с DOM это иногда может стать проблемой».

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *