Лекция

Тема: «Библиотека JQuery»

План

1. Подключение библиотеки JQuery

2. Команды jQuery

3. Предотвращение преждевременного выполнения кода

4. Селекторы jQuery

4.1. Селекторы (основные)

4.2. Селекторы (иерархические)

5. Фильтры

5.1. Фильтры контента

5.2. Фильтры видимости

5.3. Фильтры атрибутов

5.4. Фильтры форм

5.5. Фильтры потомков

6. Методы для работы с CSS-стилями

7. Методы для работы с html

8. Методы по обработке событий

1. Подключение библиотеки JQuery

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

jQuery – это библиотека, написанная на языке JavaScript, которая предназначена для кроссплатформенного манипулирования HTML страницей после того как она отобразится в браузере.

jQuery – это JavaScript-библиотека, фокусирующаяся на взаимодействии JavaScript, HTML и CSS.

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

Что умеет jQuery

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

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

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

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

Скачать данную библиотеку с официального сайта и подключить её с помощью элемента script:

Обычно данную строку располагают в конце HTML документа до закрывающего тега body, но перед другими библиотеками, которые её используют.

Используя Google CDN или другие CDN сервера:

Данный способ имеет следующие преимущества:

o при посещении сайтов, на которых URL-ссылка для загрузки библиотеки jQuery имеет один и тот же вид, библиотека jQuery будет загружаться уже не с сервера, а с кэша браузера пользователя.

o сокращает Ваш сетевой трафик, т.к. загрузка происходит не с вашего сервера, а с сервера сети Google.

Какой формат библиотеки jQuery выбрать для загрузки?

На сайте http://jquery.com для загрузки доступны 2 варианта библиотеки jQuery: сжатый и обычный.

Первый отличается от второго тем, что в нём исходный код библиотеки находится в сжатом виде, т.е. из него удалены пробелы, разрывы строк, комментарии и др. Следовательно, сжатый файл исходного кода библиотеки jQuery более предпочтительно использовать на рабочем сайте, т.к. это сократит загрузку и повысит производительность выполнения запросов на странице.

Второй вариант больше походит для изучения библиотеки jQuery, т.к. данный файл хорошо документирован, его можно открыть и посмотреть, как в нём реализована та или иная функция.

Как использовать библиотеку jQuery?

После подключения библиотеки jQuery к HTML документу её можно использовать с помощью функции jQuery (window.jQuery()). Данную функцию можно использовать не только по имени jQuery, но и по более короткому и красивому псевдониму - знаку $. Не забываем, что в JavaScript функции являются тоже объектами, следовательно, $ - является объектом.

window.jQuery = window.$ = jQuery = $;

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

2. Команды jQuery

Код jQuery, как и код JavaScript, состоит из последовательно идущих команд. Команды являются основной структурной единицей jQuery.

Стандартный синтаксис jQuery команд:

$(селектор).метод();

Знак $ сообщает, что символы, идущие после него, являются jQuery кодом;

Селектор позволяет выбрать элемент на странице;

Метод задает действие, которое необходимо совершить над выбранным элементом. Методы в jQuery разделяются на следующие группы:

- методы для манипулирования DOM;

- методы для оформления элементов;

- методы для создания AJAX запросов;

- методы для создания эффектов;

- методы для привязки обработчиков событий.

jQuery можно комбинировать с обычным JavaScript. Если строка начинается с $ - это jQuery, если $ вначале строки отсутствует - это строка JavaScript кода.

Пример.

function start()

{

//Скроем абзац с id="hid" с помощью jQuery

$("p#hid").hide();

//Изменим содержимое абзаца с id="change"

document.getElementById("change").innerHTML="Данное содержимое было изменено с помощью JavaScript";

}

3. Предотвращение преждевременного выполнения кода

Выполнение кода до полной загрузки документа часто приводит к ошибкам.

Дело в том, что скрипт может обратиться к еще не загруженному содержимому, а это всегда приводит к ошибкам или неожиданным результатам. Для того чтобы избежать этого мы часто помещали код в функцию, которая начинала выполнение только после полной загрузки документа.

В jQuery можно избавиться от преждевременного выполнения кода следующими способами:

//Первый способ:

$(document).ready(function(){

Код который будет выполнен после полной загрузки документа

});

//Второй способ:

$().ready(function(){

Код который будет выполнен после полной загрузки документа

});

