Jquery — введение

Содержание:

jQuery Migrate — All Versions
Update Library Loader Code
Подключение jQuery с CDN
Что такое jQuery?
- - Функции jQuery
jQuery плагины
Важные особенности jQuery
Перебор текущих элементов (.each)
Подключаем библиотеку к HTML-документу
jQuery Core — All 1.x Versions
Подключение jQuery со страницы своего сайта
Необходимое условие
JQuery
Применение шаблона
- Модификация результата
- Изменение способа предоставления входных данных
YouTube безопасный режим
- Как отключить безопасный режим YouTube
- Как включить безопасный режим на телефоне
  - Полезные советы
Частые проблемы с jQuery на сайтах
Прямые и делегированные события
Советы по эфективному изучению JavaScript

jQuery Migrate — All Versions

jQuery Migrate 3.3.2 — uncompressed, minified
jQuery Migrate 3.3.1 — uncompressed, minified
jQuery Migrate 3.3.0 — uncompressed, minified
jQuery Migrate 3.2.0 — uncompressed, minified
jQuery Migrate 3.1.0 — uncompressed, minified
jQuery Migrate 3.0.1 — uncompressed, minified
jQuery Migrate 3.0.0 — uncompressed, minified
jQuery Migrate 1.4.1 — uncompressed, minified
jQuery Migrate 1.4.0 — uncompressed, minified
jQuery Migrate 1.3.0 — uncompressed, minified
jQuery Migrate 1.2.1 — uncompressed, minified
jQuery Migrate 1.2.0 — uncompressed, minified
jQuery Migrate 1.1.1 — uncompressed, minified
jQuery Migrate 1.1.0 — uncompressed, minified
jQuery Migrate 1.0.0 — uncompressed, minified

Update Library Loader Code

10 методов для замены jquery чистым javascript в проектах

Previous versions of Google Charts used different code to load the libraries. The table below
shows the old library loader code versus the new.

Old Library Loader Code

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:});
  google.setOnLoadCallback(drawChart);
</script>

New Library Loader Code

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
  google.charts.load('current', {packages: });
  google.charts.setOnLoadCallback(drawChart);
</script>

To update your existing charts, you can replace the old library loader code with the new code.
However, keep in mind the
on loading libraries described above.

Next: Preparing the
Data

Подключение jQuery с CDN

Jquery.maskedinput js — документация на русском с примерами

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

Одно большое преимущество использования размещенного jQuery от Google: многие пользователи уже загрузили jQuery из Google CDN при посещении другого веб-сайта. В результате он будет загружен из кэша при посещении вашего сайта, что приводит к ускорению загрузки. Кроме того, Google CDN будет следить за тем, чтобы после того, как пользователь запросил у него файл, он был отправлен с ближайшего к ним сервера, что также приводит к ускорению загрузки.

Наиболее популярные CDN — это Google CDN и jQuery CDN. Мы рассмотрим подключение с Google CDN, но подключение с других серверов аналогично и можете выбрать любой понравившийся вариант.

Google CDN

2. Разместите полученный код между тегами и :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Должно получится примерно следующее:

<!doctype html>
<html>
<head>
	<title>jQuery</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	<h1>Подключение jQuery</h1>
</body>
</html>

Что такое jQuery?

Jquery checkbox checked. работа с чекбоксами в js

jQuery — это небольшая по объёму, но богатая и мобильная библиотека JavaScript, сосредоточенная на успешном взаимодействии JavaScript, HTML и CSS.

Впервые библиотека была представлена общественности её создателем, Джоном Резигом, на компьютерной конференции в Нью-Йорке в 2006 году.

За прошедшие годы библиотека претерпела множество изменений и на текущий день её содержимое полезно для выполнения широкого круга задач.

Функции jQuery

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

jQuery плагины

