Руководство по jQuery — Начало работы: основы и селекторы

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

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

Я скажу это сейчас — вам не нужно изучать Javascript, чтобы использовать jQuery. Вероятно, будет лучше, если вы будете думать о jQuery как об эволюции Javascript — лучшего способа сделать это — чем просто библиотеку, которая добавляет функциональность. Любой необходимый вам Javascript будет подобран по пути. Предполагается, однако, что как веб-разработчик вы достаточно хорошо знаете HTML и CSS (и вот полезное бесплатное руководство по xHTML, если нет!).

Объектная модель документа

JQuery это все про обход и манипулирование DOM — Document О▪ Таблица MОдел. DOM — это иерархическое древовидное представление страницы, созданное браузерами после прочтения всего HTML-кода. В jQuery мы будем довольно часто использовать терминологию, такую ​​как parent, children и siblings, поэтому вы должны иметь представление о том, что это означает в отношении DOM.

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

Начало работы: добавление jQuery

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

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

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

wp_enqueue_script("jquery");

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

$.ajax

или же

$("#header")

Однако, когда jQuery загружается через WordPress, все делается с использованием переменной jQuery вместо $, например, так:

jQuery("#header")

Хотя это не является большой проблемой при написании собственного кода, это означает, что для вырезания и вставки фрагментов jQuery, которые вы найдете в Интернете, необходимо будет использовать jQuery вместо $ — это все.

Один из способов обойти это — обернуть код в стиле $, который вы нашли так:

(function($) {
// paste $ code in here
})(jQuery);

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

Чтобы добавить свой код на страницу HTML или PHP, заключите все в теги, например:

// jQuery code codes here

$ ( «селектор«).Метод ();

Вот и все, в названии там. Это базовая структура отдельного фрагмента кода jQuery для управления DOM. Легко, правда?

селектор говорит jQuery найти вещи, которые соответствуют этому правилу, и такой же, как CSS-селекторы (а затем еще несколько сверху). Таким образом, как и в CSS, вы бы стилизовали все ссылки с помощью

a { }

То же самое будет сделано в jQuery как

$('a')

Это может быть сделано для любых элементов HTML — div, h1, span — что угодно. Вы также можете использовать CSS классы и идентификаторы, чтобы быть более конкретными.

Например, чтобы найти все ссылки с классом «findme», вы должны использовать:

$('a.findme')

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

$('.findme')

который будет соответствовать всему классу findme, независимо от того, была ли это ссылка.

Чтобы использовать именованный элемент ID, используйте # подпишите вместо. Ключевое отличие здесь состоит в том, что селектор идентификатора будет выбирать только один объект, тогда как селектор класса может найти более одного.

$('#something')

В принципе, если вы можете сделать это в CSS, то jQuery сделает то же самое. На самом деле, вы также можете использовать несколько довольно сложных псевдоселекторов в стиле CSS3, таких как: first

$('body p:first')

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

$('a[href*="makeuseof"]')

Разве это не круто? Ну, я думаю, что это так.

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

Следующая часть уравнения метод — что делать с этими вещами, как только вы их все найдете — но мы оставим это для следующего урока. Если вы хотите начать испытывать различные селекторы сейчас, я советую вам придерживаться следующего метода CSS. Для этого требуется два параметра — имя свойства CSS и новое значение, назначаемое этому свойству. Итак, чтобы дать всем ссылкам красный цвет фона, вы должны сделать:

$('a').css('background-color','red');

Достаточно просто! Хотя это может не иметь никакого практического применения, оно позволит вам легко увидеть любые элементы, расположенные с помощью ваших селекторов. А теперь иди и выбери — DOM ждет тебя.

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