//Третий способ:

$(function(){

Код который будет выполнен после полной загрузки документа

});

</script>

Цепочки команд в jQuery

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

Команды в цепочке будут выполняться поочередно слева направо.

//Код без сокращения

$("p").css("color","green");

$("p").css("font-size","30px");

//Сокращенный код

$("p").css("color","green").css("font-size","30px");

</script>

4. Селекторы jQuery

4.1. Селекторы (основные)

С помощью селекторов Вы можете выбирать элементы на странице для применения к ним определенных действий.

Ниже располагается таблица с различными примерами использования селекторов для выбора желаемых элементов:

Пример	Результат
*$("")**	Будут выбраны все элементы на веб-странице, включая html
$("p")	Будут выбраны все элементы p, которые находятся на странице.
$("div, p")	Будут выбраны все элементы div и p.
$(".par")	Будут выбраны все элементы на странице с class="par".
$("#par")	Будет выбран первый элемент на странице с id="par".
$(this)	Позволяет выбрать текущий HTML элемент.
$("p.par")	Будут выбраны все элементы p на странице с class="par".
$("p#par")	Будут выбраны все элементы p на странице с id="par".
$(".par,.header,#heat")	Будут выбраны все элементы на странице со значениями атрибутов class="par", class="header" и id='heat'.

Примеры

//Установим размер шрифта всех абзацев равным 20 пикселям

$("p").css("font-size","20px");

//Изменим на зеленый цвет шрифта элемента с id=el2

$("#el2").css("color","green");

//Изменим на красный цвет шрифта элемента с class=el3

$(".el3").css("color","red");

//Сделаем жирным шрифт элементов с id=el2 и class=el3

$("#el2,.el3").css("font-weight","bold");

4.2. Селекторы (иерархические)

В JavaScript мы рассматривали иерархию объектов, по аналогии у элементов могут быть предки (parent) и потомки (child). Например, все элементы, находящиеся на форме являются потомками формы, а форма, в свою очередь, является их предком.

parent child - выбирает все элементы, являющиеся потомками для определенного элемента предка.

Пример:

$("form input").css("border", "1px solid red");

Данная инструкция добавит рамку всем input-ам, которые являются потомками элемента form.

parent > child - выбирает всех прямых наследников элемента-родителя.

Пример. Пусть у нас есть html-страница такой структуры:

<html>

<head>

<title>jQuery</title>

</head>

<body>

<h2>Селекторы jQuery</h2>

<p></p>

</div>

<p></p>

</div>

</body>

</html>

Тогда следующая инструкция:

$("#content > *").css("border", "1px solid red");

добавит рамку всем элементам (div-у, span-у и абзацу), которые находятся в div-е с id="content", но не затронет одноименные элементы в div-е с id="main".

prev + next - выбирает все элементы, которые являются следующими (next) за элементом prev (предыдущий).

Пример:

$("label + input").css("border", "1px solid red");

Данная инструкция добавит рамку только тем input-ам, которые следуют непосредственно за надписями (label).

prev~sibling (предыдущий~сиблинг) - выбирает соседние элементы sibling, которые расположены после элемента prev. Элементы prev и sibling должны быть по отношению друг к другу соседями, иметь одного родителя.

Пример. Выбрать элементы p, которые расположены после элемента div. Кроме этого, элементы div и p по отношению друг к другу должны быть сиблингами

$("div~p");

Пример. Найти все элементы div, которые являются по отношению к элементу с id="prev" сиблингами и расположены после него:

$( "#prev ~ div" );

5. Фильтры jQuery

:first - выбирает первый элемент соответствующего селектора.

//напишет курсивом первую строку таблицы

$("tr:first").css("font-style", "italic");

:last - выбирает последний элемент соответствующего селектора.

// напишет курсивом последнюю строку таблицы

$("tr:last").css("font-style", "italic");

:even - выбирает четные элементы, начиная с нуля.

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

$("tr:even").css("font-style", "italic");

:odd - выбирает нечетные элементы, начиная с нуля.

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

$("tr:odd").css("font-style", "italic");

:eq(index) - выбирает элемент по его индексу (начиная с нуля).

// напишет курсивом текст второй ячейки таблицы (т.к. нумерация идет с нуля, то зрительно кажется, что третьей ячейки).

$("td:eq(2)").css("font-style", "italic");