jQuery плагины — это уже готовые скрипты плюс HTML и CSS, которые нужно просто скачать и прикрепить на свой ресурс. Слайдеры, галереи, всякие подсказки всплывающие, плавная прозрачность, многоуровневые меню и т.д. Перечислять можно бесконечно. Как оказывается прикрепить уже готовый скрипт бывает не так уж и легко, тем более если никогда не сталкивался с этим.

Чтобы было понятнее я буду прикреплять плагин к странице на примере, потому что на примере всегда понятнее.

Перед тем как начать Вам нужно на сайт прикрепить саму библиотеку jQuery, тут ничего сложного просто между тегами <head> и </head> поставьте вот это:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Вот и всё, первый шаг сделали 🙂

Важные особенности jQuery

Выбор DOM: jQuery предоставляет селекторы для извлечения элемента DOM на основе различных критериев, таких как имя тега, идентификатор, имя класса css, имя атрибута, значение, n-й дочерний элемент в иерархии и т.д.

DOM манипуляции: вы можете манипулировать DOM-элементами, используя различные встроенные функции jQuery. Например, добавление или удаление элементов, изменение содержимого HTML, класса CSS и т.д.

Специальные эффекты: Вы можете применять специальные эффекты к элементам DOM, таким как показ или скрытие элементов, постепенное увеличение или уменьшение видимости, эффект скольжения, анимация и т.д.

События: библиотека jQuery включает в себя функции, которые эквивалентны DOM-событиям, таким как нажатие, dblclick, mouseenter, отпускание мыши, размытие, keyup, keydown и т.д. Эти функции автоматически решают проблемы, возникающие в браузере.

Ajax: jQuery также включает в себя простые в использовании функции AJAX для загрузки данных с серверов без перезагрузки всей страницы.

Кросс-браузерная поддержка: библиотека jQuery автоматически обрабатывает кросс-браузерные проблемы, поэтому пользователю не нужно об этом беспокоиться. jQuery поддерживает IE 6.0+, FF 2.0+, Safari 3.0+, Chrome и Opera 9.0+.

Перебор текущих элементов (.each)

Синтаксис метода each (пременяется только к выбранным элементам):

.each(function);
// function - функция, которая будет выполнена для каждого элемента текущего объекта

Разберём, как работает метод на следующем примере (переберём элементы ):

<div id="id1"></div>
<div id="id2">
  <p></p>
  <hr>
  <p></p>
  <div id="id3"></div>
</div>

<script>
// после загрузки DOM страницы выполнить
$(function(){

  // перебрать элементы div на странице
  $('div').each(function (index, element) {
    // index (число) - текущий индекс итерации (цикла)
      // данное значение является числом
      // начинается отсчёт с 0 и заканчивается количеству элементов в текущем наборе минус 1
    // element - содержит DOM-ссылку на текущий элемент

    console.log('Индекс элемента div: ' + index + '; id элемента = ' + $(element).attr('id')); 
  });

});

// Результат:
  // Индекс элемента div: 0; id элемента = id1
  // Индекс элемента div: 1; id элемента = id2
  // Индекс элемента div: 2; id элемента = id3

</script>

В вышеприведённом примере метод each использует текущий набор (элементы, выбранные посредством селектора ). В качестве обработчика метода each всегда выступает функция, которая будет выполнена для каждого элемента текущего набора (в данном случае для каждого элемента ). Данная функция имеет 2 необязательных параметра. Один из них (index) представляет собой порядковый номер текущей итерации, а второй (element) — DOM ссылку на текущий элемент. Кроме этого внутри функции доступно ключевое слово , которое также как и второй параметр, содержит DOM-ссылку на текущий элемент.

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

$('a').each(function() {
  console.log($(this).attr('href'));
});

Например, выведем в консоль все внешние ссылки, расположенные на странице:

$('a').each(function() {
  var link = $(this).attr('href');
  if ((link.indexOf('http://') == 0) || (link.indexOf('https://') == 0)) {
    console.log('href ссылки = ' + link);
  }
});

// Если на странице расположены следующие ссылки:
  // <a href="https://www.yandex.ru/">Яндекс</a>
  // <a href="post/2898">Как работает JavaScript?</a>
  // <a href="http://getbootstrap.com/">Bootstrap</a>
