Как изменить поведение кнопки добавить в корзину woocommerce

Добавление событий к динамически созданным объектам

Для того чтобы повесить событие на элемент, которого ещё нет, можно использовать следующую конструкцию функции :

$(document).on(eventName, selector, handler);

// document или любой другой существующий родительский элемент
// eventName - имя события
// selector - селектор, осуществляющий фильтрацию потомков, для которых необходимо запустить обработчик события
// handler - обработчик события

Это действие можно осуществить благодаря тому, что событие всплывает, и, следовательно, возникает у всех предков этого элемента. А объект, до которого всплывают все события на странице, является . Поэтому в большинстве случаев выбирают именно его. После этого зная селектор, функция может программно отобрать среди элементов (элемента, который вызвал это событие () и всех его предков включая родителя) те, которые соответствуют ему. И затем для всех отобранных элементов выполнить указанный в функции обработчик. Действия, посредством которых обработка события переносится на другой элемент (предок), называется в jQuery ещё процессом делегирования события.

Например, добавим событие к элементу, которого ещё нет на странице:

<button id="addButton" type="button">Добавить кнопку</button>

<script>
// при нажатии на элемент с id="addButton" добавить в начало страницы новую кнопку
$('#addButton').on('click', function(e) {
  $('body').prepend('<button class="deleteMe" type="button">Удалить меня</button>');
});
// добавить событие click, которое будет выполнено для элементов, которых ещё нет на странице
$(document).on('click','.deleteMe', function() {
  $(this).remove();
});
</script>

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

$(document).on('click','#comment a',function(e) {
  if(!(location.hostname === this.hostname || !this.hostname.length)) {
    e.preventDefault();
    location.href='away?link='+encodeURIComponent($(this).attr('href'));
  }
});

Получение значения элемента формы

В jQuery чтение значений элементов , и осуществляется посредством метода .

Например, получим значение элемента :

<input type="text" id="quantity" name="quantity" value="3" />
...
<script>
// сохраним значение в переменную quantity
var quantity = $('#quantity').val();
// выведем значение переменной quantity в консоль
console.log(quantity);
</script>

Метод , если в коллекции присутствует несколько элементов, вернёт значение только первого из них.

<input name="color" type="radio" value="white"> Белый<br>
<input name="color" type="radio" value="green" checked> Зелёный<br>
<input name="color" type="radio" value="brown"> Коричневый<br>
...
<script>
  // получим значение первого элемента в коллекции
  var valColor = $('input').val();
  console.log(valColor); // white
  // получим значение выбранной (checked) радиокнопки
  var valCheckedColor = $( "input:checked" ).val();
  console.log(valCheckedColor); // green
</script>

Для получения значения выбранного элемента (, , или кнопок) используйте .

// получить значение выбранной опции select
$('select.color option:checked').val();
// получить значение выбранного select
$('select.size').val();
// получить значение отмеченного (checked) checkbox
$('input:checked').val();
// получить значение установленной радиокнопки
$('input:checked').val();

Если коллекции нет элементов, то метод возвращает значение .

Например, получим значение элемента , имеющего имя :

var valDescription =  $('textarea').val();
if (valDescription !== undefined) {
  console.log('Значение элемента textarea: ' + valDescription);
} else {
  console.log('Элемент textarea с именем description на странице не найден!');
}

Получим значение элемента :

<select id="volume">
  <option>16Gb</option>
  <option>32Gb</option>
</select>
...
<script>
// получим значение выбранной опции элемента select
var volume = $('#volume').val();
// выведем это значение в консоль
console.log(volume);
// выведем значение в консоль при изменении select
$('#volume').change(function(){
  var volume = $(this).val();
  console.log(volume);  
});
</script>

Если элемент имеет множественный выбор (атрибут ), то метод возвратит в качестве результата массив, содержащий значение каждой выбранной опции (). Если ни одна опция не отмечена, то данный метод вернёт в качестве ответа пустой массив (до версии jQuery 3 значение ).

<select id="brands" multiple="multiple">
  <option selected="selected">Acer</option>
  <option>Samsung</option>
  <option selected="selected">Asus</option>
</select>

