Школа программирования

# jQuery и jQuery UI

# Работа с элементами на странице

# Выборка элементов страницы на jquery

const a = $('p');     // по названию тега 
const a = $('.box');  // по названию класса
const a = $('#box');  // по id
const a = $('div a'); // вложенные теги

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

const text = $('#box').text();      // получить текст
const html = $('#box').html();      // получить html
$('#box').text('Измененный текст'); // изменить текст
$('#box').html('Измененный html');  // изменить html

# before(), after(), prepend(), append()

$('#box').before('content');  // добавляет контент до выбранного элемента
$('#box').after('content');   // добавляет контент после выбранного элемента
$('#box').prepend('content'); // добавляет контент внутрь выбранного элемента до остального кода
$('#box').append('content');  // добавляет контент внутрь выбранного элемента после остального кода

# CSS

# css()

const a = $('#box').css('color');    // получить css свойство
$('#box').css('color', 'orange');  // изменить css свойство

// изменение нескольких css свойств
$('#box').css({
	'color':'orange', 
	'font-size':'25px'
});

# addClass(), removeClass()

$('#box').addClass('open');    // добавление класса
$('#box').removeClass('open'); // удаление класса

# toggleClass()

  • Переключатель классов. Добавляет элементу указанный класс, если его нет - иначе удаляет
$('#box').toggleClass('open');

# События и обработчики событий

# Добавление обработчиков событий

// обработчик события щелчка мыши
$('.item').on('click', function(){
	console.log('Щелчок мыши'); 
});

# Удаление обработчиков событий

  • Метод .off() удаляет обработчики событий, назначенные методом .on
$('.item').off('click');

# Атрибуты

# attr(), removeAttr()

const id = $('#box').attr("id"); // получить значение атрибута
$('#box').attr('size', 4);     // изменить значение атрибута
$('#box').removeAttr('title'); // удалить атрибут

# Плавное изменение свойств на jQuery

# hide(), show()

  • Скрывает/показывает элементы на странице (за счет плавного изменения его размера и прозрачности)
$('#box').hide(1000); // скрыть элемент 
$('#box').show(1000); // показать элемент
// 1 - скорость исчезновения (миллисекунды 1с = 1000мс)
// 2 - функция, которая будет выполнена после завершения работы
$('#box').hide(1000).show(1000); // цепные функции

# slideUp(), slideDown()

  • Разворачивает/сворачивает элементы на странице (за счет плавного изменения высоты элементов)
$('#box').slideUp(1000);   // исчезновение (элемент уезжает наверх)
$('#box').slideDown(1000); // появление (элемент выезжает вниз)

# slideToggle()

  • Поочередно разворачивает/сворачивает элементы на странице, как это делают .slideUp() и .slideDown()
$('#box').slideToggle();

# fadeIn(), fadeOut()

  • Скрывает/показывает элементы на странице за счет плавного изменения прозрачности
$('#box').fadeIn(1000);  // плавное появление элемента
$('#box').fadeOut(1000); // плавное исчезновение элемента
// 1 - время исчезновения
// 2 - функция, которая будет выполнена после исчезновения

# fadeTo()

  • Плавно изменяет прозрачность элементов
$('#box').fadeTo(1000,0.4);
// 1 - время исчезновения
// 2 - прозрачность от 0 до 1
// 3 - функция, которая будет выполнена после исчезновения

# fadeToggle()

  • Поочередно скрывает/показывает элементы на странице, как это делают .fadeIn() и .fadeOut()
$('#box').fadeToggle();

# jQuery UI

jQuery UI (opens new window)

← 6.4 Подключение сторонних скриптов →