:gt(index) - выбирает элементы с индексом больше указанного.

// напишет курсивом текст во всех ячейках таблицы, начиная со второй (т.к. нумерация идет с нуля, то зрительно кажется, что с третьей ячейки).

$("td:gt(2)").css("font-style", "italic");

:lt(index) - выбирает элементы с индексом меньше указанного.

// напишет курсивом текст в первых пяти ячейках таблицы.

$("td:lt(4)").css("font-style", "italic");

Пример. В таблице поменяем цвет строк: четные строки будут серыми, а нечетные - синими, а цвет шрифта ячеек, начиная с 5 будет желтым.

Замечание. Так как нумерация идет с нуля, поэтому внешне четные и нечетные строки меняются местами, а 5 ячейка зрительно выглядит, как шестая.

html-код:

<html>

<head>

<title>jQuery</title>

</head>

<body>

<h2>Фильтры jQuery</h2>

<tr><td>jQuery</td><td>четная строка</td></tr>

<tr><td>jQuery</td><td>нечетная строка</td></tr>

<tr><td>jQuery</td><td>четная строка</td></tr>

<tr><td>jQuery</td><td>нечетная строка</td></tr>

<tr><td>jQuery</td><td>четная строка</td></tr>

<tr><td>jQuery</td><td>нечетная строка</td></tr>

</table><br>

</body>

</html>

Код самой функции:

function addColor3(){

$("tr:even").css("background-color", "gray");

$("tr:odd").css("background-color", "blue");

$("td:gt(5)").css("color", "yellow");

}

5.1. Фильтры контента

:header - выбирает все элементы, которые являются заголовками (h1, h2...).

$(":header").css("color", "red");

//Данная инструкция сделает все заголовки красными.

:contains(text) - выбирает элементы, которые содержат переданный текст (text).

$("div:contains('New')").css("text-decoration", "underline");

//Данная инструкция подчеркнет все элементы div-а, содержащие подстроку New.

:empty - выбирает все элементы, которые не содержат потомков (т.е. являются пустыми).

$("td:empty").text("Пусто");

//Данная инструкция найдет все пустые ячейки таблицы и вставит в них текст "Пусто".

:has(selector) - выбирает элементы, которые содержат хотя бы один элемент, указанный в селекторе.

$("div:has(p)").css("font-style", "italic");

//Данная инструкция найдет те div-ы, в которых есть хотя бы один параграф (p) и сделает текст в них курсивом.

:parent - выбирает родительские элементы, т.е. те, у которых есть потомки.

$("td:parent").css("font-style", "italic");

//Данная инструкция найдет все ячейки таблицы, в которых есть текст или еще что-либо, и сделает их шрифт курсивом.

:animated - выбирает элементы, которые в данный момент являются анимированными.

$("div:animated").css("border", "1px solid red");

//Данная инструкция найдет анимированные div-ы и обведет их рамкой.

5.2. Фильтры видимости

:hidden - выбирает все скрытые элементы и элементы input, имеющие тип "hidden".

$("div:hidden").show();

//Данная инструкция покажет все скрытые div-ы.

:visible - выбирает все видимые элементы.

$("div:visible").css("color", "red");

//Данная инструкция сделает цвет текста в видимых div-ах красным.

5.3. Фильтры атрибутов

Спецификация CSS позволяет идентифицировать элементы по их атрибутам. В jQuery выбор элементов по их атрибутам выполнен строго в соответствии с этой спецификацией.

Значение атрибута в выражении селектора должно быть заключено в кавычки. Это осуществляется одним из следующих способов:

двойные кавычки внутри одинарных кавычек: $('a[rel="nofollow"]').

одинарные кавычки внутри двойных кавычек: $("[rel='nofollow']").

экранированные одинарные кавычки внутри одинарных кавычек: $('a[rel=\'nofollow\']').

экранированные двойные кавычки внутри двойных кавычек: $("a[rel=\"nofollow\"]").

В jQuery для выбора элементов по их атрибутам Вы можете использовать 8 различных селекторов. Кроме этого Вы можете использовать для выбора элементов комбинацию из нескольких селекторов атрибутов. В этом случае будут выбраны только те элементы, которые отвечают каждому из указанных селекторов.

[attribute] - выбирает элементы, которые имеют указанный атрибут. Значение данного атрибута может быть любым.

Например, выбрать изображения (img), имеющие атрибут alt:

$('img[alt]');

[attribute="value"] - выбирает элементы, у которых указанный атрибут имеет значение value.

Например, выбрать все элементы, которые атрибут type со значением button:

$('[type="button"]');

[attribute1="Value1"][ attribute2="Value2"] - выбирает элементы, у которых указанные атрибуты имеют соответствующие значения (Value1 и Value2).

[attribute|="value"] - выбирает элементы, которые имеют указанный атрибут со значением, равным заданной строки (value) или начинающимся с этой строки (value), за которой следует дефис.

Например, выбрать все элементы div, которые имеют атрибут class со значением, равным new или начинающимся с new-

$('div[class|="new"]');

[attribute*="value"] - выбирает элементы, который имеют указанный атрибут (attribute) со значением, содержащим заданную подстроку (value).

Например: выбрать все элементы, которые имеют атрибут href, содержащий в качестве своего значения подстроку youtube:

$('[href*="youtube"]');

[attribute~="value"] - выбирает элементы, которые имеют указанный атрибут со значением, содержащим заданное значение (value) как одно из его значений (т.е. отделено от другого значения пробелом) или равным этому значению (value).

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

$('a[class~="btn"]');

[attribute$="value"] - выбирает элементы, которые имеют указанный атрибут со значением, которое заканчивается заданным значением (value).

Например, выбрать все элементы a, которые имеют атрибут href, заканчивающийся на ".zip".

$('a[href$=".zip"]');

[attribute!="value"] - выбирает элементы, которые не имеют указанный атрибут или имеют указанный атрибут, но он не содержит заданного значения (value).

Например, выбрать элементы a, которые не имеют атрибут rel или имеют его, но он не содержит значение nofollow.

$('a[rel!="nofollow"]');

[attribute^="value"] - выбирает элементы, которые имеют указанный атрибут со значением, начинающимся с заданного значения (value).

Например, выбрать все элементы а, имеющие класс btn и атрибут href со значением, начинающимся с "http"

$('a.btn[href^="http"]');

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

Например, выбрать элементы a, имеющие атрибут id, атрибут href начинающийся с http и атрибут class со значением, содержащим значение btn как одно из его значений или равным btn:

$('a[id][href^="http"][class~="btn"]');

5.4. Фильтры форм

:input - выбираются все элементы input.

:text - выбираются все элементы input типа text.

:password - выбираются все элементы input типа password.

:radio - выбираются все элементы input типа radio.

:checkbox - выбираются все элементы input типа checkbox.

:submit - выбираются все элементы input типа submit.

:reset - выбираются все элементы input типа reset.

:button - выбираются все элементы input типа button.

:image - выбираются все элементы input типа image.

:file - выбираются все элементы input типа file.

:hidden - выбираются все элементы input типа hidden или просто скрытые.

:enabled / :disabled - выбирает все элементы, имеющие активное (enabled) / запрещенное (disabled) состояние.

Пример:

$("input:enabled").css("color", "red"); // Данная инструкция сделает цвет текста красным только у активных input-ов.

:checked - выбирает все элементы, которые отмечены.

$("input:checked").length; // Данная инструкция сосчитает все отмеченные input-ы.

:selected - выбирает все выбранные элементы.

$("select option:selected").length; //Данная инструкция сосчитает сколько выбрано элементов в списке.

Пример. Имеется код html-страницы:

<html>

<head>

<title>jQuery</title>

</head>

<body>

<h2>Селекторы форм в jQuery</h2>

<form>

<label>Password:</label><br>

</form>

</body>

</html>

Напишем функцию, которая меняет цвет полей для ввода:

function addColor1(){

$(":text, :password").css("background", "red");

}

Напишем функцию, которая меняет цвет кнопок:

function addColor2(){

$(":button").css("background", "blue");

}

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

function addColor2(){

$("#b1").css("background", "blue");

}

5.5. Фильтры потомков

:first-child - выбирает элементы, которые являются первыми потомками своих родителей.

$("div span:first-child").css("border", "1px solid blue");

// Данная инструкция обведет рамкой первый span в каждом div-е.

:last-child - выбирает элементы, которые являются последними потомками своих родителей.

$("div span:last-child").css("border", "1px solid blue");

// Данная инструкция обведет рамкой последний span в каждом div-е.

:only-child - выбирает элементы, которые являются единственными потомками своих родителей.

