Что такое jQuery: где используется и какие преимущества дает разработчикам

Что такое jquery или первое знакомство с самой известной библиотекой JavaScript

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

Экскурс в историю

Создателем библиотеки стал Джон Резиг, американец, который в свое время был JavaScript-евангелистом. В начале своей программистской карьеры Джон работал в Brand Logic на полставки и заинтересовался языком JavaScript, который впоследствии изучил вдоль и поперек.

Немного позже после написания множества приложений он создал библиотеку jQuery. Впервые она была представлена в 2006 году на «BarCamp» – международной конференции, проходящей в Нью-Йорке.

Главной целью своего детища Резиг назвал возможность написать такой код, который будет упрощать JS и при этом позволит не беспокоится о кроссбраузерности. И это действительно так.

Библиотека значительно упрощает множество решений на JavaScript и превращает увесистые куски кода в несколько строк. К тому же она прекрасно работает во всех браузерах и самое главное одинаково. Так что разработчику не надо заморачиваться с настройкой работы кода под особенности последних.

Преимущества и недостатки

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

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

  • Кроссбраузерность. Как я уже упоминал выше, данная библиотека поддерживается во всех браузерах и приложения работают практически идентично в любом из них. Такого, к сожалению, не всегда можно сказать о JavaScript.
  • Простота. Несмотря на огромное количество дополнительных функций и несколько отличающийся синтаксис от основного языка, jQuery очень прост как для изучения, так и для понимания. А если вы уже плавали среди программного кода на JS, то изучение описываемой библиотеки не составит труда.
  • Компактность. Одно из моих любимых преимуществ, так как реализация многих задач значительно сокращается в плане количества написанных строк. Всего лишь грамотно продуманное решение таска и код можно сократить втрое!
  • Совместимость. К огромному счастью, все версии библиотеки полностью совместимы друг с другом. Поэтому переход от старых версий к новым не должен вызвать у вас трудностей.
  • Дружба сAJAX. Считаю это также нужно вынести в преимущества. В jQuery очень удобно работать с AJAX, а без него не обходится большинство качественных сайтов. Для тех, кто не знает скажу, что AJAX нужен для построения интерактивных интерфейсов веб-приложений для пользователей. Он позволяет перегружать не всю страницу, а только ту часть, которую стоит изменить вследствие каких-то действий юзера, что значительно ускоряет работу сервиса.
  • Возможности. Детище Резига наделено огромным количеством дополнительных возможностей, функций и теперь уже дополнительными библиотеками, основанными на jQuery. В качестве примера я назову две наиболее популярные. Начнем с Query UI. Это библиотека, благодаря которой можно получить готовые плагины, эффекты, темы, виджеты и многое другое. Для работы ее нужно скачать и после подключать в хедере документа. Второй не менее популярной считается jQuery Mobile. Эта библиотека облегчает жизнь разработчикам мобильных приложений.

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

  • Типизация. Так как библиотека написана на JavaScript, у нее отсутствует типизация данных. Это несколько замедляет работу кода. К тому же «словить» ошибку можно только во время выполнения этой строки с багом. До этого программа не знает, какие типы переменных задействованы, а значит компилятор никак не поможет.
  • Время компиляции. При открытии любого веб-ресурса запускаются и скрипты. Это также влияет на скорость выполнения приложения.

Из главных недостатков это, пожалуй, все. Они не катастрофичны, но все же существуют.

А как же подключить библиотеку в программном коде?

Для начала необходимо скачать нужную версию jQuery себе на компьютер. Я прикрепил ссылку на официальный сайт, откуда желательно скачивать данную технологию: http://jquery.com/download .

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

Следующий этап – загрузка полученного документа на сервер с приложением и после подключение к самому коду через тег

Однако это не единственный вариант. Если нет желания качать библиотеку, то можно совершить подключение с CDN. Для этого в атрибуте src нужно написать полный путь к хранилищу.

В качестве примера я приведу строку с ссылкой на CDN, организованный создателями описываемого инструмента.

Хочу отметить важную деталь: как вы уже поняли, в зависимости от того, откуда вы взяли jQuery, src может отличаться. Так что перед подключением уточняйте данный параметр.

Стоит подытожить

Вот и подошли к окончанию вводной публикации. Я постарался составить общее впечатление о технологии и рассказать о ее создании. Как видно, библиотеке около 10 лет, однако благодаря своим создателям, она совершенствовалась и дополнялась каждый год.

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

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

