AJAX.
Подвиды:
* AJAX – Asynchronous JavaScript and XML, асинхронный Javascript и XML. В ответ на запрос с клиента сервер отвечает правильно сфоримированным XML-документом.
* AJAH – Asynchronous JavaScript and HTML, асинхронный Javascript и HTML. В ответ на запрос с клиента сервер отвечает уже сгенерированным HTML-документом или его частью.
* AHAH – Asynchronous HTML and HTTP, асинхронный HTML и HTTP. То же самое, что и AJAH.
* AJAJ – JavaScript and JSON, асинхронный Javascript и JSON. В ответ на запрос с клиента сервер отвечает правильной записью объекта Javascript в формате JSON (http://json.org).

jQuery предлагает реализацию всех трех подвидов технологии AJAX и еще один, AJAJs – все те же и Javascript. Базовыми функциями для работы с AJAX являются post() и get() (есть еще более низкоуровневая, ajax().
$.post(url[, params[, callback]])
$.get(url[, params[, callback]])

* url – адрес страницы, на которую будет отправлен запрос;
* params – параметры, передаваемые в запросе в виде пар «ключ : значение»;
* callback – функция, которая будет вызвана в случае успешного завершения вызова.

Если сервер на запрос возвращает заголовок Content-Type: text/xml и правильно сформированный XML-документ, то в функцию onAjaxSuccess будет передан уже готовый к употреблению DOM этого документа, с которым можно будет работать, используя методы jQuery. Пример:

ajaxtest2.php:
<?php
header(«Content-Type: text/xml; charset=utf-8″);
?>
<list>
<item id=»1″>
Item 1
</item>
<item id=»2″>
Item 2
</item>
</list>

Наш JavaScript:
// Функцию post опускаем, написать ее не составляет труда
function onAjaxSuccess(xml)
{
// Получаем коллекцию всех элементов item из пришедшего xml
items = $(«item», xml);

// Находим item с id=»1″
item = $(«#1″, xml);

// или при помощи XPath
item2 = $(«item[@id='2']«, xml);

// Извлекаем текст из элемента
alert(item2.html());
}
Работа с полученным с сервера ответов в виде XML ничем не отличается от работы с уже загруженным в браузер документом.

14.1 AHAH.

Как уже было видно в первом примере с методом post(), если значение заголовка Content-Type – не «text/xml», ответ с сервера передается как есть, в текстовом виде. Поскольку обычно такой ответ сразу показывается на странице без дополнительной обработки, то нет смысла заводить отдельные функции вроде onAjaxSuccess. Для получения и отображения полученного с сервера HTML jQuery предоставляет метод load:

load(url[, params[, callback]]);

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

$(«#mydiv»).load(«/ajaxtest.php»);

Мы выполняем запрос к файлу из первого примера про AJAX. После выполнения запроса в элемент с id=»mydiv» будет записано слово «text».

14.2 AJAJ.

Многие разработчики, столкнувшиеся с технологией AJAX, не любят передавать на клиент XML. Объясняется это тем, что XML может быть довольно большим по размеру, и существуют дополнительные трудности при разборе его структуры на клиенте. Благодаря jQuery, разбор XML на клиенте не представляет никакой сложности. А если разработчики активно используют AHAH, то и размеры передаваемого документа перестают быть решающим аргументом.

И все же многие предпочтут использовать JSON. JSON – это способ записи данных, который позволяет прогнать эту запись через функцию eval() и получить полноценный Javascript-объект. Для работы с данными в таком формате jQuery предлагает метод $.getJSON

14.2 AJAJs.

Помимо трех вышеперечисленных способов получения данных с сервера jQuery предлагает еще один. С его помощью можно загрузить и выполнить любой сценарий Javascript с сервера. Для этого используется метод getScript:

getScript(url[, callback])

Пример:
script.js

$(«a»).css(«color», «#0F0″);

Наш Javascript:

$.getScript(‘/script.js’);

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

15. CSS-селекторы поддерживаемые jQuery.

*    Элемент Е, являющийся n-ым дочерним элементом своего родительского элемента.
E    Элемент типа E.
E:nth-child(n)    Элемент Е, являющийся n-ым дочерним элементом своего родительского элемента.
E:first-child    Элемент Е, являющийся первым дочерним элементом своего родительского элемента.
E:last-child    Элемент Е, являющийся последним дочерним элементом своего родительского элемента.
E:only-child    Элемент E, являющийся единственным дочерним элементом своего родительского элемента.
E:empty    Элемент E, у которого нет дочерних элементов (включая текстовые узлы).
E:enabled    Активный элемент Е пользовательского интерфейса.
E:disabled    Неактивный элемент Е пользовательского интерфейса.
E:checked    Отмеченный элемент Е пользовательского интерфейса (например, радиокнопка).
E.warning    Элемент E с классом «warning» (class=»warning»).
E#myid    E с ID равным «myid» (выберет максимум один элемент).
E:not(s)    Элемент E, не соответствующий простому селектору s.
E F    Элемент F, являющийся потомком элемента E
E > F    Элемент F, являющимся дочерним элементом элемента E.
E + F    Элемент F, которому непосредственно предшествует элемент E.
E ~ F    Элемент F, которому предшествует элемент E.
E,F,G    Выбрать все элементы E, F и G.
E[@foo]    элемент E с аттрибутом «foo».
E[@foo=bar]    Элемент E, у которого значение атрибута «foo» равно «bar».
E[@foo^=bar]    Элемент E, у которого значение атрибута «foo» начинается с «bar».
E[@foo$=bar]    Элемент E, у которого значение атрибута «foo» оканчивается на «bar».
E[@foo*=bar]    E, у которого значение атрибута «foo» содержит «bar».
Все селекторы атрибутов должны записываться в стиле XPath, то есть с предваряющим символом «@».

Примеры использования:
jQuery    Аналог из CSS
$(“#my-id”)    #my-id {}
$(“a.classname”)    a.classname {}
$(“p, div.myclass, a#my-id”)    p, div.myclass, a#my-id {}
$(“div:last-child”)    div:last-child {}
$(“*:checked”)    *:checked

15.1 XPath

—Определение местоположения.

Абсолютные пути:
$(«/html/body//p»)
$(«/*/body//p»)
$(«//p/../div»)

Относительные пути:
$(«a»,this)
$(«p/a»,this)

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

Потомок Элемент содержит потомков

$(«//div//p»)

Дочерний У элемента есть дочерний элемент

$(«//div/p»)

Предшествующий соседний элемент Элементу предшествует другой элемент на той же оси

$(«//div ~ form»)

Родитель Выбирает родительский элемент элемента

$(«//div/../p»)

Поддерживаемые предикаты:

[@*] Содержит атрибут

$(«//div[@*]«)

[@foo] Содержит атрибут «foo»

$(«//input[@checked]«)

[@foo='test'] Атрибут «foo» равен «test»

$(«//a[@ref='nofollow']«)

[Nodelist] Элемент соддержит список узлов, например:

$(«//div[p]«)
$(«//div[p/a]«)

Предикаты, поддерживаемые по-другому:

[last()] или [position()=last()] становится :last

$(«p:last»)

[0] или [position()=0] становится :eq(0) или :first

$(«p:first»)
$(«p:eq(0)»)

[position() < 5] становится :lt(5)

$(«p:lt(5)»)

[position() > 2] становится :gt(2)

$(«p:gt(2)»)

15.2 Специальные селекторы
jQuery поддерживает некоторые селекторы, которые не являются частью стандартов CSS или XPath, но их использование облегчает жизнь:

:even    Выбирает все четные элементы из коллекции.
dd    Выбирает все нечетные элементы из коллекции.
:eq(0) и :nth(0)    Выбирает элемент с индексом N из коллекции.
:gt(4)    Выбирает элементы с индексом большим, чем N.
:lt(4)    Выбирает элементы с индексом меньшим, чем N.
:first    Эквивалентно :eq(0).
:last    Выбирает последний элемент из коллекции.
:parent    Выбирает все элементы, у которых есть дочерние элементы (включая текст).
:contains(‘test’)    Выбирает все элементы, которые содержат текст.
:visible    Выбирает все видимые элементы (включая элементы со стилями «display» равными «block» или «inline», «visibility» равным «visible» а также элементы форм, не являющихся типа «hidden»).
:hidden    Выбирает все невидимые элементы (включая элементы со стилями «display» равными «none», «visibility» равным «hiden» а также элементы форм, являющихся типа «hidden»).

Примеры:
$(«p:first»).css(«fontWeight»,»bold»);
$(«div:hidden»).show();
$(«div:contains(‘test’)»).hide();

15.3 Селекторы форм

:input    Выбирает все элементы формы (input, select, textarea, button).
:text    Выбирает все текстовые поля (type=»text»).
:password    Выбирает все поля для ввода паролей (type=»password»).
:radio    Выбирает все радиокнопки (type=»radio»).
:checkbox    Выбирает все флаговые поля (type=»checkbox»).
:submit    Выбирает все кнопки для отсылки формы (type=»submit»).
:image    Выбирает все изображения на форме (type=»image»).
:reset    Выбирает все кнопки очистки формы (type=»reset»).
:button    Выбирает все остальные кнопки (type=»button»).

Примеры:

$(«#myForm :input»)
$(«input:radio», myForm)

16.  Подключение jQuery в документе и написание скриптов.
Подключить в раздел HEAD страницы несколько файлов: библиотеку jQuery jquery-1.2.6.js и файл нужного нам плагина, например jquery.dataTables.js

<script type=»text/javascript» src=»js/jquery-1.2.6.js»></script>
<script type=»text/javascript» src=»js/jquery.dataTables.js»></script>

Все дополнительные скрипты пишем отдельно, но тоже в HEAD -  <script type=»text/javascript»></script>
Скрипты надо писать в тэгах <script>…</script>, и писать в конце перед </body> – так на практике, т.к. в head не работает. Хотя во всех примерах скрипт в шапке, после тэга с подключением самой квери, и перед стилями. Видимо стили должны быть после скриптов.

17. FAQ.

- $(‘#myDivId’); выбирает элемент с id «myDivId». Поскольку id является уникальным, это выражение всегда выбирает один элемент. Или ничего не выбирает, если элемента с таким id не существует.

- $(‘.myCssClass’); выбирает элемент(ы) с классом «myCssClass». Поскольку любое количество элементов может иметь этот класс, это выражение будет выбирать любое количество элементов.

- var myDivElement = $(‘#myDivId’); выбранный элемент может быть присвоен переменной javascript.

- Выбранные элементы задействуются другими функциями jQuery:
var myValue = $(‘#myDivId’).val(); получаем значение элемента
$(‘#myDivId’).val(«hello world»);  устанавливаем значение элемента

-  Выбирая элементы по имени класса, лучше использовать составной селектор. Если отбор идет по id, то логично использовать именно id:
$(‘#myDivId’); // лучше
$(‘div#myDivId’); // хуже
$(’span.myCssClass’); // лучше
$(‘.myCssClass’); // хуже

Проверяем имеет ли элемент какой-либо класс:
if ( $(‘#myDiv’).is(‘.pretty’) )
$(‘#myDiv’).show();

Проверяем, скрыт ли элемент (при использовании :hidden селектора):
if ( $(‘#myDiv’).is(‘:hidden’) )
$(‘#myDiv’).show();

Проверить существование элемента:
if ( $(‘#myDiv’).length )
$(‘#myDiv’).show();

Проверить существование элемента:
$(‘#myDiv’).show(); покажет элемент, если он существует, и не сделает ничего (и никакой ошибки не возникнет), если это неверно.

Определяем состояние переключаемого элемента:
var isVisible = $(‘#myDiv’).is(‘:visible’);
var isHidden = $(‘#myDiv’).is(‘:hidden’);

Если хотим воздейстовать на элемент, основываясь на его видимости, просто включите «:visible» или «:hidden» в выражение селектора:
$(‘#myDiv:visible’).animate({left: ‘+=200px’}, ’slow’);

Разрешаем/запрещаем использование элемента:

$(«#x»).attr(«disabled»,»disabled»);  запрещаем использование элемента #x
$(«#x»).attr(«disabled»,»"); разрешаем  использование элемента #x
$(«#x»).removeAttr(«disabled»);   разрешаем  использование элемента #x

Т.е. можно разрешать/запрещать элемент, устанавливая атрибут ‘disabled’ в значение ‘disabled’ (чтобы запретить использование элемента), или присвоить этому атрибуту пустое значение », или же просто удалить атрибут ‘disabled’ (чтобы разрешить использование элемента).

Отметить/снять отметку с элемента checkbox:
$(«#c»).attr(«checked», «checked»); отмечаем checkbox с id=»c»
$(«#c»).attr(«checked»,»");   снимаем отметку checkbox’а с id=»c»

Т.е. отметить/снять отметку c элемента checkbox, устанавливая атрибуту ‘checked’ значение ‘checked’ (чтобы отметить элемент) или установить атрибуту ‘checked’ пустое значение «» (чтобы снять отметку).

Получаем значения выбранной опции элемента select:
<select id=»myselect»>
<option value=»1″>Mr</option>
<option value=»2″>Mrs</option>
<option value=»3″>Ms</option>
<option value=»4″>Dr</option>
<option value=»5″>Prof</option>
</select>

$(«select#myselect»).val();  получаем значение атрибута value, выбранной опции
$(«#myselect option:selected»).text();   получаем текст выбранной опции

18. Синтаксис CSS внутри скрипта:

$(«p»).css(«color»,»red»);

Синтаксис записи скрытия\показа ссылок:
for(i = 0; i < 50; i++)
{
$(«a»).animate({height: «show»}, 300);
$(«a»).animate({height: «hide»}, 300);
}

19. <p>параграф1</p>

$(«p»).append(«Как дела»).prepend(«все нормально»);  добавить к параграфу спереди и сзади к основной фразе текст.

$(«p»).css(«color»,»red»); изменить стили параграфа.