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

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


Боковая панель

Связь

jquery

jQuery

Homepage: jQuery

jQuery - Фреймворк фокусирующаяся на взаимодействии JavaScript и HTML.

Самым распространенным в данный момент языком программирования на клиентской части является JavaScript. Появилось множество JS- библиотек, позволяющих реализовать красивые графические эффекты, анимацию, общение с сервером без перезагрузки страницы, в общем, инструментарий для облегчения жизни веб-разработчикам. Многие из них отличает либо большая сложность, либо ограниченность функциональности. Наибольшую популярность у разработчиков завоевали лишь несколько библиотек, одной из которых является Фреймворк JQuery.

Конкурирующие продукты, например, Prototype, Mootools, ExtJS.

К явным плюсам JQuery можно отнести: небольшой объем и совместимость с основными браузерами.

И еще одно несомненное преимущество – это то, что библиотека может претендовать на то, чтобы стать стандартом в веб-разработке. Ведь не спроста такой монстр как Microsoft собирается включить ее в состав своего набора инструментов Microsoft Visual Studio.

Подключение библиотеки:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

Синтаксис jQuery

Кавычки: Строка может быть определена с помощью одинарных или двойных кавычек. Вы можете вставлять одинарные кавычки внутри двойных и наоборот. Если Вы используете двойные кавычки внутри двойных, то они должны экранированы обратным слешем.

Использование jQuery

<!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>

Функция $(document).ready()

Функция $(document).ready() - является обработчиком готовности документа.

Обработчик onload объекта windows для выполнения назначенной им функции, требует полную загрузку документа. То есть броузер задерживает выполнение обработчика onload не только до момента создания полного дерева DOM, но также ждет, пока будут загружены все изображения и другие внешние ресурсы и страница отобразиться в окне броузера. В результате пользователь может визуально заметить задержку между тем моментом, когда он впервые увидит страницу, и тем, когда будет выполнен сценарий onload.

Библиотека jQuery для решения проблемы задержки onload, предоставляет способ запуска программного кода сразу после загрузки дерева DOM и до загрузки внешних изображений. Сначала производится обертывание экземпляра document документа в функцию jQuery(), а затем применяется метод ready(), которому передается функция для исполнения после того, как документ станет доступен для манипуляции. Вызывая функцию jQuery() или $(), мы тем самым предписываем броузеру дождаться, пока дерево DOM (и только дерево DOM) будет полностью загружено, прежде чем выполнить этот код. В одном и том же HTML документе это прием может использоваться многократно и броузер выполнит все указанные функции в порядке следования объявлений, в отличии от обработчика onload, который позволяет указать только одну функцию.

  • Пример. Несколько вариантов записи. Формальный синтаксис:
jQuery(document).ready(function() {
alert('Можно грузить внешние картинки!');
});
jQuery(function() {
alert('Можно грузить внешние картинки!');
});
$(document).ready(function() {
alert('Можно грузить внешние картинки!');
});
$(function() {
                alert('Можно грузить внешние картинки!');
});

Полный пример.

<!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>

$.getScript

Функция $.getScript(url, callback) - загружает сценарий, указанный в параметре url, выполняя запрос GET к указанному серверу. В случае успеха вызывается функция обратного вызова, указанная в параметре callback. Функция обратного вызова зачатую необязательна, поскольку в случае успешной загрузки автоматически выполнится загружаемый сценарий.

Подключение обработчика событий $.bind() и $.on()

Метод on() введен в jQuery-1.7, чтобы объединить три метода библиотеки, устанавливающие обработчики событий на элементы страницы: .bind(), .delegate(), .live(). Сами эти методы считаются теперь устаревшими, хотя еще поддерживаться. Установить обработчик, срабатывающий только один раз, по прежнему можно только с помощью отдельного метода .one(). Убрать установленный обработчик можно с помощью метода off().

Функция $.bind служит для подключения обработчика(ов) событий. Зачастую обработчик события объявляют как безымянную функцию, но можно присвоить и именованную функцию.

  • Пример. Подключается обработчик события (именованная (и значит глобальная) функция sendFrWhois) к форме с id="fridwhois". В функцию передается дополнительный параметр form с значением 'this.form'
$('#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"/>
}
  • Пример. Подключить безымянную функцию на обработчик события keyup
    $(document).ready(function(){
        $('#in_trans').keyup(function(e) {
            if(e.keyCode == 13) {
                alert('Key 13');
            }
        });
    
    });