<script>
// var brands = $('#brands').val() || []; // до версии jQuery 3
var brands = $('#brands').val(); // для версии jQuery 3
// преобразуем массив в строку, используя разделитель ", "
var output = brands.join( ", " );
// выведем строку в консоль
console.log(output);
</script>

Замена контента элемента указанным текстом

Метод может использоваться не только для чтения, но и для изменения содержимого указанного элемента. При этом HTML теги (если они присутствуют в тексте) будут закодированы с помощью спецсимволов.

<div id="info">
  Некоторый контент...
</div>
...
<script>  
  $('#info').text('<p>Другой контент...</p>');
</script>

После выполнения, элемент div с классом info будет иметь следующий HTML код:

<div id="info">
  &lt;p&gt;Другой контент...&lt;/p&gt;
</div>

На экране данный элемент будет выглядеть так:

<p>Другой контент...</p>

Если в выборке присутствует несколько элементов, то метод заменит содержимое каждого из них:

<p>Контент 1 ...</p>
<p>Контент 2 ...</p>
<p>Контент 3 ...</p>
...
<script>  
  $('p').text('Новый контент...');
</script>

Использование в качестве параметра метода функции (добавим в скобках к содержимому каждого выбранного элемента длину его текстовой информации):

<p class="text">Некоторое содержимое...</p>
<p class="text">Ещё некоторый контент...</p>
...
<script>
$('.text').text(function(index,text) {
  // параметры функции: index (порядковый номер элемента в выборке), text (его текущее содержимое)
  var textLength = text.length;
  return text + ' ('+ text.length +')';
});
</script>

Выбор элементов по их положению

Иногда нужно выбрать элемент, про который известно, что он расположен в наборе ранее выбранных элементов. Например, нужно выделить первый параграф, который имеет класс . Для усложнения примера допустим, что нужно выбрать все пункты в списке, который имеет класс , а затем выбрать 5-й пункт из получившегося набора.

jQuery имеет семь селекторов, которые можно использовать для ограничения области поиска на основе позиции элемента:

Селектор	Описание	Примеры
	Выбирает первый элемент в наборе отобранных элементов.
	Выбирает последний элемент в наборе отобранных элементов.
	Выбирает единственный элемент в наборе отобранных элементов. Выбор элемента осуществляется по последовательному номеру индекса ( = первый элемент, = второй и так далее).
	Выбирает элементы в наборе отобранных элементов, которые расположены перед элементом с заданным индексом. Например, если задан индекс (то есть 3-й элемент), то будут выбраны первые 2 элемента (с индексами 0 и 1).
	Выбираем элементы в наборе отобранных элементов, которые расположены после элемента с заданным индексом. Например, если задан индекс 2 (то есть 3-й элемент), то будут выбраны все элементы после третьего.
	Выбирает все элементы с четными индексами в наборе отобранных элементов. Заметьте, что индексы начинаются с 0, таким образом в действительности отбираются 1-й, 3-й и так далее элементы.
	Выбирает все элементы с нечетными индексами в наборе уже отобранных элементов. Заметьте, что индексы начинаются с 0, таким образом в действительности отбираются 2-й, 4-й и так далее элементы

Отметим, что данные селекторы не работают также как ,, и так далее. Например, выбирает только пункт списка с классом , который является первым пунктом в соответствующем списке. А находит все пункты списка на странице, которые имеют класс , а затем выбирает первый пункт списка в наборе результата поиска.

В следующем примере выбираются все ячейки в первых двух строках таблицы, которая имеет ID :

var selectedElements = $("table#myTable tr:lt(2) > td");

Как использовать подход Jobs to be Done

Необходимо провести JTBD исследование. Оно включает несколько этапов:

определяем цели и задачи исследования;

формулируем гипотезы, которые мы хотим проверить;
спрашиваем людей: проводим ряд интервью с теми, для кого предположительно будет делаться продукт;
работаем с данными, которые собрали в ходе бесед с помощью специальных методик (фреймворков);
составляем Job Stories на основе вытащенных в ходе исследования инсайтов;
делаем продукт!

Что значит поставить цели исследования? Четко ограничить круг инсайтов, которые мы ищем. Допустим, мы открываем сервис химчистки с доставкой. Нам нужно понять, что важнее всего людям в нашем продукте и дать им это.

