Jquery уроки примеры. Пример использования jQuery. Пример использования bind()

Используя jQuery Вы сможете создавать скрипты намного быстрее и эффективнее.

Что такое jQuery?

jQuery - это библиотека, которая значительно упрощает и ускоряет написание JavaScript кода.

Девиз jQuery "write less, do more" (пиши меньше, делай больше) отражает ее главное предназначение.

jQuery позволяет создавать анимацию, обработчики событий, значительно облегчает выбор элементов в DOM и создание AJAX запросов.

Данная библиотека работает со всеми браузерами (IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome ). Это значит, что Вам больше не нужно будет беспокоиться о кроссбраузерной совместимости JavaScript кода.

Для jQuery написано огромное количество плагинов, которые позволяют расширить ее возможности еще больше.

Пример использования jQuery

$(document).ready(function(){ $(":button").click(function(){ $(":button").hide(); $("#wrap1").addClass("add"); $("#wrap1").animate({height:280},2000); $("#wrap1").animate({width:400},2000); $("#wrap1").animate({padding:20},2000,function(){ $("#text1").hide(2000,function(){$("#text2").show(2000);}); }); }); });

Быстрый просмотр

Добавление jQuery на страницы

Для того, чтобы начать использовать jQuery необходимо:

Скачать ее с официального сайта . Существуют две версии jQuery: для использования в готовых приложениях (production) и для разработки (development). Версия для разработки содержит комментарии и структурированный код. В сокращенной версии нет комментариев и код в ней не структурирован зато она занимает меньше места и поэтому страницы с ней будут загружаться быстрее. После того, как Вы выберите подходящую версию нажмите на кнопку "Download (jQuery)"

Добавить ее на страницу . Для этого следующий код должен быть добавлен на страницу в секцию head:

Для тех кто по каким-либо причинам не может (или не хочет) скачивать jQuery предусмотрен альтернативный способ удаленного использования библиотеки предоставленный компанией Google.

Для того, чтобы использовать jQuery удаленно просто добавьте на страницу в секцию head следующий код:

Сделайте сами

Обратите внимание: при выполнении этого и следующих упражнений рекомендуем Вам выключить отладчики (такие как Firebug), которые могут выдавать подсказки. В ходе выполнения заданий Вы сами должны находить и исправлять ошибки в учебных целях.

Задание 1 на странице задан jQuery код, но он не работает потому, что к ней не подключен необходимый файл библиотеки jquery.js. Подключите jquery.js удаленно (воспользовавшись услугой Google), чтобы "починить" код.

10.03.17 14K

Функция each jQuery используется для перебора элементов объекта jQuery . Он содержит один или несколько элементов DOM и предоставляет все функции jQuery . Дополнительно jQuery предоставляет вспомогательную функцию с тем же именем, которая может быть вызвана без предварительного выбора или создания элементов DOM . Давайте узнаем об этом более подробно.

Синтаксис функции jQuery .each()

В следующем примере мы выбираем на веб-странице все элементы div и выводим индекс и идентификатор каждого из них. Возможный результат: “div0:header ”, “div1:body ”, “div2:footer ”. В примере используется функция jQuery each() , а не вспомогательная:

// Элементы DOM $("div").each(function (index, value) { console.log("div" + index + ":" + $(this).attr("id")); });

В следующем примере продемонстрировано использование вспомогательной функции. В данном случае объект, для которого выполняется цикл, задается в качестве первого аргумента. В этом примере я покажу, как перебрать массив через цикл с помощью jQuery each function :

// Массивы var arr = [ "один", "два", "три", "четыре", "пять" ]; $.each(arr, function (index, value) { console.log(value); // Выполнение останавливается после "три" return (value !== "три"); }); // Результат: один два три

В последнем jQuery each примере я хочу представить циклы через свойства объекта:

// Объекты var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 }; $.each(obj, function (index, value) { console.log(value); }); // Результат: 1 2 3 4 5

Все это сводится к формированию надлежащего обратного вызова. Контекст обратного вызова this будет равен второму аргументу, который является текущим значением. Но поскольку контекст всегда будет объектом, то простые значения должны быть «обернуты ». Поэтому строгое равенство между значением и контекстом не может быть задано. Первый аргумент — текущий индекс, который является числом для jQuery each array или строкой (для объектов ).

Основной пример использования функции jQuery .each ()

Давайте посмотрим, как функция each() применяется в сочетании с объектом jQuery . В первом примере выбираются все элементы a на странице, и выводится их атрибут href :

$("a").each(function (index, value){ console.log($(this).attr("href")); });

Во втором примере использования jQuery each object выводятся все внешние href на веб-странице (при условии, что используется протокол HTTP ):

$("a").each(function (index, value){ var link = $(this).attr("href"); if (link.indexOf("http://") === 0) { console.log(link); } });

Предположим, что на странице есть следующие ссылки:

JQUERY4U PHP4U BLOGOOLA

Второй код выдаст:

http://jquery4u.com http://www.phpscripts4u.com http://www.blogoola.com