Так же я рекомендую вам курс Евгения Попова Javascript + jQuery для начинающих, в котором для новичков рассказываются все азы работы с библиотекой jquery. Ознакомиться с курсом можно по ссылке.

Обязательно подписывайтесь на обновления моего блога и рассказывайте о нем своим друзьям. Желаю удачи в обучении! Пока-пока!

Зачем нам jQuery?

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

Чтобы пояснить, чем она нас привлекает в эпоху Node и ES6 (у нас в ассортименте и этого добра навалом) предлагаем познакомиться со статьей Коди Линдли, вышедшей вскоре после вышеупомянутого третьего издания

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

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

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

Что такое jQuery?

jQuery – это библиотека JavaScript (т.e., она написана на JavaScript), предназначенная для абстрагирования, выравнивания, исправления и упрощения скриптинга при работе с узлами HTML-элементов в браузере или для работы в браузере без графического интерфейса.

  • Абстрагируется интерфейс объектной модели документа (он же DOM API).
  • Выравниваются все различия реализаций DOM, существующие между браузерами.
  • Исправляются известные браузерные баги, связанные с CSS и DOM.

Все это оборачивается в более простой и менее корявый API, нежели нативный API DOM – вот вам и библиотека jQuery.

Теперь позвольте объяснить, что я понимаю под “скриптингом HTML-элементов”. При помощи jQuery совершенно тривиально решаются задачи вроде «визуально скрыть второй элемент h2 в документе .html. Код jQuery для такой задачи выглядел бы так:

Давайте немного разберем эту строку с кодом jQuery. Сначала вызывается функция jQuery() , ей мы передаем специальный CSS-селектор библиотеки jQuery, выбирающий второй элемент h2 в HTML-документе. Затем вызывается метод jQuery .hide() , скрывающий элемент h2 . Вот как прост и семантически выразителен код jQuery.

Теперь сравним его с нативным DOM-кодом, который потребовалось бы написать, если бы мы не работали с jQuery.

Какой вариант было бы удобнее написать? А читать, а отлаживать? Также учтите, что вышеприведенный нативный DOM-код предполагает, что все браузеры поддерживают использованные здесь методы DOM. Однако оказывается, что некоторые старые браузеры не поддерживают querySelectorAll() или setProperty() . Поэтому вышеприведенный код jQuery вполне нормально работал бы в IE8, а нативный код DOM вызвал бы ошибку JavaScript. Но, все-таки, даже если бы обе строки кода работали повсюду, какую из них было бы проще читать и писать?

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

jQuery = JavaScript?

Поскольку jQuery повсеместно распространена, то вы, возможно, не вполне представляете, где заканчивается JavaScript и начинается jQuery. Для многих веб-дизайнеров и начинающих разработчиков HTML/CSS, библиотека jQuery — это первый контакт с языком программирования JavaScript. Поэтому jQuery иногда путают с JavaScript.

Первым делом давайте оговоримся, что JavaScript – это не jQuery и даже не сам DOM API. jQuery – это сторонняя свободная библиотека, написанная на JavaScript и поддерживаемая целым сообществом разработчиков. Кроме того, jQuery не относится к числу стандартов тех организаций (напр., W3C), которые пишут спецификации HTML, CSS или DOM.

Не забывайте, что jQuery служит прежде всего как «сахар» и используется поверх DOM API. Этот сахар помогает работать с интерфейсом DOM, который печально известен своей сложностью и обилием багов.

jQuery – это просто полезная библиотека, которой можно пользоваться при написании сценариев для HTML-элементов. На практике большинство разработчиков прибегают к ней при DOM-скриптинге, поскольку ее API позволяет решить больше задач меньшим количеством кода.

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

Два краеугольных камня jQuery

Две базовые концепции, на которых основана jQuery, таковы: “найди и сделай” и “пиши меньше, делай больше.”
Две этих концепции можно развернуть и переформулировать в виде следующего утверждения: первоочередная задача jQuery заключается в организации выбора (то есть, нахождении) или в создании HTML-элементов для решения практических задач. Без jQuery для этого потребовалось бы больше кода и больше сноровки в обращении с DOM. Достаточно вспомнить рассмотренный выше пример с сокрытием элемента h2 .

