5 примеров использования функции jquery .each()

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

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

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

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

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

Test Suite Convenience Methods Reference (See test/data/testinit.js)

q( ... );

Example:

q("main", "foo", "bar");

=>  div#main, span#foo, input#bar 

t( testName, selector,  "array", "of", "ids"  );

Example:

t("Check for something", "//", "foo", "bar");

fireNative( node, eventType )

Example:

fireNative( jQuery("#elem"), "click" );

Add random number to url to stop caching

url( "some/url" );

Example:

url("index.html");

=> "data/index.html?10538358428943"


url("mock.php?foo=bar");

=> "data/mock.php?foo=bar&10538358345554"

Run tests in an iframe

Some tests may require a document other than the standard test fixture, and
these can be run in a separate iframe. The actual test code and assertions
remain in jQuery’s main test files; only the minimal test fixture markup
and setup code should be placed in the iframe file.

testIframe( testName, fileName,
  function testCallback(
      assert, jQuery, window, document,
	   additional args  ) {
	...
  } );

This loads a page, constructing a url with fileName .
The iframed page determines when the callback occurs in the test by
including the «/test/data/iframeTest.js» script and calling
when appropriate. Often this
will be after either document ready or fires.

The receives the QUnit object created by
for this test, followed by the global , , and from
the iframe. If the iframe code passes any arguments to ,
they follow the argument.

Минус: вы контролируете не всё

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

Если исполь­зу­е­те ред­кий пла­гин, есть риск, что он может не рабо­тать настоль­ко надёж­но, как вам нуж­но. К тому же, не все сто­рон­ние пла­ги­ны так же хоро­шо опти­ми­зи­ро­ва­ны, как сам jQuery: в ито­ге у вас ради какого-то одно­го эффек­та или бло­ка на стра­ни­це появит­ся огром­ная биб­лио­те­ка, кото­рая будет всё страш­но замедлять.

О вреде CDN, сервисов и шрифтов от Google

Из песочницы

Как известно, сегодня все больше и больше разработчиков предпочитают грузить js-библиотеки из CDN Google (например, jQuery). Более того, это даже считается хорошим тоном — в более чем 50% случаев тот же jQuery находится в кэше браузера пользователя благодаря посещению других сайтов, использующих тот же CDN. И все бы хорошо — к вашему серверу меньше обращений, у пользователя сайт грузится быстрее… Видимых недостатков нет.
А что если вы работаете на глобальном рынке? Использованием googleapis вы сразу отсекаете огромную часть пользователей из Китая!
Большой китайский фаервол блокирует не только поисковик от Google, но и все его сервисы, в числе которых и CDN. Таким образом, в Китае Ваш сайт становится либо недоступен (если Вы подключаете jQuery до body), либо работает не совсем так, как вы ожидаете (если jQuery подключается в конце кода). То же самое касается шрифтов от Google, графиков от Google, reCaptcha от Google и всего остального «от Google».Вывод: Если Вам интересны пользователи из Китая — следует пересмотреть свое мнение на предмет загрузки библиотек или шрифтов с гугловских CDN.

Фильтры элементов форм

Название	Описание
«:button»	элементы с тегом button или типом button
«:radio»	элементы, являющиеся переключателями
«:checkbox»	элементы, являющиеся флажками
«:text»	элементы, являющиеся текстовыми полями
«:password»	элементы, являющиеся полями ввода пароля
«:file»	элементы, являющиеся полями загрузки файлов
«:submit»	элементы, являющиеся кнопками отправки формы
«:reset»	элементы, являющиеся кнопками очистки формы
«:image»	элементы, являющиеся изображениями для отправки  формы (input типа image)
«:input»	элементы, являющиеся элементами формы (с тегами input,  textarea или button)
«:selected»	выбранные элементы (со статусом selected). Это могут быть  элементы типа <option>
«:focus»	элементы формы, находящиеся в фокусе.
«:checked	выбранные элементы (со статусом checked). Это могут быть  элементы типа <checkbox> или <radio>.
«:enabled»	активные элементы формы (со статусом enabled)
«:disabled»	неактивные элементы формы (со статусом disabled)

