Jquery

jQuery – это JavaScript-
библиотека(некоторые называют ее
фреймворком), фокусирующаяся на
взаимодействии JavaScript, HTML и
CSS

Скачать: http://jQuery.com
Выбрать вкладку Download – Current Release – Minified
Пишименьше, делай больше

где селектор - элемент или элементы, с которыми мы будем
что-либо делать.
действие - что именно мы будем делать с выбранными
элементами. Мы можем добавить какой-либо
эффект, css-стиль, изменить html-код и т.д.
Здесь же могут быть указаны какие-либо
события.
свойства действия - если они предусмотрены действием.

:gt(index) - выбирает элементы с индексом больше указанного.
Пример: $("td:gt(2)").css("font-style", "italic");
Данная инструкция напишет курсивом текст во всех ячейках таблицы,
начиная со второй (т.к. нумерация идет с нуля, то зрительно кажется, что с
третьей ячейки).
:lt(index) - выбирает элементы с индексом меньше указанного.
Пример: $("td:lt(4)").css("font-style", "italic");
Данная инструкция напишет курсивом текст в первых пяти ячейках
таблицы.
Фильтры контента
:header - выбирает все элементы, которые являются заголовками (h1,
h2...).
Пример: $(":header").css("color", "red");
Данная инструкция сделает все заголовки красными.
:contains (text) - выбирает элементы, которые содержат переданный текст
(text).
Пример: $("div:contains('New')").css("text-decoration", "underline");
Данная инструкция подчеркнет все элементы div-а, содержащие
подстроку New.
jQuery. Фильтры

:empty - выбирает все элементы, которые не содержат потомков (т.е. пустые).
Пример: $("td:empty").text("Пусто");
Данная инструкция найдет все пустые ячейки таблицы и вставит в них текст
"Пусто".
:has(selector) - выбирает элементы, которые содержат хотя бы один элемент,
указанный в селекторе.
Пример: $("div:has(p)").css("font-style", "italic");
Данная инструкция найдет те div-ы, в которых есть хотя бы один параграф (p) и
сделает текст в них курсивом.
:parent - выбирает родительские элементы, т.е. те, у которых есть потомки.
Пример:
$("td:parent").css("font-style", "italic");
Данная инструкция найдет все ячейки таблицы, в которых есть текст или еще что-
либо, и сделает их шрифт курсивом.
:animated - выбирает элементы, которые в данный момент являются
анимированными.
Пример:
$("div:animated").css("border", "1px solid red");
Данная инструкция найдет анимированные div-ы и обведет их рамкой.
jQuery. Фильтры

:hidden - выбирает все скрытые элементы и элементы input, имеющие тип
"hidden".
Пример: $("div:hidden").show();
Данная инструкция покажет все скрытые div-ы.
:visible - выбирает все видимые элементы.
Пример: $("div:visible").css("color", "red");
Данная инструкция сделает цвет текста в видимых div-ах красным.
Фильтры атрибутов
[attribute] - выбирает все элементы с указанным атрибутом.
Пример: $("div[id]").css("color", "red");
Данная инструкция сделает цвет текста красным во всех div-ах, у которых есть
идентификатор (id).
[attribute=value] - выбирает элементы с атрибутом, значение которого
соответствует указанному.
Пример: $("input[name='Main']").css("color", "red");
Данная инструкция сделает цвет текста красным у input-а с именем "Main".
[attribute!=value] - выбирает элементы с атрибутом, значение которого не
соответствует указанному.
Пример: $("input[name!='Main']").css("color", "red");
Данная инструкция сделает цвет текста красным у всех input-ов, кроме input-а с
именем "Main".
Фильтрывидимости

…Фильтры атрибутов
[attribute^=value] - выбирает все элементы, соответствующий атрибут которых
начинается с указанного значения.
Пример: $("input[name^='news']").css("color", "red");
Данная инструкция сделает цвет текста красным у тех input-ов, атрибуты name
которых начинаются с news.
[attribute$=value] - выбирает все элементы, соответствующий атрибут которых
заканчивается указанным значением.
Пример: $("input[name$='news']").css("color", "red");
которых заканчивается на news.
[attribute*=value] - выбирает все элементы, соответствующий атрибут которых
содержит в качестве подстроки указанное значение.
Пример: $("input[name*='news']").css("color", "red");
которых содержат подустроку 'news', неважно вначале, в конце или середине.
[selector1]...[selectorN] - выбирает все элементы, которые имеют указанные
атрибуты и соответствующие значения.
Пример: $("input[id][name*='news']").css("color", "red");
Данная инструкция сделает цвет текста красным у тех input-ов, у которых есть
идентификатор и атрибуты name которых содержат подустроку 'news'.