Следует отметить, что круг возможностей jQuery этим не ограничивается. Она не просто абстрагирует нативные DOM-взаимодействия, но и абстрагирует асинхронные HTTP-запросы (т.н. AJAX) при помощи объекта XMLHttpRequest. Кроме того, в ней есть еще ряд вспомогательных решений на JavaScript и мелких инструментов. Но основная польза jQuery заключается именно в упрощении HTML-скриптинга и просто в том, что с ней приятно работать.

Еще добавлю, что польза jQuery – не в успешном устранении браузерных багов. «Краеугольные камни» нисколько не связаны с этими аспектами jQuery. В долгосрочном отношении самая сильная сторона jQuery заключается в том, что ее API абстрагирует DOM. И эта ценность никуда не денется.

Как jQuery сочетается с современной веб-разработкой

Библиотеке jQuery уже десять лет. Она создавалась для той эпохи веб-разработки, которую мы уже безусловно миновали. jQuery не является незаменимой технологией для работы с DOM или выполнения асинхронных HTTP-запросов. Практически все, что можно сделать с jQuery, можно сделать и без нее. А если вас интересует всего лишь пара мелких простых взаимодействий с DOM в одном-двух современных браузерах, то возможно, лучше будет воспользоваться нативными DOM-методами, а не jQuery.

Однако, при любых разработках, связанных с BOM (браузерной моделью документа) или DOM, а не только с косметическими взаимодействиями, следует пользоваться jQuery. В противном случае вы станете изобретать велосипед (т.e. элементы абстракций jQuery), а потом испытывать его на всевозможных дорожках (т.e в мобильных браузерах и браузерах для ПК).

Опытные разработчики знают, что такое «стоять на плечах гигантов», и когда следует избегать излишней сложности. В большинстве случаев нам все равно не обойтись без jQuery, когда нужно в сжатые сроки выполнить нетривиальную работу, связанную с HTML и DOM.

Кроме того, даже если бы jQuery не решала ни единой проблемы с DOM или с разношерстными браузерными реализациями спецификации DOM, важность самого API ничуть бы не уменьшилась, поскольку он так удобен для HTML-скриптинга.

Причем jQuery совершенствуется, и с ее помощью программисты могут работать толковее и быстрее. Такова ситуация сегодня, так было и на момент создания библиотеки. Сказать «мне не нужна jQuery» — все равно, что утверждать «обойдусь без lo-dash или underscore.js». Разумеется, можно без них обойтись. Но об их ценности судят не по этому.
Их ценность — в API. Из-за излишней сложности разработка может замедляться. Поэтому нам и нравятся такие вещи как lo-dash и jQuery – с ними все упрощается. А поскольку jQuery облегчает выполнение сложных задач (например, писать сценарии для HTML), она не устареет.

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

Приложение – важные факты об jQuery

Наконец, перечислю некоторые важные факты, касающиеся jQuery.

  • Библиотеку jQuery написал Джон Резиг (John Resig), ее релиз состоялся 26 августа 2006. Джон признавался, что написал этот код, чтобы “произвести революцию во взаимодействии JavaScript с HTML”.
  • jQuery считается наиболее популярной и востребованной современной библиотекой JavaScript.
  • jQuery – свободное ПО, предоставляемое по лицензии MIT.
  • Существует две версии jQuery. Версия 1.x поддерживает Internet Explorer 6, 7 и 8, а 2.x поддерживает только IE9+. Если вам требуется поддержка IE8, то придется работать с версией 1.x. Но это нормально, обе версии по-прежнему активно разрабатываются.
  • Минимальная версия jQuery 2.x имеет размер 82kb. В архиве Gzip — около 28k.
  • Минимальная версия jQuery 1.x имеет размер 96kb. В архиве Gzip — около 32k.
  • Исходный код jQuery доступен на Github.
  • На основе исходного кода с Github можно создать собственную версию jQuery.
  • jQuery можно установить при помощи менеджера пакетов bower или npm (т.e. $ bower install jquery or npm install jquery ).
  • У jQuery есть официальная сеть CDN, в которой можно взять различные версии jQuery.
  • jQuery имеет простую архитектуру на основе плагинов, поэтому любой желающий может добавлять в нее собственные методы.
  • jQuery обладает обширным набором плагинов. Можно приобрести высококачественные плагины для enterprise-разработки (напр. Kendo UI) или воспользоваться не менее классными бесплатными (напр. Bootstrap).
  • jQuery можно разбить на категории (в соответствии с разбиением документации API ).

  • ajax
  • attributes
  • callbacks object
  • core
  • CSS
  • data
  • deferred object
  • dimensions
  • effects
  • events
  • forms
  • internals
  • manipulation
  • miscellaneous
  • offset
  • properties
  • selectors
  • traversing
  • utilities

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