compare $(elA).compare(elB) -> Number

adds to compare the position of two nodes. It returns a number that represents a bitmask showing how they are positioned relative to each other. The following list shows the , the number and what it means for a call like :

• -> : Elements are identical
• -> 1: The nodes are in different documents (or one is outside of a document)
• -> 2: #bar precedes #foo
• -> 4: #foo precedes #bar
• -> 8: #bar contains #foo
• -> 16: #foo contains #bar

You can tell if precedes like:

This is useful to rapidly compare element positions which is common when widgets can reorder themselves (drag-drop) or with nested widgets (trees). In the following example, select two elements to see how they compare to each other and what bitmask the result represents:

link Downloading jQuery

Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production.
You can also download a sourcemap file for use when debugging with a compressed file.
The map file is not required for users to run jQuery, it just improves the developer’s debugger experience.
As of jQuery 1.11.0/2.1.0 the comment is not included in the compressed file.

To locally download these files, right-click the link and select «Save as…» from the menu.

jQuery

For help when upgrading jQuery, please see the upgrade guide most relevant to your version.
We also recommend using the jQuery Migrate plugin.

You can also use the slim build, which excludes the ajax and effects modules:

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

Синтаксис функции jQuery для выбора элементов по селектору:

$('selector')

Например, выберем все элементы с классом :

var alerts = $('div.alert');

При этом поиск элементов осуществляется во всём документе. Если нам нужно выбрать элементы в одном или нескольких других элементах, то их нужно передать функции посредством 2 аргумента в формате селектора, объекта jQuery или DOM элементов:

$('selector', context)

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

Например, выберем все элементы находящиеся в форме с :

var input = $('input', $('#feedback-form'));

В этом примере элемент, в котором нужно выбрать указан в формате jQuery-объекта: .

Этот же пример, но с заданием элемента, в котором нужно искать в формате селектора и DOM-элемента:

// в формате селектора
var input = $('input', '#feedback-form');
// в формате DOM-элемента
var input = $('input', document.querySelector('#feedback-form'));

Узнать количество выбранных элементов можно с помощью свойства . Если элементов не найдено, то значение свойства равно 0.

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

var count = $('p').length;

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

Синтаксис:

// один элемент
$(element)
// коллекцию элементов
$(elementArray)

Например, выберем 2 абзац, находящийся в :

// DOM-элемент
var element = document.querySelector('.post-content p:nth-child(2)');
// jQuery-объект, содержащий element
var jqElement = $(element);

Например, выберем в :

// DOM-элемент
var elements = document.querySelectorAll('#list>li');
// jQuery-объект, содержащий elements
var jqElements = $(elements);

Свойства и методы объекта Event

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