Виджет обратного звонка для сайта

50 минут в подарок новым клиентам

Повысьте конверсию сайта на 30%
Экономьте на тарифах: от 5 рублей в минуту
Адаптируйте форму под ваш сайт. Без разработчика
Используйте гибкие настройки показа
Стройте отчеты по звонкам: от показа виджета до ключевого слова

Узнать подробнее

Пример с химчисткой/прачечной нового типа

Наш пользователь — это молодой специалист/специалистка с нехваткой времени на стирку и прочее. Да и навыков чистки вещей нет. Для клиента проблема, в отличие от классической химчистки, не в сильных загрязнениях. Просто не хочется в свой выходной заниматься стиркой/чисткой/глажкой.

Поэтому мы дадим человеку все эти услуги, которые он закажет одной кнопкой в смартфоне по дороге домой. «Работа», которая нужна именно нашим пользователям — сделать вещи чистыми без их участия

Им не так важно особое качество чистки, скорость или экологичность. Не стоит опираться на биосредства, экспресс химчистку за 12 часов — это лишь вишенки на торте

Главное — заберите уже вещи и почистите, вот, что думает наш пользователь.

Все это мы выясняем на исследовании, задав покупателям вопросы:

какую работу нужно сделать?
почему химчистка с доставкой вам подходит?
почему вам это не подходит?

Но мы забежали вперед. Чтобы все это выяснить, для начала мы формулируем наши Job Stories и проверяем их на интервью. Формула для составления Job Stories: «Молодой специалист с нехваткой времени и бытовых навыков хочет без своего участия проводить стирку/глажку/химчистку, чтобы иметь всегда достойный вид и не тратить время на это».

Также нужно выделить конкурентов, прямых и непрямых. В нашем случае люди могут сходить в прачечную или химчистку, нанять приходящую прислугу или как-то еще решать проблему.

Что они станут делать, что им важно, а что нет — мы узнаем на интервью. В целом в пользовательском поведении нас интересуют желания, ограничения, катализаторы и набор решений, которые покупатели могут использовать

Интервью проводят вдвоем: первый интервьюер говорит с пользователем, второй — записывает и анализирует.

Для анализа в JTBD применяются разнообразные фреймворки. Например, «Сила прогресса» — ищем, что именно замотивировало пользователя искать новый продукт. Или «Таймлайн» — изучаем все, что думал и делал пользователь с момента первой мысли о поиске продукта до принятия решения.

Из данных нескольких интервью составляем Job Stories и видим всю картину: в какой ситуации был пользователь, что натолкнуло его на изменение поведения, как он искал новый продукт и почему в итоге нанял его (или наймет) «делать работу».

Вот Job Story для нашей химчистки.

«Когда мне нужно всегда иметь чистые и свежие вещи, я хочу быстро отдать грязные вещи кому-то, кто профессионально позаботится о них без моего участия, а я займусь более важными вещами».

Далее нужно сравнить истории, выделить группы пользователей, найти общие моменты

Скорость, качество чистки, оплата онлайн, экологичные средства — что самое важное для тех, кто принесет нам больше всего денег? После анализа и выводов остается только сделать идеальный продукт, который люди точно захотят нанять на эту работу.

Делаем элемент перетаскиваемым

Когда вы добавляете элемент к вашей веб странице (например, или изображение), то он фиксируется в определённом положении. Однако с помощью jQuery UI легко сделать его перетаскиваемым с помощью курсора мыши.

Чтобы сделать элемент перемещаемым, просто вызываем метод для него. Вот так:

<!doctype html>
<html lang="ru">
<head>
 
<style>
#makeMeDraggable { width: 300px; height: 300px; background: red; }
</style>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
 
<script type="text/javascript">
 
$( init );
 
function init() {
  $('#makeMeDraggable').draggable();
}
 
</script>
 
</head>
<body>

События: реагируем на перемещения

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

$('#makeMeDraggable').draggable( {
    eventName: eventHandler,
    ...
  } );

Список доступных событий:

Генерируется при создании перетаскиваемого элемента вызовом функции .

Генерируется при начале процесса перетаскивания элемента.

Генерируется при перемещении курсора мыши в процессе перетаскивания элемента.