// То в консоли увидим следующий результат:
  // https://www.yandex.ru/
  // http://getbootstrap.com/

Например, рассмотрим, как организовать цикл each по элементам DOM, имеющих класс (переберём все элементы одного класса).

<!-- HTML-код -->
<div class="name">Raspberry pi</div>
<div>single-board compute</div>
<div class="name">Intel Galileo Gen2</div>
<div class="price">19$</div>
<div class="name">Pine A64 Plus</div>

<script>
// с помощью функции jQuery.each ($.each)
$.each($('.name'),function(index,data) {
  console.log('Порядковый номер: ' + index + ' ; Содержимое: ' +$(data).text());
});

// с помощью метода jQuery .each 
$('.name').each(function(index,data) {
  console.log('Порядковый номер: ' + index + ' ; Содержимое: ' +$(data).text());
});

// Получим следующий ответ:
//   Порядковый номер: 0 ; Содержимое: Raspberry pi
//   Порядковый номер: 1 ; Содержимое: Intel Galileo Gen2
//   Порядковый номер: 2 ; Содержимое: Pine A64 Plus
</script>

Например, разберём, как перебрать все элементы на странице.

<script>
$('*').each(function() {
  console.log(this);
});
</script>

Например, выведем значение всех элементов на странице.

$('input').each(function() {
  console.log($(this).val());
});

Например, переберём все дочерние элементы, расположенные в с (each children).

<!-- HTML список -->
<ul id="myList">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<script>
$('ul#myList').children().each(function(){
  console.log($(this).text());
});

// Результат:
//   HTML
//   CSS
//   JavaScript
</script>

Рассмотрим способ, с помощью которого можно определить последний индекс (элемент) в методе jQuery .

// выбираем элементы 
var myList =  $('ul li');
// определяем количество элементом в выборке
var total = myList.length;
// осуществляем перебор выбранных элементов
myList.each(function(index) {
  if (index === total - 1) {
    // это последний элемент в выборке
  }
});

Подключаем библиотеку к HTML-документу

Есть несколько способов, позволяющих подключить JQuery в HTML.

Самый простой — использование тега <script>, дающего возможность ссылаться на внешние файлы, содержащие JavaScript.

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

Далее заходим в HTML-документ и прописываем там код, подключающий JQuery к веб-странице.

Код будет выглядеть так:

Располагается тег <script> с атрибутом src, показывающим на искомый файл, в теге <head>.

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

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

Второй способ — через Google подключить JQuery.

Это еще проще: необходимо зайти на сервис Google Developers, в разделе библиотек для оптимизации найти JQuery и скопировать код:

Этот код ссылается на актуальную версию библиотеки. Его можно прописать либо в тег <head> аналогично предыдущему варианту, либо внизу страницы перед закрывающим тегом </body>.

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

Google также ссылается на сжатую версию библиотеки.

jQuery Core — All 1.x Versions