Преимущества, выгода и удобство JQuery

В этой статье рассказывается о том, что дает применение JQuery в ваших проектах. Допустим, вы хорошо знаете JavaScript, активно его используете, это добавляет вашим проектам живости, странички становятся более отзывчивыми и привлекательными по сравнению с голым HTML. Но однажды вы начинаете замечать, что ваш код тяжел, что вы пишете по сути одно и то же много и много раз, и что самое главное — у вас очень мало времени, а сделать хочется гораздо больше. Зреет вопрос — почему? Ответ очевиден: вы не используете фреймворк, а катаетесь на велосипедах собственного производства. Вам повезло, если вы ездите на них в свое удовольствие. Но если вы работаете на ответственных проектах, вас просто накажут рублем за неэффективность.

Попытаюсь убедить вас, как спасти свое время, как сделать разработку быстрее, и объяснить, что дает использование JQuery?

1) Скорость. Вы пишете меньше кода. Одной командой в JQuery можно сделать то, на что понадобится десятки строк простого JavaScript.

2) Понятность. Код и функции JQuery гораздо более удобны для чтения и понимания. Основная логика заключается в том, что сначала выбираем элементы, затем что-то с ними делаем. Поняв главное в JQuery, селекторы, мы можем делать впечатляющие вещи, и начинаем чувствовать всю магию на кончиках наших пальцев.

3) Кроссбраузерность. То, что вы пишете в JQuery с вероятностью 99% будет работать во всех современных браузерах. То, что вы пишете в простом JavaScript скорее всего не станет работать у Джорджа из Кентукки или Питера из Алабамы, просто потому, что вы привыкли использовать один браузер, он вам нравится, вы сделали заложниками своих привычек и пристрастий весь мир. Тетя Грэтта не виновата, что вы полюбили Chrome и ведете свою разработку только под ним. Она всю жизнь использует Firefox, который поставил ей ее сынок Ганс, и ей совершенно наплевать на вас и ваш продукт. Если он вдруг не запустился у нее, она просто будет использовать продукт вашего конкурента.

4) Легкость отладки и тестирования. Данный пункт вытекает из предыдущего. С JQuery вам нужно просто для очистки совести проверить ваш код в разных браузерах, и слегка поправить, вдруг что не так. Без него вы будете иметь десятки бессонных несчастливых дней, просто отлаживая и тестируя код, который вы уже написали и который уже работает в вашем любимом браузере. Когда вы потратите огромное количество времени впустую, вы поймете, о чем я. В это время программист, использующий JQuery, напишет больше полезного кода и получит большую зарплату, чем вы. А вас в конце спектакля отправят в отставку.

5) Возможности. Используя JQuery, вы можете подключать множество стандартных компонентов, называемых плагинами. Эти плагины можно по-своему оформлять, и они также будут работать во всех браузерах. Вам надо быстро сделать красивую фото-галерею? Пожалуйста, есть fancybox. Нужен выбор дат? У JQuery есть datepicker. Вам нужен пердожопль? Скорее всего, он тоже есть в арсеналах JQuery. Любая вещь, которая вам нужна, уже сделана, вам нужно только ее подключить и настроить. Представьте, сколько времени вы сэкономите. Вы сможете освободить себя и в 10 раз чаще гладить свою кошку.

6) Поддержка. JQuery разрабатывается уже давно, разные версии JQuery совместимы друг с другом, над этим продуктом трудятся тысячи программистов. Позвольте им писать за вас. Вы будете использовать результаты их труда, а свои велосипеды выкиньте и не позорьтесь. Даже Google использует JQuery, это уже говорит о том, что этот фреймворк прочно застолбил себе место под солнцем и ваш код будет радовать людей долгое время.

7) Конкурентоспособность. Программист, использующий и знающий JQuery гораздо более высоко ценится на рынке труда.