Свойство / Метод	Описание
event.currentTarget	Определяет текущий элемент DOM, в котором в настоящий момент обрабатывается событие.
event.data	Необязательный объект данных, передаваемый методу события, когда текущий обработчик события привязывается.
event.delegateTarget	Возвращает элемент, к которому был прикреплен вызванный в данный момент обработчик события. Это свойство будет отличаться от свойства event.currentTarget только в том случае, если обработчик события делегирован, а не на прямую привязан к элементу.
event.isDefaultPrevented()	Метод возвращает логическое значение true, если для этого объекта событий вызывался метод event.preventDefault() и false в обратном случае.
event.isImmediatePropagationStopped()	Метод возвращает логическое значение true, если для этого объекта событий вызывался метод event.stopImmediatePropagation() и false в обратном случае.
event.isPropagationStopped()	Метод возвращает логическое значение true, если для этого объекта событий вызывался метод event.stopPropagation() и false в обратном случае.
event.metaKey	Содержит логическое значение, которое указывает на то, была ли нажата, или нет мета клавиша Сmd (Mac) / Windows (Windows), когда событие сработало.
event.namespace	Соответствует пользовательскому пространству имён, определенному при срабатывании события (строковое значение).
event.pageX	Позиция курсора мыши относительно левого края документа, или элемента.
event.pageY	Позиция курсора мыши относительно верхнего края документа, или элемента.
event.preventDefault()	Если этот метод вызывается, то действие события по умолчанию не будет срабатывать (отменяет действие события по умолчанию). Событие продолжает распространяться как обычно, только с тем исключением, что событие ничего не делает.
event.relatedTarget	Соответствует другому элементу DOM, который участвует в событии, если таковой имеется.
event.result	Содержит последнее значение, возвращаемое обработчиком события, которое было вызвано этим событием (если значение не было равно undefined).
event.stopImmediatePropagation()	Прекращает дальнейшую передачу текущего события (предотвращает всплытие по дереву DOM) и останавливает цепочку вызова событий для текущего элемента.
event.stopPropagation()	Прекращает дальнейшую передачу текущего события (предотвращает всплытие по дереву DOM).
event.target	DOM элемент, который инициировал событие.
event.timeStamp	Разница в миллисекундах между тем моментом, когда браузер создал событие и полуночи 1 января 1970 года (Unix-время).
event.type	Описывает тип события, которое было вызвано.
event.which	В зависимости от типа события свойство указывает на определенную клавишу клавиатуры или кнопку мыши, которая была нажата пользователем.

link jQuery Migrate Plugin

We have created the
to simplify the transition from older versions of jQuery. The plugin restores deprecated features and behaviors so that older code will still run properly on newer versions of jQuery. Use the uncompressed development version to diagnose compatibility issues, it will generate warnings on the console that you can use to identify and fix problems. Use the compressed production version to simply fix compatibility issues without generating console warnings.

There are two versions of Migrate. The first will help you update your pre-1.9 jQuery code to jQuery 1.9 up to 3.0. You can get that version here:

The second version helps you update code to run on jQuery 3.0 or higher, once you have used Migrate 1.x and upgraded to jQuery 1.9 or higher:

Базовые

Название	Описание
.on()	Универсальный метод для установки обработчиков  событий на выбранные элементы страницы.
.off()	Удаляет обработчики, установленные с помощь .on().
.bind()	Устанавливает обработчик события на выбранные  элементы страницы. Обработчик не сработает на  элементах, появившихся после его установки.
.live()	Устанавливает обработчик события на выбранные  элементы страницы. Обработчик сработает и на элементах,  появившихся после его установки.
.delegate()	Устанавливает обработчик события на выбранные  элементы страницы. Элементы выбираются с помощью  уточняющего селектора. Обработчик будет действовать и  на элементах, появившихся после его установки.
.one()	Устанавливает обработчик события на выбранные  элементы страницы, который сработает только по одному  разу, на каждом из элементов.
.unbind()	Удаляет обработчик событий у выбранных элементов.
.die()	Удаляет обработчик событий, который был установлен с  помощью live().
.undelegate()	Удаляет обработчик событий, который был установлен с  помощью delegate().
.trigger()	Выполняет указанное событие и запускает его обработчик
.triggerHandler()	Запускает обработчик указанного события, без его  выполнения.
jQuery.proxy()	По заданной функции, создает другую, внутри которой  переменная this будет равна заданному значению.
event	Объект, содержащий данные о текущем событии.  Передается всем обработчикам событий.

Who Helped

jQuery 2.0 has been 10 months in the making, a product of the jQuery Core team: Julian Aubourg, Corey Frang, Oleg Gaidarenko, Richard Gibson, Michal Golebiowski, Mike Sherov, Rick Waldron, and Timmy Willison. Oleg and Michal joined the team during the 2.0 odyssey; we’re glad to have them aboard.