$("div button:only-child").css("border", "1px solid blue");

// Данная инструкция обведет рамкой те div-ы, которые имеют кнопку и при том только одну.

6. Методы для работы с CSS-стилями

В jQuery имеется три категории методов: одни манипулируют с элементами, подходящими по шаблону; вторые возвращают значения элемента, третьи изменяют сами элементы.

Рассмотрим методы, которые используются для CSS-стилей.

Итак, чтобы добавить какому-либо элементу стиль, необходимо воспользоваться следующим методом:

.css(name,value)

$("div").css("border", "1px solid blue"); // Данная инструкция обведет div синей рамкой.

В качестве параметров здесь используются названия и значения, применимые в CSS: background, border, font-style, color и т.д.

Если необходимо задать для элемента несколько CSS-правил, то лучше использовать следующую конструкцию:

.css({properties})

Имена свойств записываются по правилам JavaScript (слитно и каждое новое слово с большой буквы: fontSize, backgroundColor, …)

$("div").css({

border:"1px solid blue",

fontWeight:"bold",

backgroundColor:"red"

});

//Данная инструкция обведет div синей рамкой, сделает фон красным, а текст - жирным.

Перечислим другие методы для работы со стилями:

.addClass(class)

$("p:last").addClass("main"); // Данная инструкция добавит класс main к последнему элементу параграфа.

.removeClass(class)

$("p:even").removeClass("main"); // Данная инструкция удалит класс main из всех четных параграфов.

.toggleClass(class)

$("p").toggleClass("main"); // Данная инструкция удалит класс main из всех параграфов, если он присутствует. И добавит этот класс, если он отсутствует.

.height(value)

$("div").height();

$("div").height(200);

// Данная инструкция позволяет получить (первая строка) и задать (вторая строка) высоту элемента.

.width(value)

$("div").width();

$("div").width(200);

//Данная инструкция позволяет получить (первая строка) и задать (вторая строка) ширину элемента.

var widDiv=$("div").width();

$("div.fir").width(300);

Первая строка запишет в переменную widDiv значение ширины первого div-а. Вторая инструкция задаст div-ам класса fir ширину в 300 пикселов.

Сделаем меню со вкладками такого вида:

html-код:

<html>

<head>

<title>jQuery</title>

</head>

<body>

<h2>jQuery - CSS</h2>

<div class="vkl" id="vkladka1" onClick="chang('#vkladka1');">Вкладка 1</div>

<div class="vkl" id="vkladka2" onClick="chang('#vkladka2');">Вкладка 2</div>

<div class="vkl" id="vkladka3" onClick="chang('#vkladka3');">Вкладка 3</div>

<div class="vkl" id="vkladka4" onClick="chang('#vkladka4');">Вкладка 4</div>

</div>

</body>

</html>

Все вкладки имеют единый стиль, определяемый классом vkl, а выделенная вкладка имеет класс selected. Внешний вид пропишем на странице style.css

.vkl{

float:left;

width:140px;

height:28px;

background:#E5BA83;

color:white;

font-size:20px;

border-right:1px solid white;

padding-left:10px;

}

#content{

width:603px;

height:100px;

background:#CCA675;

}

.selected{

background:#CCA675;

}

Функция chang():

function chang(s){

$('.selected').removeClass('selected');

$(s).addClass('selected');

}

Функция работает так. Сначала ищется элемент, который имеет класс selected, и этот класс у него убирается. Затем (вторая строка) выделенному элементу (он находится по id, переданному в функцию в качестве параметра s) добавляется класс selected.

7. Методы для работы с html

Сначала рассмотрим основные методы работы с html, а затем уже методы для манипуляции с этими элементами. Итак, основные методы:

html(val) - добавляет html-код в выбранные элементы.

$("div.sp").html("<span>Привет</span>");

//Данная инструкция добавит во все div-ы с классом sp, span-ы с текстом "Привет".

text() / val() - возвращает текстовое содержимое элемента / значение элемента.

$("p").text();

//Данная инструкция вернет текст из параграфа.

$("input#your_text").val();

//Данная инструкция вернет текст из текстового поля (input) с идентификатором id=”your_text”.

text(val) / val(val) - установит текст для элемента / значение для элемента.

$("p").text("Привет!");

//Данная инструкция в параграфе напишет слово "Привет!".

