jquery — вопросы с ответами

jQuery – это наверное одна из самых популярных библиотек JavaScript, позволяющая вам быстро приступить к работе, обрабатывая многие нудные детали программирования на JavaScript за вас. jQuery – девиз которого «пиши меньше, делай больше» – делает программирование увлекательным, быстрым и полезным. С помощью jQuery вы можете за одну строчку кода достичь десятков (если не больше) строк программирования на чистом JavaScript.

Библиотеки JavaScript

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

Библиотека JavaScript – это сборник кода JavaScript, который предоставляет простые решения для многих часто встречающихся задач JavaScript. Думайте об этом как о коллекции предварительно написанных функций JavaScript, которые вы добавляете на свою веб-страницу. Эти функции облегчают выполнение общих задач. Часто у вас будет возможность заменить многие строки вашего собственного JavaScript-кода (и часы, необходимые для их тестирования) одной функцией из библиотеки JavaScript. Существует множество библиотек JavaScript, и многие из них помогают создавать крупные веб-сайты, такие как Yahoo!, Amazon, CNN, Apple и Twitter.

jQuery считается одной из самых популярных таких библиотек и добилась она этого благодаря своим преимуществам:

  • Относительно небольшой размер файла. Сжатая версия библиотеки составляет всего около 96 КБ для версии 1.11 и 83 КБ для версии 2.1. (Если ваш веб-сервер использует сжатие "gzip", вы можете уменьшить размер файла аж до 38 КБ!);
  • Дружелюбный к веб-дизайнерам. JQuery не считает вас за ученого. Он использует возможности CSS, о которых знают большинство веб-дизайнеров;
  • Проверенный и верный инструмент. jQuery используется на миллионах сайтов, включая многие популярные веб-сайты с высокой посещаемостью, такие как Pinterest, MSN.com, Amazon, Microsoft.com, Craigslist и ESPN. Фактически, он используется на более чем 57 процентах сайтов по всему миру. Тот факт, что jQuery настолько популярен, является свидетельством того, насколько он хорош;
  • Он бесплатен. А это из самых любимых наших аргументов;
  • Большое сообщество разработчиков. Пока вы это читаете, множество людей работают над проектом jQuery: пишут код, исправляют ошибки, добавляют новые функции и обновляют веб-сайт документацией и учебными пособиями. Библиотека JavaScript, созданная одним программистом (или предоставленная одним автором), может легко исчезнуть, если программист (или автор) устает от проекта. С другой стороны, jQuery просуществует долгое время, ведь он разрабатывается усилиями программистов по всему миру. Даже крупные компании, такие как Microsoft и Adobe, предоставляют своих инженеров для помощи в написании программного кода. Это как если бы куча программистов писали бы JavaScript-код для вас за бесплатно;
  • Плагины, плагины и еще раз плагины. jQuery позволяет другим программистам создавать подключаемые модули – дополнительные JavaScript-программы, которые работают вместе с jQuery и добавляют в него новые возможности, эффекты или функции на веб-страницу. Буквально тысячи разнообразных плагинов доступны для интеграции с jQuery.

Установка jQuery

jQuery – это просто набор кода JavaScript во внешнем файле JavaScript. Как и любой другой внешний файл JavaScript, вам необходимо связать его с вашей веб-страницей. Однако, поскольку jQuery очень популярен, у вас есть несколько возможностей прикрепления его на веб-страницу: вы можете использовать версию, размещенную в Google, Microsoft или jQuery.com или же можете загрузите файл jQuery на свой компьютер и уже после добавить его на веб-сайт.

Первый метод использует CDN или сеть распространения контента. То есть на другом веб-сайте размещается файл jQuery и отправляется всем, кто его запрашивает. У этого подхода есть несколько плюсов: во-первых, вы можете сэкономить веб-серверу несколько миллисекунд, позволяя Google, Microsoft или jQuery обрабатывать передачу файла посетителям вашего сайта. Кроме того, CDN имеет дополнительное преимущество, поскольку серверы расположены по всему миру. Так что, если кто-то в Сингапуре посетит ваш сайт, он получит файл jQuery с сервера, который, вероятно, намного ближе к нему, чем ваш веб-сервер, а это значит, что он получит файл быстрее, и ваш сайт отобразится тоже намного быстрее. И, наконец, поскольку другие дизайнеры также используют этот CDN, весьма вероятно, что кто-то, посетивший ваш сайт, уже сохранил файл jQuery в кэше своего браузера. Поскольку он уже загрузил файл jQuery из Google при посещении другого сайта, ему не нужно будет делать этого снова при посещении вашего сайта.