Many thanks to the other jQuery team and community members who contributed fixes: Steven Benner, Pascal Borreli, Jean Boussier, James Burke, Adam Coulombe, Tom Fuertes, Scott González, Dmitry Gusev, Daniel Herman, Nguyen Phuc Lam, Andrew Plummer, Mark Raddatz, Jonathan Sampson, Renato Oliveira dos Santos, Ryunosuke Sato, Isaac Schlueter, Karl Sieburg, Danil Somsikov, Timo Tijhof, and Li Xudong.

To those of you who tested the betas and reported bugs, we’re especially thankful for your help since it helped to make the release more solid and stable.

Список функций

Название	Описание
$.contains()	Проверяет, содержится ли один элемент страницы внутри  другого.
$.extend()	Объединяет два или более javascript-объекта.
$.globalEval()	Выполняет заданный скрипт в глобальной области  видимости.
$.grep()	Ищет в заданном массиве элементы удовлетворяющие  условиям.
$.inArray()	Ищет в заданном массиве конкретный элемент и  возвращает его индекс (или -1 в случае отсутствия  элемента).
$.isArray()	Проверяет, является ли заданный элемент массивом.
$.isEmptyObject()	Проверяет наличие (точнее отсутствие) содержимого в  заданном объекте.
$.isFunction()	Проверяет, является ли заданный элемент функцией.
$.isNumeric()	Проверяет, является ли заданный элемент числом.
$.isPlainObject()	Проверяет, является ли заданный элемент  пользовательским объектом (задан  средствами «{}» или «new Object»).
$.isWindow()	Проверяет, является ли заданный элемент объектом типа  window.
$.isXMLDoc()	Проверяет, находится ли DOM-объект внутри XML-документа (или сам является XML-документом).
$.makeArray()	Конвертирует массиво подобные объекты, в массивы.
$.map()	Выполняет заданную функцию для каждого элемента  массива или каждого поля объекта в отдельности.
$.merge()	Объединяет содержимое нескольких массивов, записывая  его в первый из них.
$.noop()	Пустая функция.
$.parseJSON()	Конвертирует строку с json-данными в javascript-объект.
$.parseXML()	Конвертирует строку xml в xml-документ.
$.proxy()	По заданной функции, создает другую, внутри которой  переменная this будет равна заданному значению.
$.trim()	Удаляет пробелы из начала и конца заданной строки.
$.type()	Определяет класс заданного объекта (речь идет о  внутренних классах javascript: string, boolean и т.д.).
$.unique()	Сортирует заданный массив с DOM-элементами,  выстраивая их в порядке расположения в DOM, а так же  удаляя повторения.

link About the Code

jQuery is provided under the MIT license.

The code is hosted and developed in the jQuery GitHub repository. If you’ve spotted some areas of code that could be improved, please feel free to discuss it on the Developing jQuery Core Forum. If you’d like to participate in developing jQuery, peruse our contributor site for more information.

To find and download plugins developed by jQuery contributors, please visit the Plugins site. Plugin authors are responsible for maintenance of their plugins. Feedback on plugins should be directed to the plugin author, not the jQuery team.

Build from Git

Note: To just use the latest work-in-progress version of jQuery, please try the jQuery Pre-Release Build described above.

All source code is kept under Git revision control, which you can browse online. The repository’s README has more information on building and testing your own jQuery, as well as instructions on creating a custom build that excludes some APIs to reduce file size.

If you have access to Git, you can connect to the repository here:

1

You can also check out and build a specific version of jQuery from GitHub:

1 2

The README file for a specific version will have instructions for building that version, as the process has changed over time.

События мыши

