Различия

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


Предыдущая версия
—jquery [2025/07/06 12:39] (текущий) – внешнее изменение 127.0.0.1
Строка 1: Строка 1:
 +====== jQuery ======
 +{{htmlmetatags>
 +metatag-description=(jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. )
 +}}
  
 +  * [[Селекторы]] CSS, jQuery.
 +  * [[jQuery Ui]] библиотека для создания пользовательского интерфейса в Веб- приложениях
 +  * [[http://www.jacklmoore.com/colorbox/|Colorbox - a jQuery lightbox]] - cоздание модальных окон и слайдшоу
 +  * [[https://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 Masked Input]]
 +
 +[[https://jquery.com|jQuery]] - [[фреймворк|фреймворк]] фокусирующаяся на взаимодействии [[JavaScript|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 bash>
 +<!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="https://code.jquery.com/jquery-3.6.1.min.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>

📌 Удобный подбор VPS по параметрам доступен на DIEGfinder.com - официальном инструменте проекта DIEG. Это часть единой экосистемы, созданной для того, чтобы помочь быстро найти подходящий VPS/VDS сервер для любых задач хостинга.

📌 Для тестирования скриптов, установщиков VPN и Python-ботов рекомендуем использовать надежные VPS на короткий срок. Подробнее о быстрой аренде VPS для экспериментов - читайте здесь.

💥 Подпишись в Телеграм 💥 и задай вопрос по сайтам и хостингам бесплатно!

7 Самых Популярных Статей

  1. Как запустить скрипты и веб-приложения на Python
  2. Что такое страны TIER 1,2,3
  3. 7 способов сравнения файлов по содержимому в Windows или Linux
  4. Установка и тестирование веб-панели HestiaCP
  5. Nginx простые примеры конфигурации
  6. top, htop, atop определение загрузки ОС (Load average, LA)
  7. Использование rsync в примерах

7 Самых Популярных Обзоров

  1. Хостинг для Python-скриптов и приложений
  2. ТОП 4 лучших антидетект браузеров (Бесплатные & Платные)
  3. Подборка купонов (промокоды) на хостинг, антидетект браузеры
  4. Обзор THE.Hosting (PQ Hosting): надежный хостинг с профессиональной поддержкой
  5. Хостинг в России
  6. Хостинг в Европе
  7. Обзор браузера Dolphin {anty} для мультиаккаунтинга