Фильтры форм
:enabled / :disabled - выбирает все элементы, имеющие активное (enabled) /
запрещенное (disabled) состояние.
Пример: $("input:enabled").css("color", "red");
Данная инструкция сделает цвет текста красным только у активных input-ов.
:checked - выбирает все элементы, которые отмечены.
Пример: $("input:checked").lenght;
Данная инструкция сосчитает все отмеченные input-ы.
:selected - выбирает все выбранные элементы.
Пример: $("select option:selected").lenght;
Данная инструкция сосчитает сколько выбрано элементов в списке.
Фильтры потомков
:first-child - выбирает элементы, которые являются первыми потомками своих
родителей.
Пример: $("div span:first-child").css("border", "1px solid blue");
Данная инструкция обведет рамкой первый span в каждом div-е.
:last-child - выбирает элементы, которые являются последними потомками своих
родителей.
Пример: ("div span:last-child").css("border", "1px solid blue");
Данная инструкция обведет рамкой последний span в каждом div-е.
:only-child - выбирает элементы, которые являются единственными потомками своих
родителей.
Пример: $("div button:only-child").css("border", "1px solid blue");
Инструкция обведет рамкой те div-ы, которые имеют кнопку и при том только одну.

Методы для работы с CSS-стилями
В jQuery имеется три категории методов: одни манипулируют с элементами, подходящими по шаблону; вторые возвращают значения
элемента, а третьи изменяют сами элементы.
Рассмотрим методы, которые используются для CSS-стилей:
Для добавления стиля элементу используется следующий метод:
.css(name,value)
Пример:
$("div").css("border", "1px solid blue");
Данная инструкция обведет div синей рамкой.
В качестве параметров здесь используются названия и значения, применимые в CSS: background, border, font-style, color и т.д.
Если необходимо задать для элемента несколько CSS-правил, то лучше использовать следующую конструкцию:
.css({properties})
Пример:
$("div").css({
border:"1px solid blue",
fontWeight:"bolder",
backgroundColor:"red"
});
Данная инструкция обведет div синей рамкой, сделает фон красным, а текст - жирным.
Обратите внимание, что для сложносоставных свойств CSS вроде font-weight и background-color используются иэ эквиваленты из JS:
fontWeight, backgroundColor и т.д.

.addClass(class)
Пример:
$("p:last").addClass("main");
Данная инструкция добавит класс main к последнему элементу параграфа.
.removeClass(class)
Пример:
$("p:even").removeClass("main");
Данная инструкция удалит класс main из всех четных параграфов.
.toggleClass(class)
Пример:
$("p").toggleClass("main");
Данная инструкция удалит класс main из всех параграфов, если он присутствует. И добавит этот класс, если он отсутствует.
.offset()
Пример:
var offDiv=$("div").offset();
Данная инструкция позволяет получить отступы слева и сверху для элемента. Чтобы получить значения конкретного свойства, нужно
использовать следующие свойства: offset.left для отступа слева и offset.top - для отступа сверху.
.height(value)
Пример:
$("div").height();
$("div").height(200);
Данная инструкция позволяет получить (первая строка) и задать (вторая строка) высоту элемента.
.width(value)
Пример:
$("div").width();
$("div").width(200);
Данная инструкция позволяет получить (первая строка) и задать (вторая строка) ширину элемента.
Еще пример:
var widDiv=$("div").width();
$("div.fir").width(300);
Первая строка запишет в переменную widDiv значение ширины первого div-а. Вторая инструкция задаст div-ам класса fir ширину в 300
пикселов.
Это очень интересная особенность методов jQuery: они используются, как для задания параметров (когда принимаются 2 аргумента),
так и для получения значений этих параметров (если передается один аргумент).

3. Методы для работы с html
Цель: Рассмотреть основные методы работы с html и методы для манипуляции с этими элементами.
Основные методы:
html(val) - добавляет html-код в выбранные элементы.
Пример:
$("div.sp").html("Привет");
Данная инструкция добавит во все div-ы с классом sp, span-ы с текстом "Привет".
text() / val() - возвращает текстовое содержимое элемента / значение элемента.
Пример:
$("p").text();
Данная инструкция вернет текст из параграфа.
•text(val) / val(val) - установит текст для элемента / значение для элемента.
Пример:
$("p").text("Привет!");
Данная инструкция в параграфе напишет слово "Привет!".