Генерируется, когда пользователь отпускает кнопку мыши после перетаскивания элемента.

Обработчик события должен принимать 2 аргумента:

Объект события ().
Объект jQuery UI, который представляет перетаскиваемый элемент ().

Для объекта доступны 3 опции для получения информации о перетаскиваемом элементе:

Объект jQuery, который представляет вспомогательный элемент для перетаскивания.

Объект, который содержит положение перетаскиваемого элемента относительно оригинальной позиции. Объект имеет два свойства: (X координата от левой границы элемента), и (Y координата от верхней границы элемента).

Объект, который содержит положение перетаскиваемого элемента относительно документа. Как и объект , он имеет два свойства и .

Изменим наш пример так, чтобы он показывал информацию о конечном положении перетаскиваемого элемента относительно документа, когда пользователь отпускает кнопку мыши:

<script type="text/javascript">
 
$( init );
 
function init() {
  $('#makeMeDraggable').draggable( {
    cursor: 'move',
    containment: 'document',
    stop: handleDragStop
  } );
}
 
function handleDragStop( event, ui ) {
  var offsetXPos = parseInt( ui.offset.left );
  var offsetYPos = parseInt( ui.offset.top );
  alert( "Перетаскивание завершено!\n\nСмещение: (" + offsetXPos + ", " + offsetYPos + ")\n");
}
 
</script>

Пример итерации по строкам таблицы с помощью .each ()

Чтобы прочитать значение каждой ячейки таблицы также можно использовать функцию jQuery . Каждая строка таблицы получает данные, выполняя цикл в HTML-таблице:

<table id="myTable" style="margin-left:50px;">
  <tr><th>Sr no</th><th>Name</th><th>Gender</th><th>Location</th></tr>
  <tr><td> 1</td><td>Satinder Singh</td><td> M </td><td> India </td></tr>
  <tr><td> 2 </td><td>Amit Sarna</td><td> M </td><td> France </td></tr>
  <tr><td> 3 </td><td>Andrea Ely</td><td> F </td><td> Brazil </td></tr>
  <tr><td> 4 </td><td>Leslie Mac </td><td> F </td><td> Australia </td></tr>
  <tr><td> 5 </td><td>Sonya David </td><td> F </td><td>America</td></tr>
</table>

Используя метод , мы получаем значение каждой ячейки строки таблицы, то есть каждое значение

$(".button").on('click', function () {

                $("#myTable tr").each(function () {
                    var self = $(this);
                    var col_1_value = self.find("td:eq(0)").text().trim();
                    var col_2_value = self.find("td:eq(1)").text().trim();
                    var col_3_value = self.find("td:eq(2)").text().trim();
                    var col_4_value = self.find("td:eq(3)").text().trim();
                    var result = col_1_value + " - " + col_2_value + " - " + col_3_value + " - " + col_4_value;
                    console.log(result);
                });
            });

Как скачать jQuery

Для загрузки нам доступны 2 версии: полная и slim. Отличается slim от полной только тем, что в ней отсутствует часть модулей, а именно ajax и effects. Если функции входящие в эти модули нужны, то тогда следует выбрать полную версию. В противном случае – slim.

Кроме этого, каждая из них доступна нам как в сжатом (с суффиксом ) так и в несжатом виде.

Несжатый вариант библиотеки рекомендуется использовать только во время разработки проекта или его отладки. Кроме этого, его ещё используют для изучения исходного кода jQuery. В нём можно посмотреть устройство как всей библиотеки, так и определённой функции.

На продакшене лучше применять сжатый вариант jQuery (с расширением ). Он меньше весит, и, следовательно, быстрее загружается

А это очень важно для производительности сайта

Уменьшение объема JavaScript кода библиотеки jQuery осуществляется за счёт минимизации. Минимизация – это процесс, который заключается в удалении из исходного кода всего лишнего (комментариев, незначащих пробелов, переносов строк, символов табуляции) и замене имен функций и переменных на более короткие.

Кроме этого, существуют разные ветки jQuery: 1.x, 2.x и 3.x.

jQuery 1.x следует использовать если нужна поддержка IE 6 – 8.

