МЕТОДЫ в jQuery

ОСНОВЫ JQUERY

ВЫБОРКА в JQUERY

МЕТОДЫ в JQUERY

СОБЫТИЯ в JQUERY

Что такое "методы"?

Выполнив jQuery-выборку нужных элементов, можно приступать к действиям над ними, т.е. прописывать им различные методы.

Методы - означает: присвоить действия отобранным в jQuery-набор элементам.

В результате этого элементы начинают что-то делать: исчезать, появляться, выделяться, подсвечиваться, моргать и т.д., и т.п..

Каждый метод что-то делает!

Любой метод либо сам что-то возвращает, либо получает параметр и выполняет, что указано в параметре.
Короче, после пристыковки кода методов к выборке, становится заметным существование jQuery на странице сайта.

Не забывать! Подключать jQuery к каждой странице!

Далее привожу список изученных самых основных(!) методов. Вообще их, конечно, побольше будет, но до сих пор вполне хватало этих. (Почему? Смотреть в конце страницы.)

О списке методов

Заголовки в списке - это №/№ уроков на диске, относящихся к отмеченному методу, или группе методов.

Методы

Действия над отобранными элементами.

Урок 67

.text('Текст'); - меняет текст только(!); покажет, что прописано в скобках.
HTML-тэги НЕ использовать!

.hide(3000); - элемент спрячет за 3 секунды

.show(3000); - элемент покажет за 3 секунды

С пустыми параметрами (...) просто спрячет или покажет.

Урок 68. Цепные функции

Пример:
var myLogo = $('#logo'); - лучше сначала создать глобальную переменную myLogo.hide(3000).show(3000); - отобранное спрячет, потом опять покажет.

Длина цепочки НЕ ОГРАНИЧЕНА(!).

Урок 69. Автоматические циклы

Пример:
$('#div_for_img img:not(#img_1)').hide(3000); - спрячет все рисунки, кроме 1-ого.

Ни в какую переменную var выражение уже брать не обязательно (хотя можно и взять).

Урок 70

.width(500); - узнать/изменить значение ширины

.height(180); - узнать/изменить значение длины

С пустыми параметрами (...) просто получим значения. Их можно узнать через alert.

Урок 71

Данная функция специально создана для работы с HTML!

.html('...'); - получить/изменить HTML-код; можно использовать ЛЮБЫЕ(!) тэги. Обязательно! Код в одну строчку и в кавычках!

Урок 72

.fadeOut(5000); - элемент растает за 5 секунд

.fadeIn(5000); - элемент появится за 5 секунд

Урок 73

.fadeTo(5000, 0.5); - как растаять: за какое время(?), до какой степени(?) (0 - 1)

Пример:
$('img').fadeTo(5000, 0.1).fadeTo(5000, 1); - рисунки побледнеют за 5 секунд и снова станут яркими через 5секунд.

Урок 74

.slideUp(5000); - очень аккуратно исчезнет "вверх", как бы "съёживаясь"

.slideDown(5000); - очень аккуратно исчезнет "вниз", как бы "разложится"

У этих методов 2-ого параметра нет. Пробовал!

Урок 75. Методы работы с атрибутами

.attr('width'); - узнаем значение ширины элемента

.attr('width', '700'); - установим элементу новое значение ширина 700px

.removeAttr('title'); - удалим атрибут title

Урок 76. Методы работающие с таблицей CSS

Для их использования, сначала создать класс в таблице стилей CSS. Любой, к примеру .new

.addClass('new'); - класс добавит

.removeClass('new'); - класс удалит

Имя класса .new прописывается в параметрах уже БЕЗ(!) точки .

Урок 77. Функция CSS

Данная функция специально создана для работы с CSS!

.css('font-size'); - узнаем значение свойства font-size. НО! Учесть особенности!

Для получения(!): сокращений jQuery НЕ ПОНИМАЕТ! Нужно указывать полное написание свойства: к примеру, НЕ 'font', а 'font-size', и т.д..

И ещё! Цвет jQuery вернёт в rgb(44,25,50), а не привычной "решёткой" #

НО(!) - это всё для получения! ПЕРЕДАВАТЬ(!) - можно, как обычно.

Изменение свойств и значений

Чтобы изменить, нужно передать 2 параметра: "свойство", "значение" через запятую ,

.css('color', '#3F40CC'); - изменит цвет на указанный во втором параметре

Чтобы изменить сразу несколько свойств, есть три способа сделать это.

.css('color', '#3F40CC').css('margin', '10px').css('border', '2px'); - цепочечный метод

.css({'color':'#3F40CC','font-size':'25px'}); - ЛИТЕРАЛ объекта - самый интересный!