Вы все еще читаете? Вам мало обоснований выгод от использования JQuery? Я бы на вашем месте бросил все дела и принялся за изучение этой поистине революционной технологии.

Что такое jQuery?

Дата публикации: 2016-12-05

От автора: приветствую вас, друзья. В этой статье мы с вами начнем знакомиться с замечательной и популярнейшей javascript библиотекой – jQuery. Мы узнаем, для его она нужна и чем может помочь нам в работе, а также научимся подключать библиотеку jQuery к нашему проекту.

Итак, что же такое jQuery. jQuery – это javascript библиотека, т.е. библиотека, написанная на языке JavaScript. Проще говоря, это некий набор готовых функций, которые упрощают жизнь разработчика и написание кода на JavaScript.

Если вы не забыли JavaScript, тогда должны помнить, как непросто выбрать элементы на странице, чтобы затем манипулировать ими. Вспомните все эти длинные названия методов: getElementById, getElementsByClassName и т.п. Писать эту связку слов долго и неудобно на самом деле. Библиотека jQuery позволяет сделать то же самое гораздо проще и понятнее. Сравните хотя бы вот эти две строчки кода:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Обе строки выберут один и тот же элемент – параграф с указанным идентификатором. Но, согласитесь, вторая строка гораздо короче и, что главное, понятнее. Кстати, ее синтаксис, скорее всего, вам мог что-то напомнить. Верно, это CSS селектор — #p – выборка элемента с указанным ID. jQuery для выборки элементов использует тот же синтаксис, что использует и CSS, поэтому если вы знаете CSS – вам будет гораздо проще понять и работать с jQuery. Это дополнительный плюс.

Однако, jQuery хорош не только тем, что обеспечивает выборку любого элемента на странице, при этом выборку гибкую. Используя jQuery вы получаете еще ряд плюсов по сравнению с нативным JS. Вот некоторые из них:

простая работа с событиями;

удобная работа с AJAX (асинхронные запросы к серверу);

удобные методы для работы с эффектами (скрытие / появление элементов с добавлением визуальных эффектов);

и главный плюс – тысячи готовых плагинов на любой вкус (галереи, слайдшоу, работа с формами и другими элементами страницы).

На сегодняшний день знание и работа с библиотекой jQuery – это фактически стандарт для любого веб-разработчика. Без нее не обходится практически ни один проект в сети, поскольку jQuery реально упрощает написание кода на JavaScript.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Давайте же попробуем подключить библиотеку jQuery к нашей странице, тем более что сделать это очень просто. Первый способ – локальное подключение. Заключается он в том, что мы скачиваем jQuery в наш проект и подключаем его. Идем на официальный сайт jQuery и скачиваем актуальную версию библиотеки. На момент написания статьи это версия 3.1.1.

Обратите внимание, мы можем скачать сжатую и несжатую версию библиотеки. Чем они отличаются?

Если мы скачаем обе версии библиотеки, то увидим, что они отличаются весом. Сжатая версия весит 84 Кб, несжатая – 260 Кб. Разница в том, что из сжатой версии убрали все пробелы и переводы строк, а также сократили все имена переменных. В остальном – никакой разницы, т.е. обе версии библиотеки одинаковы и выполняют одну и ту же работу. Рекомендую подключать сжатую версию, поскольку она весит меньше и, следовательно, загрузится быстрее. А зачем же тогда нужна несжатая версия – спросите вы? Она нужна для разработчиков, т.е. для тех, кто захочет заглянуть внутрь библиотеки, чтобы изучить ее детальнее.

3.10. Введение в jQuery

jQuery — библиотека JavaScript, содержащая в себе готовые функции языка JavaScript, все операции jQuery выполняются из кода JavaScript.

Библиотека jQuery производит манипуляции с html-элементами, управляя их поведением и используя DOM для изменения структуры веб-страницы. При этом исходные файлы HTML и CSS не меняются, изменения вносятся лишь в отображение страницы для пользователя.

Для выбора элементов используются селекторы CSS. Выбор осуществляется с помощью функции $() . При вызове функция $() возвращает новый экземпляр объекта JQuery, который оборачивает ноль или более элементов DOM и позволяет взаимодействовать с ними различными способами.

Выполнение различных сценариев возможно только после окончания загрузки структуры документа document , когда браузер преобразует html-код страницы в дерево DOM. Управление процессом загрузки обеспечивает конструкция