Теперь давайте рассмотрим методы, которые позволяют манипулировать вставляемыми элементами.
append(content) - добавляет content внутрь всех выбранных элементов ПОСЛЕ существующего контента.
Пример:
$("p").append("Привет");
Данная инструкция добавит в конец параграфа текст "Привет" жирным шрифтом.
appendTo(content) - обратная операция, добавляет В content все выбранные элементы.
Пример:
$("p").appendTo("#main");
Данная инструкция добавит параграф в конец элемента с идентификатором "main".
Иными словами:
$(A).append(B) - добавит В в конец А.
$(A).appendTo(B) - добавит А в конец В.
•prepend(content) - добавляет content внутрь всех выбранных элементов ДО существующего контента.
Пример:
$("p").prepend("Привет");
Данная инструкция вставит в начало параграфа текст "Привет" жирным шрифтом.
•prependTo(content) - обратная операция, добавляет В content все выбранные элементы.
Пример:
$("p").prependTo("#main");
Данная инструкция вставит параграф в начало элемента с идентификатором "main".
$(A).prepend(B) - добавит В в начало А.
$(A).prependTo(B) - добавит А в начало В.
after(content) - добавляет content ПОСЛЕ всех выбранных элементов (заметьте ПОСЛЕ элемента, а не в конец элемента, как в
случае с append.
Пример:
$("p").after("Привет");
Данная инструкция вставит после параграфа текст "Привет" жирным шрифтом.
befor(content) - добавляет content ДО всех выбранных элементов (заметьте ДО элемента, а не в начало элемента, как в случае с
prepend.
Пример:
$("p").befor("Привет");
Данная инструкция вставит перед параграфом текст "Привет" жирным шрифтом.
•insertAfter(content) - вставляет все выбранные элементы ПОСЛЕ content-а .
Пример:
$("p").insertAfter("#main");
Данная инструкция вставит параграф после элемента с идентификатором "main".
$(A).after(B) - вставит В после А.
$(A).insertAfter(B) - вставит А после В.

wrap(html) - оборачивает каждый элемент в элемент обертку.
Пример:
$("p").wrap("");
Данная инструкция обернет каждый параграф span-ом.
wrapAll(html) - оборачивает все элементы в ОДИН элемент обертку.
Пример:
$("p").wrapAll("");
Данная инструкция обернет все параграфы одним span-ом.
wrapInner(html) - оборачивает внутренне содержание каждого элемента.
Пример:
$("p").wrapInner("");
Данная инструкция выделит содержимое каждого параграфа курсивом.
replaceWith(content) - замещает одни элементы другими.
Пример:
$("span").replaceWith("
");
Данная инструкция заменит все span-ы div-ами.
replaceAll(selector) - обратная операция, т.е. все selector-ы будут поменяны на элементы.
Пример:
$("span").replaceAll("
");
Данная инструкция заменит все div-ы span-ами.
empty() - удаляет из элемента все узлы-потомки, включая текст.
Пример:
$("span").empty();
Данная инструкция удалит все содержимое span-ов.
remove() - удаляет сами элементы.
Пример:
$("span").remove();
Данная инструкция удалит все span-ы.
clone() - клонирует элементы.
Пример:
$("b").clone().append("div");
Данная инструкция возьмет элементы, выделенные жирным и добавит их в div.
В последнем примере, мы коснулись еще одного аспекта jQuery, а именно поддержки этой библиотекой цепочки вызовов. Т.е. вы
можете вызывать несколько методов в одной строке, отделяя их точкой. Насколько это удобно? Зависит от Вас. Если это Вас не путает,
то используйте на здоровье. В дальнейшем мы часто будем использовать такой вид записи.

методам для работы с атрибутами и фильтрами. Сначала перечислим сами методы, а потом посмотрим примеры:
attr(name) - обеспечивает доступ к значению указанного атрибута первого элемента в наборе.
Пример:
var a=$("i").attr("title");
$("div").text(a);
Данная инструкция найдет первый элемент в тегах i, найдет атрибут title этого элемента и добавит его значение в div.
attr(properties) - установит атрибуты во всех отобранных элементах.
Пример:
$("img").attr({src:"images/pict.gif", alt:"рисунок"});
Данная инструкция найдет все картинки и установит им соответствующие атрибуты.
attr(key,value) - установит значение (value) атрибута (key) для всех отобранных элементов.
Пример:
$("button").attr("disabled", "disabled");
Данная инструкция установит для всех кнопок значение "disabled" атрибута "disabled".
removeAttr(name) - удалит указанный атрибут в всех элементов.
Пример:
$("img").removeAttr("alt");
Данная инструкция удалит атрибут "alt" у всех картинок.
hasClass(class) - возвращает истину (true), если указанный класс присутствует хотя бы в одном из элементов.
Пример:
if ($("p:last").hasClass("selected"))
$(this).css("background","blue");
Данная инструкция сделает цвет фона последнего абзаца синим, если у него класс "selected".
filter(expr) - ограничивает элементы, к которым следует что-либо применить.
Пример:
$("p").filter(".blue").css("background","blue");
Данная инструкция сделает цвет фона синим, только у тех абзацев, которые имеют класс "blue".
not(expr) - обозначает элементы, к которым не следует что-либо применить.
Пример:
$("p").not(".blue").css("background","blue");
Данная инструкция сделает цвет фона синим у всех параграфов кроме тех, что имеют класс "blue".
is(expr) - возвращает истину (true), если хотя бы один из элементов соответствует выражению.
Пример:
if ($(this).is(":last-child"))
$("p").text("последний");
Данная инструкция добавит в параграф текст "последний", только если проверяемый элемент последний.
slice(start, end) - отбирает поднабор из набора элементов.
Пример:
$("p").slice(1,4).css("background","blue");
Данная инструкция сделает цвет фона синим у всех параграфов с 1 по 4.

5. Методы по обработке событий
Цель: Рассмотреть некоторые методы обработки событий.
Методы:
ready(fn) - назначает функцию, которая будет выполняться, когда документ готов к работе.
Пример:
$(document).ready(init);
Данная инструкция говорит браузеру, что сразу после загрузки документа должна сработать функция init.
bind(type, fn) - связывает обработчик события с самим событием.
Пример:
$(div).bind('click', init);
Данная инструкция говорит браузеру, что при щелчке по div-у должна сработать функция init (здесь click - событие, а init - функция,
обработчик события).

Продолжаем изучать методы по обработке событий:
one(type, fn) - связывает обработчик события с самим событием, но выполняется он только один раз.
Пример:
$(div).one('click', init);
Данная инструкция говорит браузеру, что при щелчке по div-у должна сработать функция init, но инструкции этой функции будут
выполнены только один раз.
Если в нашем примере со списком уроков мы заменим bind на one, то функция desc сработает только один раз, т.е. при первом
выборе урока из списка мы увидим описание, но далее, сколько бы мы не щелкали по пунктам списка, описание меняться не будет.
hover(over, out) - когда указатель мыши находится над объектом, срабатывает функция over, а когда указатель мыши выходит за
объект, то функция out.

Выбирайте ту форму записи, которая вам больше нравится.
toggle(fn1, fn2, ...fn) - переключатель между функциями. Щелчок по элементу вызывает функцию fn1, повторный щелчок -
функцию fn2, третий щелчок - функцию fn3 и т.д.
Пример:
$('p').toggle(
function(){$(this).css("background-color", "blue");},
function(){$(this).css("background-color", "white");}
);
Данная инструкция говорит браузеру, что при щелчке по абзацу, его фон станет синим, при повторном щелчке - белым.
click(fn) - функция fn связывается с событием click.
Пример:
$('div').click(
function(){$(this).css("background-color", "blue");}
);
Данная инструкция говорит браузеру, что при щелчке по div-у, его фон станет синим.
click() - эмулируется возникновение события click.
Пример:
$('div').click( function(){$(this).css("background-color", "blue");} ); $('div:first').click();
Данная инструкция говорит браузеру, что при щелчке по div-у его фон станет синим и эмулирует это событие для первого div-а.
Вот как это выглядит на практике:
первый div
второй div
третий div
Иными словами, вызов метода с функцией в качестве аргумента, например click(fn), назначает обработчик события, вызов без
аргумента, например click(), эмулирует возникновение этого события.
Аналогичные методы определены и для других событий, поддерживаемых javascript, например: blur(), blur(fn), focus(), focus(fn) и
т.д.

6. Визуальные эффекты
Цель: Рассмотреть
Методы видимости - hide(), show() и toggle()
Эти методы отвечают за видимость элементов, работают по принципу скрыть - показать:
hide() - скрыть,
show() - показать,
toggle() - показать, если скрыты и скрыть, если видимы.

Методы свертывания - slideDown(), slideUp() и slideToggle()
Эти методы также отвечают за видимость элементов, но работают по принципу свернуть элемент плавно снизу-вверх - развернуть
элемент плавно свеху-вниз:
slideUp() - свернуть,
slideDown() - развернуть,
toggle() - развернуть, если скрыт и свернуть, если видим.

Задание 6.3 Методы исчезновения - fadeTo(), fadeOut() и fadeIn()
fadeTo(speed, opacity, callback) - уменьшает свойство opacity (прозрачность) к заданному значению,
fadeOut(speed, callback) - уменьшает свойство opacity (прозрачность),
fadeIn(speed, callback) - увеличивает свойство opacity (прозрачность), где:
speed - скорость изменения прозрачности элемента. Может принимать три значения: slow (медленно), normal (нормально) или fast
(быстро), а также значение в миллисекундах.
opacity - значение прозрачности, до которого оно будет уменьшено (число от 0 до 1).
callback - функция, которая будет выполняться после завершения анимации. Ее присутствие необязательно.
Например:

Задание 6.4 Методы анимации - animate() и stop()
animate(params, options) - анимирует стилевые свойства, где:
params - атрибуты css, которые хотим анимировать ("width", "top", "border"...).
options - свойства анимации (в том числе скорость).
stop() - останавливает анимацию.
Например:

Jquery

More Related Content

What's hot (20)

Similar to Jquery (20)

Jquery