Третий способ - через переменную.

var proba = $('#myFoto');
proba.css('border', '4px solid red'); - покажет рамку 4px, сплошную, красную

Урок 78. Анимация CSS

.animate({'width':'450px'}, 9000); - меняет, как CSS, но плавно(!), за 9 секунд.

Этот метод способен принять в себя 3 параметра, даже функцию!

.animate({'width':'450px'}, 9000, function(){alert('Готово!');});

Важно! Если вставляется НЕ анонимная функция, а какая-то своя, сделанная ранее, то круглые скобки ( ) уже НЕ ставятся, а просто name (название функции).

.animate({'width':'450px'}, 9000, name);

Учесть особенность этого метода!
При передаче свойств, которые в обычном использовании пишутся через дефис, здесь он убирается, а следующая буква заменяется на заглавную.

Вот так: margin-right -> marginRight

Урок 79. Вставка контента

.append('...'); - вставит ПОСЛЕ того, что есть в блоке; любые(!) HTML-тэги

.prepend('...'); - вставит ДО того, что есть в блоке; любые(!) HTML-тэги

.after('...'); - вставит ПОСЛЕ самого блока; любые(!) HTML-тэги

.before('...'); - вставит ДО самого блока; любые(!) HTML-тэги

Урок 80. Полуавтоматический цикл

.each(function(){$(this).width();}); - перебрать каждый элемент выборки, и установить им ширину, какую укажем. Обычно вводят какие-то дополнительные условия.
Пример:
$('img').each(function(){
if($(this).width() > 200){
$(this).fadeOut(3000);}}); Приведён пример кода, в котором скрипт "пройдётся" в цикле по всем рисункам и, отобрав только те, у которых ширина больше 200px, спрячет их за 3 секунды.

Вспомнить! Анонимная функция нужна для того, чтобы появилась возможность прописать код условий. Напрямую в параметрах коды НЕ пишутся!

Урок 81. Обращение к элементам

.size(); - количество элементов, попавших в jQuery-выборку
(аналогичен свойству .length; в обычном JavaScript)

.get(0); - доступ к 1-ому элементу отбора.
(!)Этот метод возвращает НЕ jQuery-выборку, а объект обычного JavaScript.

Урок 82. Клонировать, удалить

.clone(); - клонировать, копировать элемент выборки

.remove(); - именно удалит элемент из DOM-дерева, а не скроет его. НО(!), позволяет сохранить элемент в переменную, и использовать её потом ..., если нужно.

Урок 95. Специальный метод для форм

.val(); - позволяет узнать значение атрибута val. Возвращает именно то, что прописано в HTML-коде.

.val('Проверить'); - позволяет передать/изменить значение атрибута val

HTML-тэги НЕ использовать!

Вспомнить! Формы - это "особое сословие". Вот им и уделяется столько внимания. И фильтры у них есть, и состояния у некоторых фильтров есть ... ... .

Список фильтров давал на предыдущей странице, но они могут пригодиться и здесь.

Дополнительная информация из справочника

Взята из справочника jQuery, расположенного на моём же сайте в соответствующем подразделе страницы "Полезное".

.load(); - производит запрос HTML-данных к серверу и помещает их в выбранный элемент страницы

.data(); - устанавливает/возвращает пользовательские переменные выбранным элементам страницы

$('div').find('span'); - отберёт ВСЕ тэги span внутри ВСЕХ div-элементов

$('div').children('.big'); - отберёт ВСЕ элементы с классом .big, находящиеся внутри ВСЕХ div-элементов

.find('li:first'); - найдёт ВСЕ 1-ые элементы списков

.find('li.showed'); - найдёт ВСЕ элементы списков с классом .showed

Обратить внимание(!) на необычный синтаксис: место прописания .

$.get(); - производит запрос к серверу методом GET

$.post(); - производит запрос к серверу методом POST

О справочнике

Без некоторых, приведённых в нём методов, вполне можно обойтись, или прописать гораздо проще.

Вместо метода .find(); можно написать просто $('div span');

Аналогично. Вместо метода .children(); можно просто указать $('div > .big');, что значит: "выбрать дочерние элементы тэга div, имеющие класс .big".

Поэтому, я вовсе не зря написал в начале главной страницы своего справочника, что по урокам обучающего диска можно выполнить НЕ МЕНЕЕ 90% работ.

* * *

О МЕТОДАХ хватит, перехожу к СОБЫТИЯМ (действиям пользователя).

Нижняя синяя стрелка вернёт на 2-ую страницу справки, посвящённую теме "Выборка в jQuery" (отбор элементов).

ВВЕРХ