jQuery 2.x построено на том же API, что 1.x. Но имеет меньший размер и более высокую производительность. Это было достигнуто благодаря тому, что из неё был удалён устаревший код, необходимый для поддержки IE 6 – 8. Таким образом 2.x можно использовать только в том случае, если вам не нужна поддержка этих старых браузеров.

jQuery 3.x – последняя ветка (3.5.1 – последняя версия). В большинстве случаев рекомендуется выбирать её, если конечно вам не нужна поддержка IE 6 – 8. В отличие от предыдущих веток она имеет множество улучшений (поддержку промисов, работу с анимацией через и др.) и исправлений. Кроме этого, она доступна как в полном формате, так и .

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

Для скачивания jQuery с официального сайта нажмите правой кнопкой мыши на нужную ссылку и выберите пункт «Сохранить ссылку как…».

После скачивания, можно заметить, что jQuery представляет обычный файл с расширением . Далее его нужно загрузить на сервер.

Используем вспомогательный элемент

Вспомогательный элемент используется при перетаскивании вместо оригинального элемента. Данный метод очень удобен, если нужно оставить оригинальный элемент на своем месте, но в то же время дать возможность пользователю перетащить что-то с его позиции в другое место страницы. Например, предоставляем пользователю возможность перетаскивать цветовой указатель с палитры на объект, для которого надо поменять цвет.

Для использования вспомогательного элемента нужно установить опцию . Доступные значения для данной опции:

Значение по умолчанию. Перемещается сам оригинальный элемент.; Создается копия элемента, которая перемещается.
Функция: Данная опция позволяет создавать произвольный вспомогательный элемент. Вы определяете функцию, которая принимает объект и возвращает разметку вспомогательного элемента. Данный элемент затем перемещается вместо оригинала.

Когда используется значение или функция, то вспомогательный элемент разрушается после завершения операции перетаскивания. Однако вы можете использовать событие , чтобы получить информацию о вспомогательном элементе (например, его положение) перед уничтожением.

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

<style>
#makeMeDraggable { width: 300px; height: 300px; background: red; }
#draggableHelper { width: 300px; height: 300px; background: yellow; }
</style>
 
...
 
<script type="text/javascript">
 
$( init );
 
function init() {
  $('#makeMeDraggable').draggable( {
    cursor: 'move',
    containment: 'document',
    helper: myHelper
  } );
}
 
function myHelper( event ) {
  return '<div id="draggableHelper">Вспомогательный элемент - тащи меня!</div>';
}
 
</script>

Как добавить дополнительные платы при оформлении заказа

Вы можете добавить дополнительный сбор в виде фиксированной платы, или определенный процент от заказа.

Фиксированный сбор

Примером такого сбора может быть упаковка товара. Пусть упаковка стоит 15 рублей.

Добавьте этот скрипт в functions.php:

Замените название сбора и его стоимость в строке .

Фиксированный сбор

Фиксированный сбор для определенных товаров

Если вы хотите добавить фиксированный сбор только для определенных товаров, то используйте этот скрипт:

Замените название сбора и его стоимость в строке , и ID нужных товаров в строке .

Процент от заказа

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

Например, вы можете добавить комиссию в размере 3% к общей стоимости заказа (товары + доставка).

Добавьте этот скрипт в functions.php:

Замените процент в строке , и название сбора в строке .

Процент от заказа

Прекращение всплытия

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

Но любой промежуточный обработчик может решить, что событие полностью обработано, и остановить всплытие.

Для остановки всплытия нужно вызвать метод .

Например, здесь при клике на кнопку обработчик не сработает:

event.stopImmediatePropagation()

Если у элемента есть несколько обработчиков на одно событие, то даже при прекращении всплытия все они будут выполнены.

То есть, препятствует продвижению события дальше, но на текущем элементе все обработчики отработают.

Для того, чтобы полностью остановить обработку, современные браузеры поддерживают метод . Он не только предотвращает всплытие, но и останавливает обработку событий на текущем элементе.

Не прекращайте всплытие без необходимости!

Всплытие – это удобно. Не прекращайте его без явной нужды, очевидной и архитектурно прозрачной.

Зачастую прекращение всплытия создаёт свои подводные камни, которые потом приходится обходить.

Например:

