Введение в jQuery

`$`

$ - функция, которая возвращает объект, связанный с элементом DOM (тэгом на странице), или массив оных. Обычно первым параметром передается строка с селектором:

$('h2')
$('a')
$('#someId')

Создание элементов DOM

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

$('<a>')
$('<div>')

При создании элементы создаются, однако не добавляются на страницу. Для добавления используйте методы append, appendTo, prepend и prependTo:

$("#container").append($("<a>").attr("href","http://google.com").text("Жужель"))
$("#container").append("<a href='http://ya.ru'>тындекс</a>")

Свойства объектов или наборов объектов элементов в jQuery

Объект или набор объектов, возвращенный функцией $, имеет множество методов для манипуляции с тэгом(-ами) или их вложенными тэгами. Основные из них:

val - чтение или задание значения value для input, textarea, select
attr - задание атрибутов тэга (type для input, href для a и так далее)
css - задание css стилей в форме ассоциативного массива
html - вложенный в элемент html
text - вложенный в элемент текст (т. е. html без спецсимволов и тэгов)
тысячи их

События

Обработка действий пользователя (и не только) представляется как обработка событий: по тому или иному событию запускается функция(обработчик), которая предпринимает действия, обрабатывающие событие:

$("#button").click(function(evt){
    alert('The button clicked');
});

Обратите внимание, что конструкция выше не запускает функцию, а только декларирует её и передает в качестве параметра в метод объекта элемента #button click. Вызывается же функция потом, когда событие происходит. Первый параметр функции содержит в себе объект с информацией о событии (например координаты мыши, нажатые клавиши на клавиатуре и так далее). Название этого параметра не принципиально, но обычно принято его называть evt или e (от слова event - событие)

Основные события

click - клик по тому или иному элементу страницы
ready - событие готовности элемента. Обычно применяется для корневого элемента document. Обработчик запускается однократно при полной загрузке страницы и избавляет от переноса кода скрипта вниз HTML
change - событие изменения поля ввода. Вызывается после изменения текста и смены фокуса.
тысячи их

chaining

Для удобства манипуляции и задания настроек элементов DOM, почти каждый метод объекта элемента возвращает this, что позволяет строить цепочки вызовов с настройками. Т. е. такой код:

var elem = $("#someInput")
elem.val("new value");
elem.attr("disabled", "disabled");

Можно сократить до такого:

$("#someInput").val("new value").attr("disabled", "disabled");

Однако не забывайте, что это работает благодаря возврату того же объекта, что и был вовзращен при первом вызове $. То есть, если вы хотите узнать, например значение того или иного свойства, то вы не получите этот объект и не сможете сделать цепочку:

var value = $("#someInput").val();

Если при задании значения (val("new value")) val возвращает тот же объект элемента, то при чтении он возвращает строку, которая находится в поле ввода, и попытки задать какие-то другие параметры через другие методы jQuery не увенчаются успехом.

06Jq.md 5.4 KB Vēsture Neapstrādāts