|
|
|
jquery [2018/12/03 10:00]
|
jquery [2020/11/18 19:10] (текущий)
|
| | ====== jQuery ====== |
| | {{htmlmetatags> |
| | metatag-description=(jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. ) |
| | }} |
| |
| | |
| | Homepage: [[http://jquery.com|jQuery]] |
| | * [[Селекторы]] CSS, jQuery. |
| | * [[jQuery Ui]] библиотека для создания пользовательского интерфейса в Веб- приложениях |
| | * [[http://www.jacklmoore.com/colorbox/|Colorbox - a jQuery lightbox]] - cоздание модальных окон и слайдшоу |
| | * [[http://blog.jquery.com|Блог jQuery изменения в версиях]] |
| | * [[http://jquery.page2page.ru/|Документация jQuery и jQuery UI на русском]]+[[http://jquery.page2page.ru/tags/ifr.html|Карта функций]] |
| | * [[http://yeap.narod.ru/js/022.html|Подборка слайдеров контента на jQuery]]: Nivo Slider и другие. |
| | * [[http://2develop.ru/jquery/proverka-poley-s-pomoshtyyu-jquery.html|Проверка (валидация) полей с помощью JQuery]] с помощью [[http://bassistance.de/jquery-plugins/jquery-plugin-validation/|jQuery plugin: Validation]] |
| | * [[http://interestabout.blogspot.com/2011/07/jquery.html|jQuery. Проверить существование элемента на странице]] |
| | * [[http://ruseller.com/lessons.php?rub=32&id=665|Доступ к элементам контента с помощью jQuery]]:<file> |
| | html() для чтения и изменения HTML кода элемента |
| | text() для чтения и изменения текстового содержания элемента |
| | val() для чтения и изменения значений полей формы |
| | </file> |
| | * [[http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery|CDN Hosted jQuery]] - список контент-провайдеров [[wpru>CDN]]. |
| | |
| | **jQuery** - [[фреймворк]] фокусирующаяся на взаимодействии [[JavaScript]] и [[HTML5|HTML]]. |
| | |
| | Самым распространенным в данный момент языком программирования на клиентской части является JavaScript. Появилось множество JS- библиотек, позволяющих реализовать красивые графические эффекты, анимацию, общение с сервером без перезагрузки страницы, в общем, инструментарий для облегчения жизни веб-разработчикам. Многие из них отличает либо большая сложность, либо ограниченность функциональности. Наибольшую популярность у разработчиков завоевали лишь несколько библиотек, одной из которых является [[фреймворк]] JQuery. |
| | |
| | Конкурирующие продукты, например, Prototype, Mootools, ExtJS. |
| | |
| | К явным плюсам JQuery можно отнести: небольшой объем и совместимость с основными браузерами. |
| | |
| | И еще одно несомненное преимущество – это то, что библиотека может претендовать на то, чтобы стать стандартом в веб-разработке. Ведь не спроста такой монстр как Microsoft собирается включить ее в состав своего набора инструментов [[Visual Studio]]. |
| | |
| | Подключение библиотеки:<file> |
| | <!DOCTYPE html> |
| | <html> |
| | <head> |
| | <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> |
| | |
| | </file> |
| | |
| | ===== Синтаксис jQuery ===== |
| | |
| | <note>**Кавычки**: Строка может быть определена с помощью одинарных или двойных кавычек. Вы можете вставлять одинарные кавычки внутри двойных и наоборот. Если Вы используете двойные кавычки внутри двойных, то они должны экранированы обратным слешем.</note> |
| | |
| | ===== Использование jQuery ===== |
| | <file> |
| | <!DOCTYPE html> |
| | <html lang="ru"> |
| | <head> |
| | <meta name="keywords" content="HTML,CSS,XML,JavaScript" /> |
| | <meta name="author" content="darkfire" /> |
| | <meta charset="UTF-8" /> |
| | <title>jQuery</title> |
| | <script type="text/javascript" src="jquery.js"></script> |
| | </head> |
| | <body> |
| | <div> |
| | <h1>Использование jQuery</h1> |
| | </div> |
| | <div> |
| | <!-- Появляется скрытый div. Применяется визуальный эффект slideDown. --> |
| | <script type="text/javascript"> |
| | $(document).ready(function(){ |
| | $("#button").click(function(){ |
| | $("#panel").slideDown("slow"); |
| | }); |
| | <!-- Добавляет каждому абзацу событие mouseover--> |
| | $("p").mouseover(function () { |
| | $(this).css("color","red"); |
| | }); |
| | |
| | }); |
| | </script> |
| | </div> |
| | <a href="#" id="button">Отобразить панель</a> |
| | </div> |
| | <div id="panel" style="display:none; width:1500px; height:100px; background:pink;"> |
| | Привет! Hello! |
| | </div> |
| | <p>Просто абзац.</p> |
| | <p>Just roll the mouse over me.</p> |
| | <p>Or me to see a color change.</p> |
| | </body> |
| | </html> |
| | </file> |
| | ===== Функция $(document).ready() ===== |
| | Функция **$(document).ready()** - является обработчиком готовности документа. |
| | |
| | Обработчик onload объекта windows для выполнения назначенной им функции, требует полную загрузку документа. То есть броузер задерживает выполнение обработчика onload не только до момента создания полного дерева [[DOM]], но также ждет, пока будут загружены все изображения и другие внешние ресурсы и страница отобразиться в окне броузера. В результате пользователь может визуально заметить задержку между тем моментом, когда он впервые увидит страницу, и тем, когда будет выполнен сценарий onload. |
| | |
| | Библиотека [[jQuery]] для решения проблемы задержки onload, предоставляет способ запуска программного кода сразу после загрузки дерева [[DOM]] и до загрузки внешних изображений. Сначала производится обертывание экземпляра document документа в функцию jQuery(), а затем применяется метод ready(), которому передается функция для исполнения после того, как документ станет доступен для манипуляции. Вызывая функцию jQuery() или $(), мы тем самым предписываем броузеру дождаться, пока дерево DOM (и только дерево DOM) будет полностью загружено, прежде чем выполнить этот код. В одном и том же HTML документе это прием может использоваться многократно и броузер выполнит все указанные функции в порядке следования объявлений, в отличии от обработчика onload, который позволяет указать только одну функцию. |
| | * **Пример**. Несколько вариантов записи. Формальный синтаксис: |
| | <file> |
| | jQuery(document).ready(function() { |
| | alert('Можно грузить внешние картинки!'); |
| | }); |
| | </file> |
| | <file> |
| | jQuery(function() { |
| | alert('Можно грузить внешние картинки!'); |
| | }); |
| | </file> |
| | <file> |
| | $(document).ready(function() { |
| | alert('Можно грузить внешние картинки!'); |
| | }); |
| | </file> |
| | <file> |
| | $(function() { |
| | alert('Можно грузить внешние картинки!'); |
| | }); |
| | </file> |
| | Полный пример. |
| | <file> |
| | <!DOCTYPE html> |
| | <html lang="ru"> |
| | <head> |
| | <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> |
| | <script type="text/javascript"> |
| | $(function() { |
| | alert('Можно грузить внешние картинки!'); |
| | });</script> |
| | </head> |
| | <body> |
| | <div class="container"> |
| | |
| | </div> |
| | </body> |
| | </html> |
| | </file> |
| | ===== $.getScript ===== |
| | Функция **$.getScript(url, callback)** - загружает сценарий, указанный в параметре url, выполняя запрос GET к указанному серверу. В случае успеха вызывается функция обратного вызова, указанная в параметре callback. Функция обратного вызова зачатую необязательна, поскольку в случае успешной загрузки автоматически выполнится загружаемый сценарий. |
| | ===== Подключение обработчика событий $.bind() и $.on() ===== |
| | * [[http://jquery.page2page.ru/index.php5/On|.on()]] |
| | <note important> |
| | Метод on() введен в jQuery-1.7, чтобы объединить три метода библиотеки, устанавливающие обработчики событий на элементы страницы: .bind(), .delegate(), .live(). Сами эти методы считаются теперь устаревшими, хотя еще поддерживаться. Установить обработчик, срабатывающий только один раз, по прежнему можно только с помощью отдельного метода .one(). Убрать установленный обработчик можно с помощью метода off(). |
| | </note> |
| | Функция $.bind служит для подключения обработчика(ов) событий. Зачастую обработчик события объявляют как безымянную функцию, но можно присвоить и именованную функцию. |
| | |
| | * **Пример**. Подключается обработчик события (именованная (и значит глобальная) функция sendFrWhois) к форме с id="fridwhois". В функцию передается дополнительный параметр form с значением 'this.form' |
| | <file> |
| | $('#fridwhois').bind('submit', {form: 'this.form'}, sendFrWhois); |
| | |
| | function sendFrWhois(event) { |
| | alert(event.data.form); |
| | var inwh = document.getElementById('inwh'); |
| | alert(inwh.value);// выведем значение в Edit: <input placeholder="example.com" id="inwh"/> |
| | } |
| | </file> |
| | * **Пример**. Подключить безымянную функцию на обработчик события keyup<file> |
| | $(document).ready(function(){ |
| | $('#in_trans').keyup(function(e) { |
| | if(e.keyCode == 13) { |
| | alert('Key 13'); |
| | } |
| | }); |
| | |
| | }); |
| | </file> |
| | |
| | ===== Анимация ===== |
| | * Простая анимация, в которой скрытый элемент сначала показывается за счет расширения, а потом, когда этот процесс завершится, снова сжимается. |
| | <file> |
| | // Реализация в jQuery |
| | $("#side").slideDown( 1000, function(){ |
| | $(this).slideUp( 1000 ); |
| | }); |
| | </file> |
| | * Еще одна простая анимация, в которой высота, ширина и непрозрачность элемента одновременно сокращаются (или уменьшаются), чем достигается довольно интересный эффект скрытия. |
| | <file> |
| | $("#body").hide( "fast" ); |
| | </file> |
| | * [[http://truescript.net/blog/lightbox/17.html|Всплывающее окно на JQuery и CSS]] |
| | ====== Функции jQuery ====== |
| | * [[http://api.jquery.com/event.preventDefault/|event.preventDefault()]] - метод отменяет действие по умолчанию, например для тега <form></form>. |
| | ====== jQuery AJAX ====== |
| | * [[http://jquery.page2page.ru/index.php5/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82_jqXHR|Объект jqXHR]] |
| | * [[http://jquery.page2page.ru/index.php5/Ajax_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81_%D0%BC%D0%B5%D1%82%D0%BE%D0%B4%D0%BE%D0%BC_POST|Ajax запрос методом POST]]. [[http://api.jquery.com/jQuery.post/|jQuery.post()]] |
| | * [[http://jquery.page2page.ru/index.php5/Ajax-%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81|jQuery.ajax()]] |
| | |
| | В jQuery существуют вспомогательные функции. Они принадлежат пространству имен jQuery/$, а не [[Object Window]]. |
| | * [[http://jquery-docs.ru/Utilities/|Инструменты]] |
| | * Функция **$.noop()** ничего не делает. Многие методы jQuery принимают в качестве параметров функцию обратного вызова. Функция $.noop() может служить значением по умолчанию, когда пользователь не указывает собственную функцию обратного вызова. |
| | |
| | Взаимодействие с [[Ajax]]: |
| | * Вспомогательная функция **jQuery.get**() инициирует GET запрос. |
| | * Вспомогательная функция **jQuery.getJSON**() инициирует GET запрос к серверу, ответ сервера интерпретируется как строка в формате [[JSON]]. Полученные из нее данные передаются callback функции. |
| | * Вспомогательная функция **[[http://api.jquery.com/jQuery.post|jQuery.post]](url, [data], [success(data, textStatus, jqXHR)], [dataType]):jqXHR** инициирует POST запрос. jQuery.post возвращает экземпляр jqXHR (в версиях до jquery-1.5, вместо него использовался [[XMLHttpRequest]]). |
| | * url — url-адрес, по которому будет отправлен запрос. |
| | * data — данные, которые будут отправлены на сервер. Они должны быть представлены в форме объекта, в формате: {fName1:value1, fName2:value2, ...}. |
| | * success(data, textStatus, jqXHR) — пользовательская callback функция, которая будет вызвана после ответа сервера. |
| | * data — данные, присланные с сервера. |
| | * textStatus — статус того, как был выполнен запрос. |
| | * jqXHR — объект jqXHR (в версиях до jquery-1.5, вместо него использовался XMLHttpRequest) |
| | * dataType — ожидаемый тип данных, которые пришлет сервер в ответ на запрос. Необязательный параметр dataType может принимать одно из значений: html, text, xml, json, script, jsonp. |
| | * Вспомогательная функция **jQuery.ajax()** является универсальной для выполнения Ajax запросов. В конечном счете функции такие как jQuery.post, jQuery.get и др. основаны на функции jQuery.ajax. |
| | - Ссылка [[http://jquery-docs.ru/ajax/jquery-ajax/|jQuery.ajax]] |
| | - Ссылка [[http://api.jquery.com/jQuery.ajax/|jQuery.ajax()]] |
| | - [[http://jquery.page2page.ru/index.php5/Ajax-%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81|Ajax-запрос jQuery.ajax()]] |
| | |
| | ===== .load() ===== |
| | |
| | * Метод jQuery **[[http://api.jquery.com/load/|.load()]]**(url, [data], [complete(responseText, textStatus, XMLHttpRequest)]) инициирует запрос Ajax по заданному [[URL]]. Если указана функция обратного вызова (callback), она будет вызвана по завершению запроса. Если в качестве параметров передается объект или массив, запрос будет выполнять метод [[POST]] HTTP, в противном случае запрос [[GET]]. Загружает содержимое в виде HTML.<file javascript> |
| | $('#result').load('ajax/test.html', function() { |
| | alert('Load was performed.'); |
| | }); |
| | </file> |
| | * **Обновить часть страницы без перезагрузки**. Каждые 5 секудн запращивает index.php, из ответ сервера данные выбираются только с переданным id и при помощи метода и вставляется в элемент div c id="acalls" <file javascript> |
| | <div id="acalls"></div> |
| | <script>setInterval(function () { |
| | $("#acalls").load("index.php #acalls"); |
| | }, 5000);</script> |
| | </file> |
| | ====== $.parseJSON или JSON.parse ====== |
| | Современные браузеры для преобразования строк в формате [[JSON]], предоставляют метод JSON.parse(). Так как есть вероятность того, что пользовательский браузер устаревший или попросту не имеет метода JSON.parse(), для этого случая в jQuery разработана вспомогательная функция $.parseJSON(). При использовании функции $.parseJSON(), jQuery будет пытаться в первую очередь использовать встроенный в браузер метод JSON.parse и только в том случае если этой поддержки нет, будут использованы средства предоставляемые [[JavaScript]]. |
| | |
| | * Функция $.parseJSON() - выполняет синтаксический анализ одной строки в формате JSON и возвращает результат. Она очень требовательна к формату задания [[JSON]]- данных. Отклонения от этого формата могут привести к возникновению JavaScript исключений. <note important>Использовать нужно только двойные кавычки.</note> Пример правильных JSON строк: |
| | <file> |
| | {"temp01" : "value01"} |
| | {"temp": 777} |
| | </file> |
| | <file> |
| | var obj = jQuery.parseJSON('{"name":"John"}'); |
| | alert(obj.name); // будет выведено John |
| | </file> |
| | <file> |
| | var obj = jQuery.parseJSON('{"name":"John"}'); |
| | alert( obj.name === "John" ); // будет выведено true |
| | </file> |
| | * Функция **$.getJSON** служит прямым методом для загрузки данных в формате JSON |
| | <file> |
| | $.getJSON("json.php", |
| | function(data){ |
| | $("#bar") |
| | .css("background","yellow") |
| | .html(data.var1+", "+data.var2); |
| | }); |
| | </file>Содержимое json.php:<file> |
| | {"var1":"value1","var2":777} |
| | </file> |
| | ====== FAQ ====== |
| | * **Динамическое создание элементов с помощью jQuery.** Помещаем созданный div в уже имеющийся элемент c id="content" на странице. После в новый div вставляем текст.<file> |
| | $('#content').append('<div id="content_result" class="ui-corner-all"></div>') |
| | $('#content_result').html('Первый вариант записи создания динамического элемента при помощи jQuery.'); |
| | </file><file> |
| | var input = $('<div>', { |
| | 'id': 'content_result', |
| | 'class': 'ui-corner-all' |
| | }); |
| | $('#content').append(input); // Помещаем в слой "content" |
| | $('#content_result').html('Второй вариант записи создания динамического элемента при помощи jQuery.'); |
| | </file> |
| | |
| | * [[http://jquery.page2page.ru/index.php5/%D0%92%D1%8B%D0%B7%D0%BE%D0%B2_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D1%8F|.trigger()]] Отправить первую форму на странице из JS скрипта без использования функции submit(). Не работает если форма с POST запросом<file> |
| | $("form:first").trigger("submit") |
| | </file>Вариант 2. В этом случае отправка привязывается к кнопке с типом submit<file> |
| | <script type="text/javascript"> |
| | $(function() { |
| | $("td a").bind('click', function(){ |
| | var getvalue = $(this).html(); |
| | $("input[name=s_email]").val(getvalue); |
| | $("input[type=submit]").trigger("click"); |
| | return false; |
| | }); |
| | }); |
| | </file> |
