|
|
@@ -0,0 +1,84 @@
|
|
|
+# Введение в 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** не увенчаются успехом.
|
|
|
+
|
