Вы находитесь на странице: 1из 110

v2

jQuery : Основы
Перевод на русский :
Исаичкин “ReVEraNT” Василий

by Marc Grabanski
На jQuery писать гораздо
легче чем на чистом JavaScript
HTML связан с JavaScript
Философия jQuery:
Философия jQuery:

Найти
Философия jQuery:

Найти
Сделать
Найти
$(“div”)
Найти
$(“div”)
Поместите в $() селектор
Поместите $(“тут”)
селектор
Поместите в $() селектор
Поместите в $() селектор
Поместите в $() селектор
$(“#myId, .myClass, table”)
Найти
$(“div”)
Найти Сделать
$(“div”).addClass(“redbox”);
Соль jQuery API
Цепочки методов
Цепочки методов
Один метод - Много вариантов
Один метод - Много вариантов
Один метод - Много вариантов
• Перемещение Элементов:
append(), appendTo(), before(), after()
• Перемещение Элементов:
append(), appendTo(), before(), after()

• Аттрибуты
css(), attr(), html(), val(), addClass()
• Перемещение Элементов:
append(), appendTo(), before(), after()

• Аттрибуты
css(), attr(), html(), val(), addClass()

• События
bind(), trigger(), unbind(), live(), click()
• Перемещение Элементов:
append(), appendTo(), before(), after()

• Аттрибуты
css(), attr(), html(), val(), addClass()

• События
bind(), trigger(), unbind(), live(), click()

• Эффекты
show(), fadeOut(), toggle(), animate()
• Перемещение Элементов:
append(), appendTo(), before(), after()

• Аттрибуты
css(), attr(), html(), val(), addClass()

• События
bind(), trigger(), unbind(), live(), click()

• Эффекты
show(), fadeOut(), toggle(), animate()
• Сканирование
find(), is(), prevAll(), next(), hasClass()
• Перемещение Элементов:
append(), appendTo(), before(), after()

• Аттрибуты
css(), attr(), html(), val(), addClass()

• События
bind(), trigger(), unbind(), live(), click()

• Эффекты
show(), fadeOut(), toggle(), animate()
• Сканирование
find(), is(), prevAll(), next(), hasClass()
• Ajax
get(), getJSON(), post(), ajax(), load()
Также можно передать в $() функцию
которая запустится после загрузки страницы
Также можно передать в $() функцию
которая запустится после загрузки страницы
Также можно передать в $() функцию
которая запустится после загрузки страницы
Также можно передать в $() функцию
которая запустится после загрузки страницы

Есть и другой вариант использования


Аттрибуты
Получить
.attr(„id‟)
Получить
.attr(„id‟)
.html()
Получить
.attr(„id‟)
.html()
.val()
Получить
.attr(„id‟)
.html()
.val()

.css(“top”)
Получить
.attr(„id‟)
.html()
.val()

.css(“top”)
.width()
Получить Установить
.attr(„id‟) .attr(„id‟, „foo‟)

.html()
.val()

.css(“top”)
.width()
Получить Установить
.attr(„id‟) .attr(„id‟, „foo‟)

.html() .html(“<p>hi</p>”)
.val()

.css(“top”)
.width()
Получить Установить
.attr(„id‟) .attr(„id‟, „foo‟)

.html() .html(“<p>hi</p>”)
.val() .val(“new val”)
.css(“top”)
.width()
Получить Установить
.attr(„id‟) .attr(„id‟, „foo‟)

.html() .html(“<p>hi</p>”)
.val() .val(“new val”)
.css(“top”) .css(“top”, “80px”)
.width()
Получить Установить
.attr(„id‟) .attr(„id‟, „foo‟)

.html() .html(“<p>hi</p>”)
.val() .val(“new val”)
.css(“top”) .css(“top”, “80px”)
.width() .width(60)
События
Эффекты / Анимация
Типы эффектов
Типы эффектов

#1. Показать / спрятать


Типы эффектов

#1. Показать / спрятать

#2. Постепенное появление


и исчезновение
Типы эффектов

#1. Показать / спрятать

#2. Постепенное появление


и исчезновение
#3. Скольжение вверх и низ
Сканирование
AJAX
Расширяем jQuery
$(“div”).myPlugin();
$(“div”).myPlugin();
Подождите, это еще не все!
jQuery – это не только простой код
jQuery – это не только простой код
и быть более продуктивным
jQuery – это не только простой код
и быть более продуктивным

Это также...
jQuery – это не только простой код
и быть более продуктивным

Это также...
отличное сообщество
Тестирование плагины книги
поддержка примеры скорость
открытая (бесплтано) лицензия
легковесный, читаемый код
Мировое господство

jQuery

http://google.com/trends?q=dojo+javascript,+jquery+javascript,+yui+javascript,+prototype
+javascript,+mootools+javascript&ctab=0&geo=all&date=all&sort=1
Используется в лучших
10,000 сайтах

http://trends.builtwith.com/javascript
Плагины
jQuery имеет тысячи плагинов на сайте
http://plugins.jquery.com/

jQuery UI
Набор официальных UI-компонент:
http://jqueryui.com
Поддержка
Основной форум jQuery
http://forum.jquery.com

Страница jQuery discussion docs


http://docs.jquery.com/Discussion

Комната IRC jQuery


#jquery на сервере FreeNode.net
Спасибо
!

Оценить