jQuery

us.content $('.element').closest('.class').addClass('active class2'); // Найти .class по дереву DOM выше и добавить класс .active // Найти по атрибуту [attribute=value] // Редирект на страницу success document.location.href = '/success' // Если есть ссылка класс if ($('.class').is(':has(a)')) { console.log(11) } if ($('.class').hasClass('search-class')) { console.log(11) } // Возможности closest('.class') // Найти выше по дереву элемент find('.class') // Найти вложенный элемент parent() // Тег родителя parent('.class') children() // Дочерний тег children('.class') .eq(1) второй элемент find(':first-child') // Первый дочерний тег next() // Следующий тег next('.class') prev() // Тег лежащий выше prev('.class') siblings() // Тег лежащий на одном уровне css('display') // Получить стиль display элемента css('display', 'block') // Задать стиль display элемента html() // Получить или вставить html код text() // Получить или вставить текст delay(500) // Задержка 0.5 секунды hide() // Скрыть show() // Показать fadeOut() // Скрыть с анимацией fadeIn() // Показать с анимацией fadeToggle(300) // Показать скрыть переключатель за 300 мс // Из объекта jQuery получить JS $('#item').get(0) serialize() // Собирает данные всех полей формы trigger('reset') // Сбросить заполненые поля формы $('form').before('<a href="#">Link</a>').hide() // Вставить ссылку перед формой, а форму скрыть // Делегирование события клик, событие двойной клик dblclick $(document).on('click', '.class', function () { }) $('.class').on('click', function () { }) // Проверить чекбокс $('#item').prop('checked') // Сделать чекбокс не нажатым $('#item').prop('checked', false) // Получить data атрибут $('#item').data('name') // Вставить data атрибут $('#item').attr('data-name', 'value') // Удалить атрибут $('#item').removeAttr('style') $('a').wrap('<p class="link"></p>') // Обернуть все теги а в тег р $('p.link').empty() // Очистить содержимое тега р $('div').append('p.link') // Вставить p.link в div $('p.link').add('div') // Вставить в конец $('button').attr('disabled', true) // Блокировать кнопку, заблокировать $('button').attr('disabled', false) // Разблокировать кнопку $('body, html').scrollTop($(document).height()) // Прокрутка вниз страницы // При скроле ниже 300рх сработает этот скрипт $(window).scroll(function() { if ($(window).scrollTop() > 300) { // code... } }) // Тоже с делегированием var marker = true; $(window).on('scroll', function () { if ($(window).scrollTop() > 300) { if (marker) { // код функции сработает один раз при скролинге менее 300рх marker = false; } } }) // На ширине менее 1200рх сработает это условие if (document.body.clientWidth > 1200) { // code... } // Переключатель на радиокнопке $('input[type=radio][name=switch]').change(function() { if (this.value == 'option1') { console.log(11) } else if (this.value == 'option2') { console.log(22) } }) // Переключатель $('.fa_toggle').click(function() { if ($(this).hasClass('fa-toggle-off')) { $(this).removeClass('fa-toggle-off').addClass('fa-toggle-on'); } else { $(this).removeClass('fa-toggle-on').addClass('fa-toggle-off'); } }) $('#showHideContent').click(function () { if ($('#content').is(":hidden")) { $('#content').show("slow"); } else { $('#content').hide("slow"); } }) // При наведении мыши $('.class').hover(function() { // code... }, function() { // При уходе наведения // code... }) // При наведении мыши с делегированием $('.products').on({ mouseenter: function() { $(this).addClass('active') }, mouseleave: function() { $(this).removeClass('active') } },'.product.desktop') // При наведении мыши $(document).on('mouseenter', '.class', function(e) { // code... }) // При уходе наведения $(document).on('mouseleave', '.class', function() { // code... }) // Скрываю и показываю после задержки $('.content').fadeOut('fast').delay( 1200 ).fadeIn('fast') var element = $('#radio:checked'); if(element.length == 0) alert('Вы не выбрали!'); else alert('Вы выбрали ' + element.get(0).value); //при выборе радио-кнопки вывожу её значение // Собираю все имена и значения элементов циклом. var data = {}; $('.img_folder button').each(function(i, el) { data[this.name] = $(this).val() }) // после этого можно data отправлять ajax запросом // Собираю все значения и добавляю в массив var data = []; $('.in_img_folder button').each(function() { var value = this.value if (value != 0) { data.push(value) } }) var a = $('<h3>hello</h3>') // Создание объекта jQuery var b = $('form input').val() ? $('form input').val() : 1 // Если есть значение input возьму его, если нет, то 1 $('.class').append(a) // Вставляем в класс .class переменную а $('form input').val() // Берём значение input можно select $('*').css({border: '1px solid #ccc', top: '70px'}) // Зададим css стили $('.menu')[0].innerHTML = 'test'; // Обращаемся к первому элементу класса меню и заменяю тектс на test $('#something').click(function() { location.reload() // Перезапустить страницу //window.location = location.pathname; // Перезапустить страницу }) // Задержка выполнение на 2 секунды setTimeout(function () { //code }, 2000) /* 'slow' 600 'normal' 400 'fast' 200 'linear' равномерно 'swing' c небольшим ускорением Для .hide() после применять .remove() */ $(this).attr('checked', 'checked'); // К чекбосу или радио отмечен $(this).removeAttr('checked'); // Снять отметку // Делегируем событие и отслеживаем изменение input, также отключаем действующую ссылку $(document).on('change', '.aside input', function(e) { e.preventDefault() }) // Делегируем событие и отслеживаем отправку формы $(document).on('submit', '.form_promocode', function(e) {}) // Отлеживание за radio или checkbox if ($('#shop input').prop('checked')) { $('form').on('change', '#shop input', function() { if($(this).prop('checked')) { $('#promo').show('fast') } else { $('#promo').hide('fast') } }) } else { $('form').on('change', '#shop input', function() { if($(this).prop('checked')) { $('#promo').hide('fast') } else { $('#promo').show('fast') } }) } // При изменении чекбокса выводим в консоль id чекбокса и если отмечен true $(document).on('change', 'input[type=cheakbox]', function() { $('input[type=cheakbox]').each(function() { console.log($(this).attr('id'), $(this).prop('checked')) }) }) // Добавляет в localStorage новый ключ со значением localStorage.setItem('key', 'value') // Берем определенное значение из хранилища по ключу localStorage.getItem('key') // Удаляем ключ localStorage.removeItem('Ключ') // Очищаем все хранилище localStorage.clear() // При загрузке файла через input file, поставляем иконку и текст $('.custom_input_file input[type=file]').change(function() { var self = $(this), fileName = self.get(0).files[0]['name'] || 'Файл загружен' self.siblings('label').html('<i class="fa fa-file-o" aria-hidden="true"></i>' + fileName) }) // Проверяем есть ли элементы в объекты jQuery var elements = $('.elements') if (elements.length) {} // Проверяем подключен ли jQuery if (window.jQuery) {} // Функция после загрузки страницы $(function () { })