Шпора кода по jQuery

jQuery - это надстройка над JavaScript, с помощью которой программы на JavaScript пишутся быстее и код выглядит короче.
Для вставки jQuery на страницу, нужно:

1. добавить в код страницы перед </body> ссылку на файл библиотеки jQuery: <script src='https://code.jquery.com/jquery-3.7.0.min.js'></script>
2. начать код jQuery реакцией на событие готовности DOM-модели документа (ready):
   
   $(document).ready ( function() {
   // код jQuery здесь
   // Пример: $('a').css('background', 'yellow'); - эта функция возьмет все анкоры страницы и сделает их фон желтым.
   } );
   

• Установка кода, который выполнится после загрузки страницы и окончания формирования DOM-модели страницы: $(document).ready(function(){ // do something; })
• Поиск элементов:
  • Поиск всех элементов по их тегу, классу, id или их комбинации: $('tagName'), $('#idName'), $('.className'), $('tagName.className'), .find('tagName.className')
  • Поиск 1-го и последнего потомка элемента: .first(), .last();
  • Поиск родственных элементов: .parent(), .parents(), .children(), .next()
• Выборка элементов:
  • $('tagName:odd'),
  • .filter('.className'),
  • $('a[href*="value_part"]'),
  • .not('[alt]'),
  • $('tagNameWhichThereAreManyOfOnPage').eq(4),
  • .find('className');
• Обработка выборки элементов:
  • .length - подсчет длины набора элементов;
• Работа с классом элемента:
  • Изменение класса элемента: .addClass('className'), .removeClass('className');
  • Переключение класса элемента: $(this).toggleClass('className');
• Чтение и замена текстового и HTML-содержимого элемента:
  • Чтение HTML-содержимого: .html(),
  • Замена HTML-содержимого: .html('new text'),
  • Чтение текстового содержимого: .text(),
  • Замена текстового содержимого: .text('new text')
• Чтение и изменение существующего элемента:
  • Чтение значение атрибутов элемента: let color = .css('color');
  • Изменение значения атрибутов элемента: .css('border', '1px solid red') или .css({'border':'1px solid red'})
  • Поиск внутри тега слов, содержащих определенную букву или несколько букв, и изменение стиля таких слов: .find(':contains('r')').css({'color' : 'red'});
  • Применение функции ко всем элементам, удовлетворяющим условиям поиска/фильтрации: .each( function() { // do something; } )
  • Работа с видимостью элемента: .show(), .hide(), .show(hiding_speed_in_ms), .hide(hiding_speed_in_ms), .toggle() (Пример: $('button#idName').on('click', function() { $('tagName').toggle(); } ) ), $(':hidden').show(); $(':visible').hide()
  • Определение значений атрибутов элементов: .val(), .width(), .height(), .attr('attribute_name'), .css('property'), .is(':hidden');
  • Установка значений атрибутов элементов: .width(300), height(200), .attr('attribute_name', 'new_attribute_value'), .css('property_name', 'new_value'), .css({'property1' : 'new_value1', 'property2' : 'new_value2'}),
• Создание нового элемента и его добавление к существующим элементам:
  • Создание нового элемента: let newDiv = $('<div>content</div>').addClass('new').attr('id', 'newUniqueId');
  • Добавление нового элемента к существующему: $('elemId').add('p').addClass('.className').css('background','yellow'),
  • Вставка нового элемента в конец существующего элемента: newDiv.appendTo('parentTagId') или $('parentTagId').append(newDiv);
  • Вставка нового элемента в начало существующего элемента: newDiv.prependTo('parentTagId') или $('parentTagId').prepend(newDiv);
  • Вставка HTML-кода в конец содержимого тега/тега с классом/тега с id: $('name').append('<p>some text</p>'), $('.className').append('<p>some text</p>'), $('#idName').append('<p>some text</p>');
• Запрет выполнения действия по-умолчанию: .preventDefault(),
• Работа с событиями элемента:
  • Назначение и убирание событий для элемента: .on('eventName', eventData, function(){} ), .off('eventName'), .one('eventTypeToReactOnceFor', function(){})
  • Установка обработчика события наведения/убирания курсора мыши с элемента: .hover(()[,()])
  • Эмуляция происхождения события: .trigger('eventName') ( вместо вызова типа .eventName(), который уже устарел)
  • Привязка функции с параметром в качестве реакции на событие элемента: .bind('eventType', function(event, msg) { alert(msg); } )
  • Искуственный вызов события: .trigger('eventType', ['ParameterValueForFunctionProcessingTheEvent'])
  • Вывод параметров события:
    • event.pageX, .pageY - возвращает координаты X и Y точки возникновения события, отсчитывая от левого верхнего угла документа
    • event.target - возвращает имя тега, вызвавшего событие
    • event.timeStamp - возвращает кол-во миллисекунд, прошедших между 1 января 1970 года и моментом вызова события
    • event.type - возвращает тип события
    • event.which - возвращает нажатую клавишу
• Выполнение AJAX-запросов:
  • // GET-запрос к /some/script.php?name=Simon
    jQuery.get('/some/script.php', {'name': 'Simon'}, function(data) {
    alert('Сервер ответил: ' + data);
    });
  • // POST-запрос к /some/script.php:
    jQuery.post('/some/script.php', {'name': 'Simon'}, function(data) {
    alert('Сервер ответил: ' + data);
    });
  • Скачивание JSON-файла и его обработка:
    jQuery.getJSON('/some.json', function(json) {
    alert('JSON выдал: ' + json.foo + ' ' + json.bar);
    });
  • Скачивание и выполнение кода из серверного файла:
    jQuery.getScript('/script.js');
• Анимация элемента:
  • Разворачивание вниз: .slideDown(), .slideDown(slidedown_time_in_ms, callbackFunction()),
  • Сворачивание: .slideUp(),
  • Отключение анимации на странице и переход всех объектов с анимацией в их конечное состояние: $.fx.off = true,
  • Включение анимации на странице: $.fx.off = false,
  • Изменение прозрачности элемента: .fadeIn(), .fadeOut(), .fadeTo()
  • Запуск специфической анимации элемента: $('#idName').animate({'param_name':'param_value'}, execution_time_in_ms, function_to_be_executed_after_animation_is_complete(){})
  • Установление задержки запуска имеющихся в очереди анимаций: .delay(ms);
  • Остановить текущую анимацию, очистить очередь анимаций и закончить все анимации выбранных элементов: .finish();
• Если у функции есть 2-й параметр, то он - это название callback-функции, т.е. такой функции которая будет вызвана после окончания выполнения вызывающей функции.

Упражнение 1 - добавление элемента с определенным содержанием в конец родительского элемента; удаление заданного элемента из списка дочерних элементов.

Упражнение 2 - изменение цвета фона элемента на рандомный цвет из списка.

Упражнение 3 - замена цвета фона элемента по клику на кнопке.

Упражнение 4 - скрытие/показ элемента по нажатию на кнопке.

Упражнение 5 - изменение фона элемента при наведении/отводе курсора мыши на него.

Упражнение 6 - Определение id элемента.

Упражнение 7 - поиск элементов и изменение их свойств

• 1
• 2
• 3
• 4
• 5

text to be replaced