jQuery Core 1.12.4 — uncompressed, minified
jQuery Core 1.12.3 — uncompressed, minified
jQuery Core 1.12.2 — uncompressed, minified
jQuery Core 1.12.1 — uncompressed, minified
jQuery Core 1.12.0 — uncompressed, minified
jQuery Core 1.11.3 — uncompressed, minified
jQuery Core 1.11.2 — uncompressed, minified
jQuery Core 1.11.1 — uncompressed, minified
jQuery Core 1.11.0 — uncompressed, minified
jQuery Core 1.10.2 — uncompressed, minified
jQuery Core 1.10.1 — uncompressed, minified
jQuery Core 1.10.0 — uncompressed, minified
jQuery Core 1.9.1 — uncompressed, minified
jQuery Core 1.9.0 — uncompressed, minified
jQuery Core 1.8.3 — uncompressed, minified
jQuery Core 1.8.2 — uncompressed, minified
jQuery Core 1.8.1 — uncompressed, minified
jQuery Core 1.8.0 — uncompressed, minified
jQuery Core 1.7.2 — uncompressed, minified
jQuery Core 1.7.1 — uncompressed, minified
jQuery Core 1.7.0 — uncompressed, minified
jQuery Core 1.7.0 — uncompressed, minified
jQuery Core 1.6.4 — uncompressed, minified
jQuery Core 1.6.3 — uncompressed, minified
jQuery Core 1.6.2 — uncompressed, minified
jQuery Core 1.6.1 — uncompressed, minified
jQuery Core 1.6.0 — uncompressed, minified
jQuery Core 1.5.2 — uncompressed, minified
jQuery Core 1.5.1 — uncompressed, minified
jQuery Core 1.5.0 — uncompressed, minified
jQuery Core 1.4.4 — uncompressed, minified
jQuery Core 1.4.3 — uncompressed, minified
jQuery Core 1.4.2 — uncompressed, minified
jQuery Core 1.4.1 — uncompressed, minified
jQuery Core 1.4.0 — uncompressed, minified
jQuery Core 1.3.2 — uncompressed, minified, packed
jQuery Core 1.3.1 — uncompressed, minified, packed
jQuery Core 1.3.0 — uncompressed, minified, packed
jQuery Core 1.2.6 — uncompressed, minified, packed
jQuery Core 1.2.5 — uncompressed, minified, packed
jQuery Core 1.2.4 — uncompressed, minified, packed
jQuery Core 1.2.3 — uncompressed, minified, packed
jQuery Core 1.2.2 — uncompressed, minified, packed
jQuery Core 1.2.1 — uncompressed, minified, packed
jQuery Core 1.2.0 — uncompressed, minified, packed
jQuery Core 1.1.4 — uncompressed, packed
jQuery Core 1.1.3 — uncompressed, packed
jQuery Core 1.1.2 — uncompressed, packed
jQuery Core 1.1.1 — uncompressed, packed
jQuery Core 1.1.0 — uncompressed, packed
jQuery Core 1.0.4 — uncompressed, packed
jQuery Core 1.0.3 — uncompressed, packed
jQuery Core 1.0.2 — uncompressed, packed
jQuery Core 1.0.1 — uncompressed, packed
jQuery Core 1.0.0 — uncompressed, packed

Подключение jQuery со страницы своего сайта

Самый распространенный способ подключения библиотеки. Для начала необходимо скачать свежую версию с сайта разработчика. На странице загрузки представлено несколько вариантов библиотеки, например сейчас предлагается скачать «Compressed, production jQuery 3.1.1» и «Uncompressed, development jQuery 3.1.1». Первый вариант — это сжатый вариант библиотеки, оттуда удалены все комментарии, в этом случае библиотека занимает намного меньше места, следовательно страница, на которую она будет подключена будет загружаться быстрее. Второй вариант — это, грубо говоря, исходный код библиотеки, он структурирован в удобном для чтения виде с комментариями, и предназначен в первую очередь для разработчиков. Поэтому рекомендую использоваться сжатую версию библиотеки.

После того, как библиотека загружена, необходимо разместить её на сервере, где находятся файлы сайта. Я обычно в корне сайта создаю папку «js» в которую копирую нужные библиотеки и там же размещаю файл со своими функциями.

Теперь можно переходить непосредственно к подключению jQuery. Структура веб-страницы, на которую Вы подключаете jQuery, может быть разной. Но в ней обязательно присутствуют теги HTML, HEAD и BODY. Так вот для подключения jQuery необходимо добавить тег SCRIPT со ссылкой на библиотеку внутрь тега HEAD.

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>Заголовок сайта</title>
     <script src="js/jquery-3.1.1.min.js"></script>
   </head>
   <body> </body>
</html>

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

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>Заголовок сайта</title>
   </head>
   <body>
   
   <script src="js/jquery-3.1.1.min.js"></script>
   </body>
</html>