Название	Описание
.click()	Устанавливает обработчик «клика» мышью по элементу,  либо, запускает это событие.
.dblclick()	Устанавливает обработчик двойного «клика» мышью по  элементу, либо, запускает это событие.
.hover()	Устанавливает обработчик двух событий:  появления/исчезновения курсора над элементом.
.mousedown()	Устанавливает обработчик нажатия кнопки мыши, либо,  запускает это событие.
.mouseup()	Устанавливает обработчик поднятия кнопки мыши, либо,  запускает это событие.
.mouseenter()	Устанавливает обработчик появления курсора в области  элемента, либо, запускает это событие. Появление этого  события, отработано лучше, чем стандартного mouseover.
.mouseleave()	Устанавливает обработчик выхода курсора из области  элемента, либо, запускает это событие. Появление этого  события, отработано лучше, чем стандартного mouseout.
.mousemove()	Устанавливает обработчик движения курсора в области  элемента, либо, запускает это событие.
.mouseout()	Устанавливает обработчик выхода курсора из области  элемента, либо, запускает это событие.
.mouseover()	Устанавливает обработчик появления курсора в области  элемента, либо, запускает это событие.
.toggle()	Поочередно выполняет одну из двух или более заданных  функций, в ответ на «клик» по элементу.

Подключение jQuery на WordPress

Подключение jQuery в WordPress производится автоматически, поэтому нет никакой необходимости подключать библиотеки других версий вручную. Это происходит в шаблоне с помощью php кода:

<?php wp_head(); ?>

В итоге внутри тега HEAD появится строка подключения jQuery.

На момент написания статьи с WordPress поставляется jQuery v1.12.4 Но, как видите, версия библиотеки очень сильно отличается от той, которую подключали в примерах выше. Подключить свежую версию библиотеки возможно, но есть шанс возникновения конфликта.

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

<?php
function my_jquery_scripts() {
  wp_deregister_script( 'jquery' );
  wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js');
  wp_enqueue_script( 'jquery' ); 
}
add_action( 'wp_enqueue_scripts', 'my_jquery_scripts' );
?>

Тут сначала отключается стандартная библиотека, а потом через Google API подключаем версию 3.1.1

Внимание! Учтите, этот код будет работать только в том случае, если в вашей теме присутствуют wp_head() и wp_footer()

drop dropinit dropover dropout dropmove dropon dropend

complements with delegatable drop events:

• — the drag motion is started, drop positions are calculated
• — a drag moves over a drop element, called once as the drop is dragged over the element
• — a drag moves out of the drop element
• — a drag is moved over a drop element, called repeatedly as the element is moved
• — a drag is released over a drop element
• — the drag motion has completed

The following example adds the class when a drag is moved over the element and removes it when it leaves:

The object offers the following methods:

• — prevents this drop from being dropped on

• — call on to cache the position of draggable elements

When adding drop-able elements after , for example when expanding a folder view after hovering over it with a draggable for a while, needs to be called explicitly to update the list of dropable elements (this happens automatically on ).

The following example shows two draggable elements and a drop area. When a drag starts it will create a copy of the element using . The drop area will be highlighted when the drag moves over it and update the text when it is dropped:

Что такое jQuery и её поддержка браузерами

jQuery — это быстрая, лёгкая и многофункциональная JavaScript библиотека, основанная на принципе «пиши меньше, делай больше».

Её создал Джон Резиг в начале 2006 года. В настоящее время jQuery разрабатывается и поддерживается распределенной группой разработчиков как проект с открытым исходным кодом.

Сейчас последней версией jQuery является 3.5.1. Она поддерживается во всех основных браузерах: Chrome, Firefox, Safari, Edge, Opera и Internet Explorer 9+.

Преимущества и недостатки jQuery

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

• компактность кода. Позволяет писать код более компактно чем на чистом javaScript, т.е. за гораздо меньшее количество строк кода.
• простой и понятный синтаксис. Значительно упрощает написание многих вещей, например, таких как манипулирование DOM элементами, обработку событий, добавление эффектов анимации на страницу, AJAX запросов и т.д.
• кроссбраузерность. Код написанный на jQuery будет гарантированно работать во всех основных браузерах. В то время как код, написанный на чистом JavaScript надо будет однозначно проверять во всех браузерах. Т.к. некоторые фрагменты кода могут не поддерживаться и их реализацию для этих браузеров нужно будет выполнять как-то по-другому, или например, использовать полифиллы.
• открытый код. Библиотека jQuery является полностью бесплатной как для личных, так и для коммерческих проектов.

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