Элементы DOM из объекта jQuery при использовании внутри each() необходимо снова «обернуть ». Потому что сам jQuery — это фактически контейнер для массива элементов DOM . С помощью jQuery each function этот массив обрабатывается так же, как и обычный. Поэтому мы не получаем обернутые элементы сразу после обработки.

Пример массива jQuery.each()

Еще раз рассмотрим, как можно обрабатывать обычный массив:

var numbers = ; $.each(numbers , function (index, value){ console.log(index + ":" + value); });

Результат выполнения кода: 0:1, 1:2, 2:3, 3:4, 4:5 и 5:6.

Массив содержит числовые индексы, поэтому мы получаем числа, начиная с 0 и до N — 1 , где N — количество элементов в массиве.

Пример JSON JQuery.each()

У нас могут быть более сложные структуры данных, такие как массивы в массивах, объекты в объектах, массивы в объектах или объекты в массивах. Давайте рассмотрим, как jQuery find each может применяться в подобных сценариях:

var json = [ { "red": "#f00" }, { "green": "#0f0" }, { "blue": "#00f" } ]; $.each(json, function () { $.each(this, function (name, value) { console.log(name + "=" + value); }); });

Результат выполнения кода: red=#f00, green=#0f0, blue=#00f.

Мы обрабатываем структуру с помощью вложенного вызова each() . Внешний вызов обрабатывает массив переменной JSON , внутренний вызов обрабатывает объекты. В этом примере каждый jQuery each element имеет только один ключ. Но с помощью представленного кода может быть присвоено любое количество ключей.

Пример класса jQuery.each()

В этом примере показано, как перебрать каждый элемент с классом productDescription :

Красный Розовый Оранжевый Синевато-зеленый Зеленый

Вместе с селектором мы используем вспомогательную функцию each() вместо метода each() :

$.each($(".productDescription"), function (index, value) { console.log(index + ":" + $(value).text()); });

Результат использования jQuery each function будет следующим: 0:Красный , 1: Оранжевый , 2:Зеленый .

Нам не нужно использовать индекс и значение. Это параметры, которые помогают определить, какой элемент DOM в настоящее время обрабатывается циклом. Кроме этого в сценарии можно использовать более удобный метод each() :

$(".productDescription").each(function () { console.log($(this).text()); });

Результат .

→ Примеры jQuery для начинающих

jQuery - javascript библиотека, состоящая из кроссбраузерных функций - оплеток для манипулирования элементами DOM (Document Object Model - Объектная модель документа). Главный ее принцип это автоматическое применение нужного механизма, в зависимости от браузера. К примеру, получение элемента html документа по ID, в разных браузерах происходит по разному. До появления jquery, я использовал такую функцию:

Function getObj(objID){ if (document.getElementById) {return document.getElementById(objID);} else if (document.all) {return document.all;} else if (document.layers) {return document.layers;} }

Чтобы это же действие совершить в jquery, достаточно сделать так:

$("#objID") или jQuery("#objID")

Обращение к функции $() равносильно jQuery() , так как первая является алиасом для второй. Если Вы не используете других библиотек, подобных jquery, то можете смело обращаться к пространству имен через $(). В противном случае лучше использовать непосредственное имя объекта - jQuery. Далее, считаем что нет других библиотек.

Начало работы с jQuery

Итак, начинаем работу. Первым делом необходимо получить новейшую версию библиотеки jquery с официального сайта проекта http://jquery.com/ или скачать jquery здесь. В архиве и на официальном сайте лежат две версии: сжатая и девелоперская. На сайте лучше использовать сжатую, а если захочется поэкспериментировать воспользуйтесь второй. Первым делом подключаем библиотеку jquery в тело страницы:

После этого пространство имен javascript, определено таким образом, что обращение к функции $() занято jquery и получить любой элемент документа html в виде объекта, можно выражением $("#objID") . Где objID - ID объекта.

jQuery и CSS

В качестве первого примера рассмотрим работу jquery и CSS. Существует два основных способа манипулирования CSS с помощью jquery: изменение одного атрибута или сразу нескольких. Выполняются они через функцию css() . Выглядит в теории это примерно так:

$("#objID").css("display","block") $("#objID").css({ display:"block, margin:"10px", color:"#ffffff" })

Пример изменения одного атрибута CSS

Пример изменения одного атрибута удался!

Исходный код:

Пример изменения одного атрибута удался!

Пример изменения нескольких атрибутов CSS

Пример изменения нескольких атрибутов!

Исходный код:

function demo_css(){ $("#span2").css({ color:"#ffffff", padding:"5px", background:"#980000" }); } Пример изменения нескольких атрибутов!

Изменение текста и html

Для изменения текста или html кода существуют функции text() и html() .

$("#objID").text("Тру ля ля") $("#objID").html("

Тру ля ля

Причем, если попытаетесь с помощью функции text() вставить html код, то получите его в исходном виде. Функция text() все экранирует.

Пример использования text()

Исходный код:

function set_text(){ $("#span3").text("Спасибо!"); }

Пример использования html()

Исходный код:

function set_html(){ $("#span4").html("Спасибо! Так гораздо лучше."); }

Управление атрибутами с помощью jQuery

Функция attr() манипулирует любыми атрибутами элемента. С ее помощью можно добавить или изменить title, href, value, src и так далее.

Пример использования attr()

Исходный код:

function plus_ten(){ var cur_value = $("#text").attr("value"); cur_value = parseInt(cur_value) + 10; $("#text").attr("value",cur_value); }

Обработчики событий в jQuery

Полный список доступен по адресу http://api.jquery.com/category/events/. Приведу лишь несколько примеров. Самый распространенный обработчик события onclick. В jQuery можно перехватить через функцию click() .

Пример использования click()

Исходный код:

$("#butt").click(function(){ alert("Решили проверить?"); });

Пример использования keyup()

Введите что-нибудь:

Вы ввели:

Исходный код:

Введите что-нибудь:
Вы ввели: $("#text2").keyup(function(){ if ($("#text2").val()){ $("#text2_target").css({background:"#980000"}); } else { $("#text2_target").css({background:"#ffffff"}); } $("#text2_target").text($("#text2").val()); });

Пример использования bind()

Кликни по мне!

Исходный код:

div#log{ background:#1C93A5; width:300px; height:100px; padding:10px; color:#fff; } Кликни по мне!
$(document).ready(function() { $("#log").bind("click", function(e) { $("#coord").html("Координата X: "+ e.pageX + " Координата Y: " + e.pageY + ""); }); });

AJAX - группа технологий, которая используется в веб разработке для создания интерактивных приложений. AJAX позволяет передавать данные с сервера без перезагрузки страницы. Таким образом можно получать очень впечатляющие результаты. А библиотека jQuery существенно облегчает реализацию AJAX с помощью встроенных методов.

Для реализации технологии используется метод $.ajax или jQuery.ajax :

$.ajax(свойства) или $.ajax(url [, свойства])

Второй параметр был добавлен в версии 1.5 jQuery.

url - адрес запрашиваемой страницы;

properties - свойства запроса.

Полный список параметров приведен в документации jQuery.

В уроке мы используем несколько наиболее часто используемых параметров.

success (функция) - данная функция вызывается после успешного завершения запроса. Функция получает от 1 до 3 параметров (в зависимости от используемой версии библиотеки). Но первый параметр всегда содержит возвращаемые с сервера данные.

data (объект/строка) - пользовательские данные, которые передаются на запрашиваемую страницу.

dataType (строка) - возможные значения: xml, json, script или html. Описание типа данных, которые ожидаются в ответе сервера.

type (строка) - тип запроса. Возможные значения: GET или POST. По умолчанию: GET.

url (строка) - адрес URL для запроса.

Пример 1

Простая передача текста.

$.ajax({ url: "response.php?action=sample1", success: function(data) { $(".results").html(data); } });

Для ответа имеется элемент div .result .

Ждем ответа

Сервер просто возвращает строку:

Echo "Пример 1 - передача завершилась успешно";

Пример 2

Передаем пользовательские данные PHP скрипту.

$.ajax({ type: "POST", url: "response.php?action=sample2", data: "name=Andrew&nickname=Aramis", success: function(data){ $(".results").html(data); } });

Сервер возвращает строку со вставленными в нее переданными данными:

Echo "Пример 2 - передача завершилась успешно. Параметры: name = " . $_POST["name"] . ", nickname= " . $_POST["nickname"];

Пример 3

Передача и выполнение кода JavaScript

$.ajax({ dataType: "script", url: "response.php?action=sample3", })

Сервер выполняет код:

Echo "$(".results").html("Пример 3 - Выполнение JavaScript");";

Пример 4

Используем XML. Пример можно использовать для работы с внешними XML, например, RSS фидом.

$.ajax({ dataType: "xml", url: "response.php?action=sample4", success: function(xmldata){ $(".results").html(""); $(xmldata).find("item").each(function(){ $(" ").html($(this).text()).appendTo(".results"); }); } });

Сервер должен возвращать XML код:

Header ("Content-Type: application/xml; charset=UTF-8"); echo $("#ajaxclick").click(function(){ // загрузить в элемент id="content1" часть файла demo.html (#content1) $(this).parent().load("demo.html #content1"); });

Контент файла demo.html:

Файл demo.html ... ...

3. Загрузить в элемент, имеющий id="result" ответ content.php . Данный ответ будет зависеть от значения атрибута data-content , которое имеет кнопка, пославшая AJAX-запрос на сервер.

Загрузить содержимое 1 Загрузить содержимое 2 Загрузить содержимое 3 ... // при нажатии на кнопку, имеющую класс load-ajax-click $(".load-ajax-content").click(function(){ // определим значение атрибута data-content var dataContent = $(this).attr("data-content"); // запросим данные из файла, с использованием значения атрибута data-content, и выведем их в элемент id="result" if (dataContent) { $("#result").load("content.php","content="+dataContent); } });