Внимание! Желательно не менять название файла библиотеки jQuery (зачастую меняют на jquery.js), так как в дальнейшем сохранение официального названия файла поможет увидеть, какую версию библиотеки Вы используете (в моем примере используется версия 3.1.1)

Необходимое условие

JQuery

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

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

Применение шаблона

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

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

Метод tmpl() возвращает стандартный объект jQuery, который содержит элементы, полученные из шаблона. В данном случае это приводит к набору элементов div, каждый из которых содержит элементы img, label и input, сконфигурированные для одного из объектов, содержащихся в массиве данных. Для вставки всего набора в качестве дочернего элемента в элемент row1 используется метод appendTo(). Результат представлен на рисунке:

Модификация результата

Полученный результат не совсем нас устраивает, поскольку все элементы, соответствующие различным цветам, отображаются в одном ряду. Но поскольку мы имеем дело с объектом jQuery, расположить элементы так, как нам надо, не составит большого труда. В примере ниже показано, как это можно сделать, воздействуя на результат работы метода tmpl():

В этом примере методы slice() и end() используются для сужения и расширения набора выбранных элементов, а метод appendTo() — для добавления поднаборов элементов, сгенерированных с помощью шаблона, в различные ряды.

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

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

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

Изменение способа предоставления входных данных

Другой возможный подход заключается в изменении способа передачи данных методу tmpl(). Соответствующий пример приведен ниже:

В этом сценарии распределение элементов по рядам осуществляется путем двукратного использования шаблона — по одному разу для каждого ряда. Соответствующая часть объектов данных каждый раз передается шаблону с помощью метода slice(). Несмотря на отличие данного подхода от предыдущего, мы получаем тот же результат, который был представлен на рисунке выше.

YouTube безопасный режим

Прокрутите страницу на YouTube в самый низ – в «подвал», нажмите кнопку «Безопасность» – ниже появится справка о том, что это за функция. Под текстом выберите «Вкл.» (цифра 1 на рис. 1). Если после этого Вы нажмете «Сохранить» (цифра 3 на рис. 1), то отключить безопасный режим YouTube будет так же легко, как и включить.

Рис. 1 Настраиваем безопасность на Youtube

Родителям более взрослых или особо сообразительных детей лучше заблокировать все более основательно. Для этого после выбора положения «Вкл.» нужно дополнительно нажать на ссылку «Зафиксировать безопасный режим в этом браузере» (цифра 2 на рис. 2), далее потребуется ввести пароль от аккаунта. Теперь для снятия режима снова потребуется пароль, даже если нажать кнопку «Выход» в верхнем правом углу страницы. Больше того – безопасный режим будет действовать и при поиске в Google.

Но нужно иметь в виду – эти настройки не смогут обезопасить на 100%. В момент установки режима, YouTube предупреждает, что не существует идеальных фильтров, и блокируются только ролики с неприемлемым содержанием, которые были отмечены пользователями или другими инстанциями. Это означает, что оставлять наследников «наедине» с YouTube и интернетом надолго нельзя, родительский контроль все равно необходим.

Как отключить безопасный режим YouTube

Если малышей и школьников рядом с компьютером не наблюдается, а Вы решили посмотреть что-то, предназначенное только для взрослых, отключить безопасный режим YouTube можно следующим образом:

войти в свой аккаунт Google. Для этого понадобится ввести свой логин и пароль от аккаунта.
Затем отключить безопасный режим в нижней части страницы с помощью кнопки «Безопасность» (выше на рис. 1 обведена в красную рамку), главное – помнить пароль от аккаунта.

Видео-версия изложенного выше материала:

Как включить безопасный режим на телефоне

На телефоне обычно используют мобильную версию сайта – m.youtube.com. Чтобы там включить или отключить безопасный режим:

Нужно войти в свой аккаунт.
Затем коснуться значка меню (в виде трех точек, расположенных вертикально) в правом верхнему углу экрана.
В открывшемся меню выбрать Настройки.
А в настройках можно включить или отключить Безопасный режим.

