Инструменты пользователя

Инструменты сайта


jquery

Различия

Здесь показаны различия между двумя версиями данной страницы.

Ссылка на это сравнение

jquery [2018/12/03 05:00] (текущий)
Строка 1: Строка 1:
 +====== 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>​
jquery.txt · Последние изменения: 2018/12/03 05:00 (внешнее изменение)