Пример. При нажатии по кнопке "Повторить", текст из первого абзаца дублируется во второй абзац.

Html-код:

<html>

<head>

<title>jQuery html</title>

</head>

<body>

<p id="p1">Текст первого абзаца!</p>

</body>

</html>

Фукция будет выглядеть так:

function addHtml(){

var tp1=$("#p1").text();

$("#p2").text(tp1);

}

Т.е. сначала в переменную tp1 мы запишем текстовое содержимое первого абзаца (первая строка), а затем передадим его во второй абзац (вторая строка).

Теперь рассмотрим методы, которые позволяют манипулировать вставляемыми элементами.

append(content) - добавляет content внутрь всех выбранных элементов ПОСЛЕ существующего контента.

$("p").append("<b>Привет</b>");

//Данная инструкция добавит в конец параграфа текст "Привет" жирным шрифтом.

appendTo(content) - обратная операция, добавляет в content все выбранные элементы.

$("p").appendTo("#main");

//Данная инструкция добавит параграф в конец элемента с идентификатором "main".

Иными словами:

$(A).append(B) - добавит В в конец А.

$(A).appendTo(B) - добавит А в конец В.

prepend(content) - добавляет content внутрь всех выбранных элементов ДО существующего контента.

$("p").prepend("<b>Привет</b>");

//Данная инструкция вставит в начало параграфа текст "Привет" жирным шрифтом.

prependTo(content) - обратная операция, добавляет в content все выбранные элементы.

$("p").prependTo("#main");

//Данная инструкция вставит параграф в начало элемента с идентификатором "main".

Иными словами:

$(A).prepend(B) - добавит В в начало А.

$(A).prependTo(B) - добавит А в начало В.

after(content) - добавляет content ПОСЛЕ всех выбранных элементов (ПОСЛЕ элемента, а не в конец элемента, как в случае с append).

$("p").after("<b>Привет</b>");

//Данная инструкция вставит после параграфа текст "Привет" жирным шрифтом.

before(content) - добавляет content ДО всех выбранных элементов (заметьте ДО элемента, а не в начало элемента, как в случае с prepend.

$("p").before("<b>Привет</b>");

//Данная инструкция вставит перед параграфом текст "Привет" жирным шрифтом.

insertAfter(content) - вставляет все выбранные элементы ПОСЛЕ content-а .

$("p").insertAfter("#main");

//Данная инструкция вставит параграф после элемента с идентификатором "main".

Иными словами:

$(A).after(B) - вставит В после А.

$(A).insertAfter(B) - вставит А после В.

insertBefore(content) - вставляет все выбранные элементы ПЕРЕД content-ом .

$("p").insertBefore("#main");

//Данная инструкция вставит параграф перед элементом с идентификатором "main".

Иными словами:

$(A).before(B) - вставит В перед А.

$(A).insertBefore(B) - вставит А перед В.

Пример. При нажатии на кнопку "Добавить" в красном прямоугольнике появятся желтые квадратики (один клик - один квадратик).

Код html-страницы состоит из одного div-а и одной кнопки:

<html>

<head>

<title>jQuery html</title>

</head>

<body>

</body>

</html>

На странице style.css как всегда определяем стили:

#red_sk{

width:700px;

height:100px;

background:red;

}

.yellow_square{

float:left;

width:80px;

height:80px;

background:yellow;

margin:5px;

}

Код самой функции:

function addYellowSquare(){

$("#red_sk").prepend("<div class='yellow_square'></div>");

}

Продолжим рассматривать методы:

wrap(html) - оборачивает каждый элемент в элемент обертку.

$("p").wrap("<span></span>");

//Данная инструкция обернет каждый параграф span-ом.

wrapAll(html) - оборачивает все элементы в ОДИН элемент обертку.

$("p").wrapAll("<span></span>");

//Данная инструкция обернет все параграфы одним span-ом.

wrapInner(html) - оборачивает внутренне содержание каждого элемента.

$("p").wrapInner("<em></em>");

//Данная инструкция выделит содержимое каждого параграфа курсивом.

replaceWith(content) - замещает одни элементы другими.

$("span").replaceWith("<div></div>");

//Данная инструкция заменит все span-ы div-ами.

replaceAll(selector) - обратная операция, т.е. все selector-ы будут поменяны на элементы.

$("span").replaceAll("<div></div>");

//Данная инструкция заменит все div-ы span-ами.