Полезные советы

1) Если включен режим безопасности Youtube, то при необходимости комментировать свое или чужое видео на Ютубе можно столкнуться с сообщением о невозможности комментировать видеоролики. Такая проблема производит особенно сильное впечатление, если Вы выложили собственный ролик и Вам же отказано в доступе к комментариям.

Проблема с отсутствием доступа к возможности написать комментарий решается просто: надо отключить режим безопасности на Youtube. Как это сделать, описано выше.

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

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

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

P.S. Статья закончилась, но можно еще прочитать:

1. Операционная система для ребенка

2. О влиянии компьютерных игр на психику человека

3. Сказка про мудрого правителя Процессора, про злого Вируса и неутомимого Анти Вируса

4. Детский браузер Гогуль на базе Mozilla Firefox

Распечатать статью

Получайте актуальные статьи по компьютерной грамотности прямо на ваш почтовый ящик. Уже более 3.000 подписчиков

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

Частые проблемы с jQuery на сайтах

1) jQuery не подключена вообще;2) jQuery подключена раз 5-10, а должна быть подключена только 1 раз;3) jQuery подключена после вызова jQuery-плагинов, а должна подключаться самой первой;4) JS-ошибки на странице, после которых весь остальной JS-код и плагины не работают;5) Версия jQuery не соответствует минимальной по требованию;6) Подключена переписанная разработчиком jQuery, которая ведет себя не предсказуемо;7) Подключена кастомная сборка jQuery, часть функций вырезано;

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

Прямые и делегированные события

Большинство событий браузера поднимаются от самого «глубокого»(внутреннего, целевого) элемента в документе, где произошло событие, вверх до элемента body и элемента документа. В Internet Explorer ниже 8-ой версии, некоторые события (например change, submit) не обладают такими свойствами, но это исправлено в jQuery для создания кроссбраузерности.

Если селектор опущен или равен null, то обработчик события будет установлен на выбранные элементы и срабатывать, в случаях, когда событие возникло непосредственно на этих элементах или «поднялось» от их потомков. Это самая обычная обработка событий и ее называют непосредственной или прямой.

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

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

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

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

$( "#dataTable tbody tr" ).on( "click", function() {
  console.log( $( this ).text() );
});

В делегированных событиях обработчик присоединяется только к элементу и событию необходимо подняться только на один уровень вверх (от к ):

$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

Внимание! Делегирование событий не работает для SVG. Еще немного про делегирование в jQuery можно почитать в статье Обработка динамически добавленных в DOM элементов

Еще немного про делегирование в jQuery можно почитать в статье Обработка динамически добавленных в DOM элементов.

Советы по эфективному изучению JavaScript

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

Электронные книги, бесплатные онлайн-курсы и интернет-платформы для обучения с помощью задач – выбор вариантов источников качественных знаний сегодня почти безграничен. Но как мотивировать себя к самостоятельному обучению, как научиться учиться самостоятельно?

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

Учиться нужно понемногу, но регулярно. Регулярность – залог успеха в обучении. Спланируйте свои будни так, чтобы вы могли каждый день уделять на изучение JavaScript не менее одного часа. Не пытайтесь за короткий промежуток времени выучить всё и сразу. Разбивка процесса самообразования на небольшие учебные сессии создает ощущение быстрых успехов и мотивирует вернуться к обучению уже на следующий день.

Наихудшее время для обучения – когда вы чувствуете усталость. В такие моменты, главное не заставлять себя – вы не получите ожидаемого результата. Человеческий мозг не может учить что-то бесконечно долго – ему нужно давать перерывы. Занимайтесь по принципу 25\5. Попробуйте на себе практику учить 25 минут и отдыхать 5 минут. Ваш мозг привыкнет к таким равномерным нагрузкам и будет работать максимально продуктивно.

Применяйте практики вспоминания – основу обучения. Чем чаще мы вспоминаем информацию, тем дольше она будет храниться в нашей памяти.

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

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

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

← предыдущая
следующая →