Однако есть и несколько недостатков в использовании CDN: во-первых, чтобы этот метод работал, пользователи должны быть подключены к интернету. Это становится проблемой, если вам нужно убедиться в том, что ваш сайт работает в автономном режиме, например, в киоске в музее или во время демонстрации программирования в классной комнате без интернета. В этом случае вам нужно будет скачать файл jQuery с jQuery.com и добавить его на свой веб-сайт. Добавление собственного файла jQuery также гарантирует, что ваш сайт продолжит работу, если серверы CDN выйдут из строя (Впрочем, если серверы Google когда-либо выйдут из строя, в мире могут возникнуть более серьезные проблемы, чем работа вашего веб-сайта).

Добавление jQuery на страницу

Если вы используете одну из CDN-версий jQuery, вы можете указать на нее с помощью одного из фрагментов кода. Например, чтобы использовать версию jQuery для Google CDN, вы должны добавить теги <script> в заголовок страницы следующим образом:

После того, как вы загрузили jQuery на свой компьютер, вы сообщаете веб-странице, что хотите использовать его. Файл jQuery – это просто внешний файл .js, поэтому вы присоединяете его, как и любой внешний файл JavaScript. Например, вы сохранили файл jquery.js в папке с именем js в корневой папке вашего сайта. Чтобы прикрепить файл к домашней странице, вы должны добавить следующий тег сценария в ее заголовок:

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

Второй набор тегов <script> содержит любые элементы программирования, которые вы хотите добавить на определенную веб-страницу; однако вы наверняка задаетесь вопросом, что это за $(document).ready()? Функция $(document).ready() – это интегрированная функция jQuery, которая ждет, пока HTML-страница загрузится, прежде чем запустить ваш скрипт.

Зачем это делать? Потому что большая часть программирования на JavaScript направлена на манипулирование содержимым веб-страницы: например, анимация div, постепенное исчезновение изображения, отображение меню, когда посетитель перемещается по ссылке и так далее. Чтобы сделать что-то веселое и интерактивное с элементом страницы, JavaScript должен выбрать его. Однако JavaScript не может выбрать тег HTML, пока веб-браузер не загрузит его. Веб-браузер немедленно запускает любой JavaScript, с которым он сталкивается, поэтому остальная часть страницы не загружается немедленно.

Несколько вещей, о которых не стоит забывать

  • Ссылка на файл jQuery должна предшествовать любому программированию, которое использует jQuery. Другими словами, не помещайте никакие другие теги скрипта перед тегом <script>, который загружает jQuery.
  • Помещайте свой JavaScript-код после любых таблиц стилей CSS (как связанных, внешних таблиц стилей, так и внутренних). Поскольку программирование jQuery часто ссылается на стили из таблицы стилей, вы должны поместить свое программирование JavaScript после того, как веб-браузер загрузит любые стили. Хорошее практическое правило – размещать свои программы на JavaScript (все свои теги <script>) после любого другого содержимого внутри тега <head>, но перед закрывающим тегом </head>.
  • Добавьте комментарий JavaScript – например, //end ready – после }); это отмечает конец функции ready(). Например:

Лучшие плагины для jQuery

Effect

Effect – это простой плагин, который позволяет назначать несколько эффектов анимации для элемента на веб-странице. Нажатие назначенной кнопки с выбранным желаемым эффектом приведет к тому, что элемент страницы будет вести себя по-разному: отскок, исчезновение в виде сгиба, скольжение, исчезновение и т. д.

Autocomplete

Вы знаете, что на панели поиска на крупных веб-сайтах, таких как Google.com, есть функция автозаполнения, которая начинает предлагать варианты завершения ввода текста? Вы можете добавить одну из этих красот JavaScript в свой собственный проект с помощью этого плагина автозаполнения jQuery.

ScrollMagic

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

blueimp Gallery

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

Slider

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