Сначала производится обертывание экземпляра document в функцию jQuery() , после применяется метод ready() , которому передается функция function() <. >, исполняемая после загрузки документа.

На практике обычно используется сокращенная форма такой записи jQuery(function() <. >); , или $(function() <. >); .

Для хранения информации при работе с библиотекой jQuery используются переменные JavaScript. В переменных могут храниться элементы. Имена переменных, предназначенных для хранения возвращаемых элементов, начинаются со знака $ , например:

Для хранения нескольких элементов используются массивы JavaScript:

Правила работы с библиотекой jQuery

1. Как добавить jQuery на веб-страницу

Добавить библиотеку jQuery на свою веб-страницу можно двумя способами:

Использовать версию файла jQuery, размещенную на ресурсах Google, Microsoft или jQuery.com.
Данный метод использует «Сеть дистрибуции контента» (CDN, content distribution network), т.е. файл jQuery расположен на другом веб-сайте, который при запросе пользователем отправляет данный файл на его компьютер. Очевидные преимущества данного способа — снижение нагрузки на собственный веб-сервер и ускорение загрузки файла в силу разветвленности сети серверов дистрибьютора.

Чтобы воспользоваться данным способом, необходимо перейти по одной из ссылок:
Google CDN
Microsoft CDN
CDNJS CDN
После перехода на сайт ресурса вам потребуется всего лишь скопировать ссылку на jQuery-файл и добавить её на свою веб-страницу между тегами . В результате у вас должно получиться, например,

Загрузить последнюю версию библиотеки jQuery с официального сайта. Для этого вам необходимо перейти по адресу jQuery.com и выбрать интересующую вас версию библиотеки. Для загрузки предлагается две версии jQuery-файла — минимизированный и несжатый. Размер несжатого файла около 300 Кб, он содержит комментарии, поэтому его лучше использовать с целью разработки и отладки кода.
Минимизированная версия файла весит около 100Кб, в ней удалены все комментарии и ненужные пробелы, что ускоряет загрузку файла браузером.

Для загрузки нужно перейти по ссылке, и в открывшемся окне щелкнуть правой кнопкой мыши и выбрать «Сохранить как …». После этого поместить файл в нужную папку (обычно для этого используется папка «scripts») и добавить его на вашу страницу:

2. Правила добавления jQuery на страницу

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

3. Как создать новый html-элемент

Создать пустой html-элемент, например, блок, можно несколькими способами:

1) с помощью краткой формы записи $(«

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

При создании нового элемента методу $() можно передать второй параметр в виде объекта JavaScript, определяющий дополнительные атрибуты элемента:

Таким образом создается элемент с заданными атрибутами и включается в дерево DOM.

15 важных советов и рекомендаций в использовании jQuery для разработчиков

В данной статье мы рассмотрим 15 jQuery-методик, которые будут полезными для эффективного использования данной библиотеки.

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

1) Используйте последнюю версию jQuery

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

Вы можете использовать jQuery непосредственно с серверов Google, которые предоставляют бесплатный CDN хостинг для JavaScript-библиотек.

Последний пример будет автоматически включать в себя последнюю версию 1.6.x, как только она будет доступна, но, как было отмечено в css-tricks.com (eng.) , она кэшируется только в течение часа, поэтому желательно не использовать ее в реализации проекта.

2) Создавайте упрощенные селекторы

До недавнего времени получение доступа к DOM элементам с помощью jQuery представляло из себя сочетание строк селекторов, JavaScript соединял и включал в себя такие методы как: getElementById() , getElementsByTagName() и getElementsByClassName() . В настоящее время все основные браузеры поддерживают querySelectorAll() , который понимает селекторы запросов CSS, что дает значительный прирост производительности (eng.) .

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

Выборка по id — наиболее быстрый вариант. Если вы хотите произвести выборку по имени класса, напишите его с тегом – $(‘li.selected’) . Данные оптимизации касаются, в основном, старых браузеров и мобильных устройств.

Доступ к DOM-дереву всегда будет самой медленной частью каждого JavaScript-приложения, поэтому минимизация данного процесса выгодна. Один из способов — кэширование результатов, которое предоставляет jQuery. Переменная, которую вы зададите, будет содержать jQuery объект, к которому вы сможете получить доступ позже в вашем коде.

