Различия

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

@@ Строка 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>

АйТи бубен

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

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

Различия

Инструменты страницы