Мы делаем меню. Оно обрабатывает клики на своих элементах и делает для них . Вроде бы, всё работает.
Позже мы решили отслеживать все клики в окне, для какой-то своей функциональности, к примеру, для статистики – где вообще у нас кликают люди. Например, Яндекс.Метрика так делает, если включить соответствующую опцию.
Над областью, где клики убиваются , статистика работать не будет! Получилась «мёртвая зона».

Проблема в том, что убивает всякую возможность отследить событие сверху, а это бывает нужно для реализации чего-нибудь «эдакого», что к меню отношения совсем не имеет.

Пример JSON JQuery.each()

У нас могут быть более сложные структуры данных, такие как массивы в массивах, объекты в объектах, массивы в объектах или объекты в массивах. Давайте рассмотрим, как jQuery find each может применяться в подобных сценариях:

var json = ;
$.each(json, function () {
   $.each(this, function (name, value) {
      console.log(name + '=' + value);
   });
});

Результат выполнения кода: red=#f00, green=#0f0, blue=#00f.

Мы обрабатываем структуру с помощью вложенного вызова each(). Внешний вызов обрабатывает массив переменной JSON, внутренний вызов обрабатывает объекты. В этом примере каждый jQuery each element имеет только один ключ. Но с помощью представленного кода может быть присвоено любое количество ключей.

Что можно делать с jQuery

jQuery позволяет очень легко:

выбирать элементы для выполнения различных манипуляций над ними;
создавать различные визуальные эффекты (например, плавное отображение и скрытие элементов);
создавать сложную анимацию, при этом реализовывая это за гораздо меньшее количество строк кода чем на чистом JavaScript;
манипулировать DOM элементами и их атрибутами;
реализовывать AJAX для асинхронного обмена данными между клиентом и сервером;
перемещаться от текущего узла к другим по иерархической структуре DOM дерева;
выполнять несколько действий над элементом посредством одной строчки кода;
получать или устанавливать размеры HTML элементам и т.д.

Этот список можно продолжить дальше, т.к. jQuery содержит большое количество функций, которые значительно упрощают написание кода для решения различных задач, стоящих перед веб-разработчиками.

jQuery — Отмена стандартного поведения события

Некоторые элементы в HTML имеют стандартное поведение. Например, когда пользователь нажимает на ссылку, он переходит по адресу указанному в атрибуте . Если вам это действие не нужно, то его можно отменить. Для отмены стандартного поведения необходимо вызвать в обработчике этого события метод объекта .

Например, отменим стандартное поведение всех ссылок на странице, имеющих класс :

$('a.service').on('click',function(e){
  //отменяем стандартное действие браузера
  e.preventDefault();
  // действия, которые будет выполнять ссылка
  ...
});

Что такое всплытие и как его остановить

Кроме отмены стандартного действия, в механизме событий есть ещё такое понятие как всплытие. Оно заключается в том, что когда браузер генерирует событие, то он это делает не только для текущего элемента (цели), но и для всех его потомков включая родителя:

текущий элемент (цель) -> родительский элемент цели -> прародительский элемент -> ... -> document -> window

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

Например, необходимо чтобы при поднесении курсора к элементу с классом , его содержимое становилось оранжевым цветом.

<div class="mark">Некоторый текст...<span class="mark">фрагмент...</span>...продолжение...</div>
...
<script>
$('.mark').on('hover',
  function(e){
    e.stopPropagation();
    $(this).css('color',orange);
  },
  function(e){
    e.stopPropagation();
    $(this).css('color',black);
  }
});
</script>

В данном случае если не указывать метод , то при поднесении курсора к элементу с классом данное событие возникнет не только у него, но и у всех его родительских элементов. А это в этом примере приведёт к тому, что изменится цвет не только текста, заключенного в , но и всего абзаца.

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

$('a').on('click', function(e){
  //e.preventDefault();
  //e.stopPropagation();
  ...
  return false;
});

Плюс: кроссбраузерность

Многие пользователи используют старые браузеры, например Internet Explorer 11. Они это делают не потому, что не знают, как обновиться, а потому что на работе админ запретил установку любого софта; или в госучереждениях давно не обновляли компьютеры.

Тут и спасает jQuery: разработчики сами предусмотрели поддержку старых браузеров. Например, вот как может выглядеть проверка на версии Intertet Explorer:

И такие условные блоки есть для всех старых версий IE.

Если всё настолько круто, как здесь написано, то все должны уже были давно перейти на jQuery и забыть про JavaScript, но этого не происходит. Более того, у jQuery есть свои существенные минусы и ограничения.

Как проверить подключён ли jQuery

Проверить подключён ли jQuery к странице можно так:

if (window.jQuery) {
  // jQuery подключен к странице
}

Если нужно выполнить те или иные действия в зависимости от того подключен jQuery к странице или нет:

if (window.jQuery) {
  // jQuery подключен к странице
} else {
  // jQuery не подключен к странице
}

Пример, в котором показано как можно добавить jQuery на страницу, если он ещё не загружен:

if (!window.jQuery) {
  document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>')
}

if (window.jQuery) {
  var verJquery = jQuery.fn.jquery;
  // выведем версию jQuery в консоль
  console.log(verJquery);
}

DOMContentLoaded

Событие срабатывает на объекте .

Мы должны использовать , чтобы поймать его:

Например:

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

Но он не дожидается, пока загрузится изображение. Поэтому покажет нулевой размер.

На первый взгляд событие очень простое. DOM-дерево готово – получаем событие. Хотя тут есть несколько особенностей.

Когда браузер обрабатывает HTML-документ и встречает тег , он должен выполнить его перед тем, как продолжить строить DOM. Это делается на случай, если скрипт захочет изменить DOM или даже дописать в него (), так что должен подождать.

Поэтому DOMContentLoaded определённо случится после таких скриптов:

В примере выше мы сначала увидим «Библиотека загружена…», а затем «DOM готов!» (все скрипты выполнены).

Скрипты, которые не блокируют DOMContentLoaded

Есть два исключения из этого правила:

Скрипты с атрибутом , который мы рассмотрим немного позже, не блокируют DOMContentLoaded.
Скрипты, сгенерированные динамически при помощи и затем добавленные на страницу, также не блокируют это событие.

Внешние таблицы стилей не затрагивают DOM, поэтому их не ждёт.

Но здесь есть подводный камень. Если после стилей у нас есть скрипт, то этот скрипт должен дождаться, пока загрузятся стили:

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

Так как дожидается скриптов, то теперь он так же дожидается и стилей перед ними.

Firefox, Chrome и Opera автоматически заполняют поля при наступлении .

Например, если на странице есть форма логина и пароля и браузер запомнил значения, то при наступлении он попытается заполнить их (если получил разрешение от пользователя).

Так что, если откладывается из-за долгой загрузки скриптов, в свою очередь – откладывается автозаполнение. Вы наверняка замечали, что на некоторых сайтах (если вы используете автозаполнение в браузере) поля логина и пароля не заполняются мгновенно, есть некоторая задержка до полной загрузки страницы. Это и есть ожидание события .

Простой товар

Чтобы создать ссылку или кнопку, которая будет откладывать Простой товар в Корзину, нужно знать ID товара. Перейдите в WooCommerce — Товары и наведите мышкой на нужный товар:

WooCommerce — ID Товара

Создайте ссылку или кнопку с таким URL:

Замените на ваш домен, и замените на ID вашего товара.

б. Как добавить определенное Количество Простого товара в Корзину

Создайте ссылку или кнопку с таким URL:

Замените на ваш домен, на ID вашего товара и замените на нужное количество товара.

в. Как добавить Простой товар в Корзину и перенаправить в Корзину

Перейдите в WooCommerce — Настройки — Товары — Основные и поставьте эту галочку:

Включите Ajax для кнопки добавления в корзину в архивах

После этого создайте ссылку или кнопку с таким URL:

Замените на ваш домен, и замените на ID вашего товара.

Если вы изменили URL вашей Корзины с /Cart/ на что-то другое, например, на /Basket/, то используйте:

г. Как добавить Простой товар в Корзину и перенаправить на Оформление Заказа

Если вы хотите, чтобы ваши посетители добавляли товар в Корзину и сразу переходили к оформлению заказа, то проверьте, что настройка Перенаправить в корзину после успешного добавления отключена, а Включить Ajax для кнопки добавления в корзину в архивах — включена:

Отключите Перенаправление в корзину после успешного добавления