# Введение в jQuery

## `$`

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

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

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

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

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

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

```javascript
$("#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 без спецсимволов и тэгов)

- [тысячи их](http://api.jquery.com/ "тысячи их")

### События

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

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

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

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

- `click` - клик по тому или иному элементу страницы
- `ready` - событие готовности элемента. Обычно применяется для корневого элемента `document`. Обработчик запускается однократно при полной загрузке страницы и избавляет от переноса кода скрипта вниз **HTML**
- `change` - событие изменения поля ввода. Вызывается после изменения текста и смены фокуса.
- [тысячи их](https://api.jquery.com/category/events/ "тысячи их")


## chaining

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

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

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

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

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

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

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