К недостаткам jQuery можно отнести то, что она может немного увеличивать скорость загрузки веб-страницы (её сжатый размер составляет около 30КБ), а также немного снижать производительность выполнения кода, чем если он был бы написан на чистом JavaScript.

Статистика использования jQuery

Если перейти к статистике, то многие крупные компании, используют jQuery в своих приложениях и сайтах. При этом растущий тренд продолжается, несмотря на очень горячие дискуссии в ИТ сообществах на тему: «Стоит ли использовать jQuery или нет в 2021 году?»

Статистика использования jQuery 10k крупнейшими сайтами:

Чтение HTML контента элемента

Например, получим HTML содержимое элемента с идентификатором () :

// сохраним HTML контент элемента в переменную contactHTML
var contactHTML = $('#contact').html();  

Если выборка содержит несколько элементов, то данный метод вернёт HTML контент только первого элемента:

<p>Содержимое 1...</p>
<p>Содержимое 2...</p>
...
<script>
  var htmlContent = $('p').html();
  console.log(htmlContent);
</script>

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

$('p').each(function(){
  // выведем содержимое текущего элемента в консоль
  console.log($(this).html());
});

Установка версии библиотеки jQuery UI, предназначенной для разработки

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

Вы должны скопировать в папку с файлами примеров следующие файлы и папки:

• development-bundle\ui\jquery-ui.custom.js;

• development-bundle\themes\sunny\jquery-ui.css;

• папка development-bundle\themes\sunny\images.

Содержащиеся в папках ui и themes файлы JavaScript и CSS используются отдельными компонентами и средствами, входящих в состав библиотеки. У вас не будет необходимости обращаться к ним, но они могут пригодиться в том случае, если вы захотите работать с ограниченным набором средств библиотеки jQuery UI.

Имена JavaScript- и CSS-файлов включают номер версии загруженного выпуска библиотеки. В моем случае это версия 1.10.3. Библиотека jQuery UI активно разрабатывается, и вы можете загрузить более позднюю версию, чем 1.10.3.

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

Все, что вам теперь остается сделать — это включить библиотеку jQuery UI в свой HTML-документ. Это можно сделать, добавив в документ элементы script и link, содержащие ссылки на файлы JavaScript и CSS, которые вы загрузили, как показано в примере ниже:

Ссылаться непосредственно на папку images необязательно. Коль скоро папка images и CSS-файл находятся на своих местах, jQuery UI сможет самостоятельно найти все необходимые ресурсы.

Библиотека jQuery UI зависит от библиотеки jQuery. Для того чтобы использовать jQuery UI в документе, ее следует предварительно подключить к нему. Библиотека jQuery UI не относится к числу автономно используемых библиотек.

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

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

Заключение

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

Как уже упоминалось ранее, некоторые могут возразить, что вам нужно сначала изучить JavaScript, а затем изучить jQuery; Другие могут возразить, что изучение jQuery — отличный способ проложить свой путь назад к JavaScript.

В любом случае, jQuery — это давняя библиотека в экосреде JavaScript, и она используется в ряде очень популярных проектов (таких как WordPress), поэтому ее стоит изучить.

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

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

Для тех, кто интересуется JavaScript (особенно в контексте WordPress), не стесняйтесь следовать за мной в моем блоге и/или Twitter в @tommcfarlin. Вы также можете просмотреть все мои курсы и учебные материалы на моей странице профиля.

Не стесняйтесь оставлять любые вопросы или комментарии в фиде ниже, и я постараюсь ответить на каждый из них.