15 ответов
Предположим, что я знаком с разработкой клиентских приложений в jQuery, но теперь я хотел бы начать использовать AngularJS. Можете ли вы описать сдвиг парадигмы, который необходим? Вот несколько вопросов, которые могут помочь вам сформировать ответ: Как мне создавать и создавать клиентские веб-прил...
21 фев. 2013, в 02:18
18 ответов
Итак jQuery 1.6 имеет новую функцию prop(). $(selector).click(function(){ //instead of: this.getAttribute('style'); //do i use: $(this).prop('style'); //or: $(this).attr('style'); }) или в этом случае они делают то же самое? И если мне нужно переключиться на использование pr...
dom
attr
prop
03 май 2011, в 21:22
27 ответов
Как обновить страницу с помощью jQuery?
reload
refresh
23 март 2011, в 12:07
11 ответов
Я пытаюсь отправить данные из формы в базу данных. Вот форма, которую я использую: <form name="foo" action="form.php" method="POST" id="foo"> <label for="bar">A bar</label> <input id="bar" name="bar" type="text" value="" /> <input type="submit" value="Send" /&g...
15 фев. 2011, в 13:11
13 ответов
Когда я хочу, чтобы другие обработчики событий выполнялись после запуска определенного события, я могу использовать один из двух методов. Я буду использовать jQuery в примерах, но это относится и к plain-JS: 1. event.preventDefault() $('a').click(function (e) { // custom handling here e.pre...
javascript-events
event-handling
event-propagation
31 авг. 2009, в 13:28
58 ответов
Мне нужно проверить checked свойство флажка и выполнить действие на основе проверенного свойства с помощью jQuery. Например, если установлен флажок age, тогда мне нужно показать текстовое поле для ввода возраста, иначе скройте текстовое поле. Но следующий код возвращает false по умолчанию: if ($(...
dom
checkbox
23 май 2009, в 15:48
33 ответа
У меня есть два переключателя и вы хотите опубликовать значение выбранного. Как я могу получить значение с помощью jQuery? Я могу получить все из них вот так: $("form :radio") Как узнать, какой из них выбран?
radio-button
jquery-selectors
27 фев. 2009, в 20:41
14 ответов
Я ищу метод вставки массива JavaScript в стиле: arr.insert(index, item) Предпочтительно в jQuery, но любая реализация JavaScript будет делать в этот момент.
arrays
insert
25 фев. 2009, в 15:21
80 ответов
Как перенаправить пользователя с одной страницы на другую с помощью jQuery или чистого JavaScript?
redirect
02 фев. 2009, в 11:11
38 ответов
Я хотел бы сделать что-то подобное, чтобы отметить checkbox с помощью jQuery: $(".myCheckBox").checked(true); или $(".myCheckBox").selected(true); Существует ли такая вещь?
checkbox
checked
selected
08 янв. 2009, в 22:27
56 ответов
Можно переключить видимость элемента, используя функции .hide(), .show() или .toggle(). Как бы вы протестировали, если элемент виден или скрыт?
dom
visibility
07 окт. 2008, в 13:38
33 ответа
Каков наилучший метод в jQuery для добавления дополнительной строки в таблицу в качестве последней строки? Это приемлемо? $('#myTable').append('<tr><td>my data</td><td>more data</td></tr>'); Существуют ли ограничения на то, что вы можете добавить в таблицу, подоб...
html-table
04 окт. 2008, в 20:56
33 ответа
Я хотел бы загрузить файл асинхронно с помощью jQuery. Это мой HTML: <span>File</span> <input type="file" id="file" name="file" size="10"/> <input id="uploadbutton" type="button" value="Upload"/> И вот мой код Jquery: $(document).ready(function () { $("#uploadbutton").cl...
asynchronous
upload
03 окт. 2008, в 11:08
78 ответов
У меня есть некоторые HTML-меню, которые я показываю полностью, когда пользователь нажимает на заголовок этих меню. Я хотел бы скрыть эти элементы, когда пользователь щелкает за пределами области меню. Что-то вроде этого возможно с jQuery? $("#menuscontainer").clickOutsideThisElement(function() { ...
30 сен. 2008, в 13:03
40 ответов
Как проверить наличие элемента в jQuery? Текущий код, который у меня есть, следующий: if ($(selector).length > 0) { // Do something } Есть ли более элегантный способ приблизиться к этому? Возможно, плагин или функция?
27 авг. 2008, в 19:53
Наверх
Меню