empty() - удаляет из элемента все узлы-потомки, включая текст.

$("span").empty();

//Данная инструкция удалит все содержимое span-ов.

remove() - удаляет сами элементы.

$("span").remove();

//Данная инструкция удалит все span-ы.

clone() - клонирует элементы.

$("b").clone().append("div");

//Данная инструкция возьмет элементы, выделенные жирным и добавит их в div.

Пример. Пусть у нас есть некоторый список, и мы хотим разрешить пользователям добавлять в него пункты:

Код html-страницы:

<html>

<head>

<title>jQuery html</title>

</head>

<body>

Наши города:

<li>Алчевск</li>

<li>Луганск</li>

<li>Стаханов</li>

</ul>

Дополните список:

</body>

</html>

Код функции:

function addSpisok(){

var jq=$('#user_text').val();

$('#jq').append('<li>'+jq+'</li>');

}

8. Методы по обработке событий

ready(fn) - назначает функцию, которая будет выполняться, когда документ готов к работе.

$(document).ready(init);

//Данная инструкция говорит браузеру, что сразу после загрузки документа должна сработать функция init.

bind(type, fn) - связывает обработчик события с самим событием.

$('div').bind('click', init);

//Данная инструкция говорит браузеру, что при щелчке по div-у должна сработать функция init (здесь click - событие, а init - функция, обработчик события).

Пример. Создадим список преимуществ jQuery и сделаем так, чтобы при щелчке по какому-нибудь из них, в span-e ниже появлялось описание выбранного преимущества:

Создадим сам список и поле для вывода описаний на html-странице:

<html>

<head>

<title>jQuery</title>

</head>

<body>

Преимущества JQuery: <select id="plus">

</select><br><br>

Описание: <span id="description"></span>

</body>

</html>

На странице script.js нам достаточно назначить функцию, которая будет срабатывать каждый раз, когда документ готов к работе (назовем ее init). Сама же функция init будет вызывать функцию desc каждый раз, когда выбран какой-либо пункт списка (т.е. наступает событие change):

$(document).ready(init);

function init(){

$('# plus').bind('change', desc);

}

function desc()

{

var s=$("select option:selected").val();

switch (s)

{

case '1':

{

t="скорость разработки"; break;

}

case '2':

{

t="кроссбраузерность"; break;

}

case '3':

{

t="лаконичный код"; break;

}

$("span#description").text(t);

}

one(type, fn) - связывает обработчик события с самим событием, но выполняется он только один раз.

Пример:

$('div').one('click', init);

//Данная инструкция говорит браузеру, что при щелчке по div-у должна сработать функция init, но инструкции этой функции будут выполнены только один раз.

hover(over, out) - когда указатель мыши находится над объектом, срабатывает функция over, а когда указатель мыши выходит за объект, то функция out.

html-код:

<html>

<head>

<title>jQuery</title>

</head>

<body>

<p>первый абзац</p>

<p>второй абзац</p>

<p>третий абзац</p>

</body>

</html>

Код функции:

$(document).ready(init);

function init(){

$('p').hover(

function(){$(this).css("background-color", "blue");},

function(){$(this).css("background-color", "white");}

);

}

Таким образом, когда указатель мыши над абзацем, его фон - синий, а при выходе - белый.

Обратите внимание, здесь мы применили краткую запись, т.е. использовали функции без названий, а могли расписать и так:

$(document).ready(init);

function init(){

$('p').hover(hOver, hOut);

}

function hOver(){

$(this).css("background-color", "blue");

}

function hOut(){

$(this).css("background-color", "white");

}

toggle(fn1, fn2, ...fn) - переключатель между функциями. Щелчок по элементу вызывает функцию fn1, повторный щелчок - функцию fn2, третий щелчок - функцию fn3 и т.д.

Пример:

$('p').toggle(

function(){$(this).css("background-color", "blue");},

function(){$(this).css("background-color", "white");}

);

Данная инструкция говорит браузеру, что при щелчке по абзацу, его фон станет синим, при повторном щелчке - белым.

click(fn) - функция fn связывается с событием click.

Пример:

$('div').click(

function(){$(this).css("background-color", "blue");}

);

// Данная инструкция говорит браузеру, что при щелчке по div-у, его фон станет синим./

Аналогичные методы определены и для других событий, поддерживаемых javascript, например: blur(fn), focus(fn) и т.д.