Анимация

  • Простая анимация, в которой скрытый элемент сначала показывается за счет расширения, а потом, когда этот процесс завершится, снова сжимается.
// Реализация в jQuery
$("#side").slideDown( 1000, function(){
$(this).slideUp( 1000 );
});
  • Еще одна простая анимация, в которой высота, ширина и непрозрачность элемента одновременно сокращаются (или уменьшаются), чем достигается довольно интересный эффект скрытия.
$("#body").hide( "fast" );

Функции jQuery

  • event.preventDefault() - метод отменяет действие по умолчанию, например для тега <form></form>.

jQuery AJAX

В jQuery существуют вспомогательные функции. Они принадлежат пространству имен jQuery/$, а не Object Window.

  • Функция $.noop() ничего не делает. Многие методы jQuery принимают в качестве параметров функцию обратного вызова. Функция $.noop() может служить значением по умолчанию, когда пользователь не указывает собственную функцию обратного вызова.

Взаимодействие с AJAX:

  • Вспомогательная функция jQuery.get() инициирует GET запрос.
  • Вспомогательная функция jQuery.getJSON() инициирует GET запрос к серверу, ответ сервера интерпретируется как строка в формате JSON. Полученные из нее данные передаются callback функции.
  • Вспомогательная функция 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.
    1. Ссылка jQuery.ajax
    2. Ссылка jQuery.ajax()

.load()

  • Метод jQuery .load()(url, [data], [complete(responseText, textStatus, XMLHttpRequest)]) инициирует запрос Ajax по заданному URL. Если указана функция обратного вызова (callback), она будет вызвана по завершению запроса. Если в качестве параметров передается объект или массив, запрос будет выполнять метод POST HTTP, в противном случае запрос GET. Загружает содержимое в виде HTML.
    $('#result').load('ajax/test.html', function() {
      alert('Load was performed.');
    });
  • Обновить часть страницы без перезагрузки. Каждые 5 секудн запращивает index.php, из ответ сервера данные выбираются только с переданным id и при помощи метода и вставляется в элемент div c id="acalls"
            <div id="acalls"></div>
            <script>setInterval(function () {
                    $("#acalls").load("index.php #acalls");
                }, 5000);</script>

$.parseJSON или JSON.parse

Современные браузеры для преобразования строк в формате JSON, предоставляют метод JSON.parse(). Так как есть вероятность того, что пользовательский браузер устаревший или попросту не имеет метода JSON.parse(), для этого случая в jQuery разработана вспомогательная функция $.parseJSON(). При использовании функции $.parseJSON(), jQuery будет пытаться в первую очередь использовать встроенный в браузер метод JSON.parse и только в том случае если этой поддержки нет, будут использованы средства предоставляемые JavaScript.

  • Функция $.parseJSON() - выполняет синтаксический анализ одной строки в формате JSON и возвращает результат. Она очень требовательна к формату задания JSON- данных. Отклонения от этого формата могут привести к возникновению JavaScript исключений. <note important>Использовать нужно только двойные кавычки.</note> Пример правильных JSON строк:
{"temp01" : "value01"}
{"temp": 777}
var obj = jQuery.parseJSON('{"name":"John"}');
alert(obj.name); // будет выведено John
var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );  // будет выведено true
  • Функция $.getJSON служит прямым методом для загрузки данных в формате JSON
$.getJSON("json.php",
function(data){
$("#bar")
.css("background","yellow")
.html(data.var1+", "+data.var2);
});

Содержимое json.php:

{"var1":"value1","var2":777}

FAQ

  • Динамическое создание элементов с помощью jQuery. Помещаем созданный div в уже имеющийся элемент c id="content" на странице. После в новый div вставляем текст.
    $('#content').append('<div id="content_result" class="ui-corner-all"></div>')
    $('#content_result').html('Первый вариант записи создания динамического элемента при помощи jQuery.');
    var input = $('<div>', {
    	'id': 'content_result',
    'class': 'ui-corner-all'
    });
    $('#content').append(input); // Помещаем в слой "content"
    $('#content_result').html('Второй вариант записи создания динамического элемента при помощи jQuery.');
  • .trigger() Отправить первую форму на странице из JS скрипта без использования функции submit(). Не работает если форма с POST запросом
    $("form:first").trigger("submit")

    Вариант 2. В этом случае отправка привязывается к кнопке с типом submit

    <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;
            });
    });



jquery.txt · Последние изменения: 2017/07/28 07:40 (внешнее изменение)