Обращение.

jQuery(); или $();

Выборка.

- элементы выбираются из html также селекторами, как в css. Затем оборачиваются в кавычки. При обращении по атрибуту в отличии, от css значение без кавычек.

пример:

css: img[height='150']{}

jquery: $('img[height=150]');

Выбрать четные элементы псевдокласс :even

для нечетных :odd

- не забываем что элементы это массив и выборка с 0.

Выбрать все кроме, псевдокласс :not()

пример:

$('img:not(.logo img)');

Выбрать именно такой элемент псевдокласс :has()

пример:

$('li:has(a)');

Выбрать элемент по тексту пседокласс :contains

пример:

$('p:contains(client)');

Выбрать первый и последний элементы псевдоклассы :first и :last

пример:

$('li:first'); и $('li:last');

Выбрать скрытые и видимые элементы псевдоклассы :hidden и :visibility

пример:

$('div:hidden'); и $('div:visibility');

Команды для подключения в шапке.

$(document).ready(function(){ код }); или $(function(){ код });

Присваивание объектов переменной.

пример:

let tagP = $('p');

Методы.

.text() - для работы с текстом

.hide() - скрыть объект

.show() - отобразить объект

- в скобках передается время сокрытия или отображения. Через запятую вторым параметром можно указывать функцию, которая сработает после отображения или сокрытия. Методы можно писать друг за дружкой.

пример:

$('.mainText p').hide(2000).show(2000);

Циклы(такие же, как в js)

пример:

Как можно без цикла применить метод ко всем элементам массива:

$('.icons > div').hide(3000);

Получение высоты и ширины объекта методы .width() и .height() - скобках указываются, параметры новой высоты и ширины которые хотим задать.

пример:

let w = $('.mainText').width(350);

function widthAndHeight(element){

let className = "." + element; // получаем .element

let w = $(className).width(); //получаем ширину

let h = $(className).height(); //получаем высоту

$('.mainText p').text('Ширина: ' + w + '; Высота: ' + h); // задаем вывод

}

widthAndHeight('btn'); // вызывет нужный нам элемент

.isNaN() - проверять на число

alert() - всплывающее сообщение метод

.html()- для работы с кодом html, можно менять содержимое тегов, добавляя или убирая теги внутри тега родителя. Теги пишутся слитно в, одну строку.

Методы .fadeOut() и .fadeIn() - для плавного исчезновения и отображения в скобках передается время отображения и сокрытия. Вторы аргументом, через запятую в скобках можно передавать функцию, которая отработает после отображения и сокрытия, или в скобках можно передать переменную хранящую время или аргумент времени.

Метод .fadeTo(время, степень прозрачности); - для изменения степени прозрачности. Третьим аргументом через запятую указывается функция которая отработает после.

Метод .slideUp() и .slideDown() - для сворачивания и разворачивания объектов, аргументы как у предшественников.

Метод .attr() - для того чтоб узнать значение атрибута

пример:

let src = $('.logo img').attr('src'); alert(src);

// выведет img/logo.png, через запятую вторым аргументом в скобках, передается новое значение атрибута. Для создания нового атрибута (добавить атрибут).

.removeAttr('src'); - удаляет атрибуты.

Методы .addClass() и .removeClass() - для удаления и добавления классов у объектов.

Метод .css()- добавляет объекту свойства, с помощью него можно узнать значение свойства объекта. Если хотим поменять значение свойству, передаем новое значение вторым аргументом, через запятую. Можно использовать цепным способом, но лучше через запятую в одном методе ({'ключ': 'значение'}).

Метод .animate() - для анимации, первым аргументом передаем изменяемые свойства, вторым время анимации, третьим аргументом функцию.

Методы .before() и .after() - для добавления html тегов до или после нужного нам тега.

Методы .append() и .prepend() - добавляют html теги внутрь родительского тега в конец и в начало.

$(this) - текущий элемент.

window - обратиться ко всему окну

document - ко всему файлу метод

.each() - для обращения к каждому объекту, чтоб перебрать их и применить к ним функцию. Функция передается в скобках аргументом. Внутри элемента к каждому текущему элементу мы обращаемся this.

пример:

$('.icons img').each(function() { if($(this).attr('src') == 'img/icon3.png') { наш код например $(this).fadeOut(1000); } });

Свойство .length - позволяет узнать длину массива(чтобы узнать количество элементов). Можно использовать также для перебора массивов.

Метод .clone() - для клонирования объектов в переменную.

Метод .remove()- для удаления объектов - если при этом присвоить его переменной, можно через неё ее повторно вызвать.

События.

.mouseover() - наведение курсора на элемент.

.mouseout() - вывод курсора за пределы элемента.

.click() - нажатие на элемент.

.mousemove() - перемещение курсора по элементу.

.mouseup() - когда нажали на мышь, срабатывает во время отжатия кнопки мыши.

.submit() - кнопка типа submit нажата.

.focus() - когда элемент получает фокус(выделен).

.blur() - элемент теряет фокус.

.change() - когда элемент меняется(например значение вводят в input).

.reset() - кнопка типа reset нажимается(сброс).

.keypress() - нажатие кнопки на клавиатуре.

.keydown() - кнопка на клавиатуре нажата, но не отпущена.

.keyup() - когда кнопка на клавиатуре отпускается.

.load() - когда все файлы сайта загружены.

.resize() - проверяет меняться ли размер окна браузера.

.scroll() - при скролле.

.ready() - когда все прогружено.

.hover(функция при наведении, функция когда наведение снято)

confirm() - задать вопрос в модалке.

eventObject

пример:

$('.mainText').click(function(e) { alert(e.screenX + " " + e.screenY); }); - позволяет получить данные с экрана.

screenX и screenY - координаты от края монитора.

pageX и pageY - координаты от края браузера.

altKey, ctrlKey, shiftKey - проверяет зажаты ли кнопки alt, ctrl, shiftKey возвращает false или true.

target - возвращает информацию на какой тип объекта было произведено нажатие.

.preventDafault() - отменяет стандартное поведение объекта.

return false - делает то же самое, но после нее функция прекращает все действия.

пример:

можно использовать для кнопки 'отмена'

$('.btn, .arrowDown').click(function(e) {

let answer = confirm('Вы хотите отправить данные?');

if(!answer) { e.preventDafault(); }

});

.slideToggle() - сворачивает и разворачивает объект, в скобках передается время.

Фильтры форм выбераем:

:checkbox - чекбокс

:radio - радиобатом

:submit - кнопка отправки

:reset - кнопка сброса

:file - выбор файла

:button - выбор всех типов кнопок

:text - поля тип text

:password - поля тип password

:input - для всех input

:checkbox:checked - выбранные чекбоксы

:radio:checked - выбранные радиобатомы

:selected - выбранное значение в выпадающем списке

Метод .val() - для получения value(значения чекбоксов обрабатываются через метод .each() для перебора массивов)

// Перебор массива $.each(arrf, function(inf, valf){ // inf — индекс текущего элемента

// valf — его значение })

.attr('disabled', 'disabled') - добавляем атрибут disabled со значением disabled

.removeAttr('disabled') - сбрасываем атрибут disabled

.on() - новый метод установки обработчиков событий. объединяет в себе функциональность .bind(), .live(), .delegate() первым параметром передает событие, вторым функцию.

empty() - очищает элемент