Стоит отметить тот факт, что jQuery предоставляет большое количество дополнительных селекторов (eng.) для удобства, такие как: :visible , :hidden , :animated и так далее, которые не являются действующими селекторами в CSS3. В результате, если вы используете их, библиотека не может использовать querySelectorAll() . Чтобы исправить ситуацию, можно сначала выбрать элементы, с которыми вы хотите работать, а затем фильтровать их, например:

Результаты, представленные выше, идентичны, с той разницей, что второй пример быстрее.

3) jQuery объекты как массивы

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

Веб-программирование. jQuery в веб-приложениях

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

Что такое jQuery в веб-приложениях?

Давайте разберемся. JQuery – библиотека JavaScript, фокусирующaяся на взаимодействии JavaScript и HTML. Была опубликована на компьютерной конференции «BarCamp» в Нью-Йорке Джоном Ресигом в 2006 году. В чем главное преимущество jQuery? Оно заложено на уровне ядра – это выбор элементов объектной модели документов. Кроме того, благодаря наличию плагинов, базовая функциональность jQuery можетбыть расширена.

Как начать работу с jQuery?

Для начала работы с jQuery необходимо скачать саму библиотеку из любого доступного источника. Далее ее необходимо инициализировать. Сделать это просто – необходимо добавить в заголовок html-документа следующий кусочек программного кода:

Каковы возможности jQuery?

Теперь, после инициализации, для использования доступны все возможности базового функционала jQuery, среди которых:

  • функции ядра;
  • работа с селекторами;
  • работа с атрибутами;
  • обход дерева DOM;
  • манипуляции элементами;
  • работа с CSS-свойствами элементов;
  • работа с событиями;
  • визуальные эффекты;
  • взаимодействие с ajax;
  • утилиты.

Для манипулирования нужными элементами страницы в Javascript есть несколько способов найти их на странице среди прочего множества объектов. Эти способы требуют запоминания большого количества информации, в то время как для поиска элемента при помощи jQuery необходимо лишь помнить ID элемента,
с которым вы хотите работать. Код обращения в общем случае будет выглядеть следующим образом: $(‘путь к элементу(элементам)’) Ключевой функцией в jQuery является функция $() – она тем или иным образом вызывается всеми методами jQuery.

Кто пользуется jQuery?

Согласно заявлениям вице-президентa по разработке Скотта
Гутри (Майкрософт), библиотека jQuery, станет основой ASP.Net Ajax Control Toolkit и будет поставляться в составе Visual Studio. Разработчик jQuery Джон Резиг заявил, что Нокиа тоже использует jQuery как часть своей платформы для разработки Web
Runtime, базирующейся на Webkit. Не отстают и российские компании, к примеру, Яндекс уже давно активно использует jQuery в своих приложениях.

Каковы преимущества jQuery?

Благодаря тому, что объем программного кода jQuery меньше, чем объем стандартного кода Javascript, сокращаются временные затраты на разработку элементов веб-страницы. Сам программный код более понятен по сравнению с JavaScript. Приведем пример. Существует некая таблица, нечетные строки которой окрашены
отличным от основного цветом. Предположим, что существует также некая таблица стилей CSS, в которой уже определен класс (в примере, «odd») для такого стиля. Для реализации этого эффекта необходимо наделить нечетные строки таблицы данным классом. В реализации на чистом Javascript программный код будет выглядеть так:

С применением jQuery реализация приобретет следующий вид:

Как показывает данный пример, реализация эффекта при помощи jQuery выглядит более рационально по сравнению с Javascript. Большое количество плагинов позволяет реализовать практически любой эффект или действие. Для создания простого Ajax-запроса требуется всего около пяти строк кода, что значительно упрощает использование этой технологии.

jQuery

Теория без практики мертва. И код jQuery оставался бы просто кодом, если бы его широко не использовали разработчики веб-приложений. Ведь и красивые выпадающие меню, и анимация графики, и плавные переходы, всплывающие подсказки и многое-многое другое — все это jQuery. Бесспорно, что и просто использование языка Javascript, без библиотеки jQuery, позволяет получить все вышеуказанные эффекты, однако именно применение jQuery делает программный код более гибким, понятным, удобочитаемым и значительно сокращает временные затраты на разработку веб-приложений.
Скачать библиотеку jQuery

Ссылка на основную публикацию