На прошлой неделе я говорил о том, насколько важен jQuery любому современному веб-разработчику и узнать, почему он потрясающий. На этой неделе я думаю, что пришло время запачкать руки кодом и научиться использовать jQuery в наших проектах.
Я скажу это сейчас — вам не нужно изучать Javascript, чтобы использовать jQuery. Вероятно, будет лучше, если вы будете думать о jQuery как об эволюции Javascript — лучшего способа сделать это, — чем просто библиотека, которая добавляет функциональность. Любой необходимый вам Javascript будет подобран по пути. Предполагается, однако, что как веб-разработчик вы достаточно хорошо знаете HTML и CSS (и вот полезное бесплатное руководство по xHTML, если нет! ).
Объектная модель документа
JQuery — это все про обход и манипулирование DOM — D ocument O bject M odel. DOM — это иерархическое древовидное представление страницы, созданное браузерами после прочтения всего HTML-кода. В jQuery мы будем использовать терминологию, такую как parent , children и siblings, довольно часто, поэтому вы должны иметь представление о том, что это означает в отношении DOM.
Эта простая диаграмма от w3schools довольно хорошо объясняет концепции. Вы должны увидеть, что родительским элементом элемента <body> является <html>, в то время как элемент <a> имеет ближайшего родственника <h1>.
Начало работы: добавление jQuery
Последняя версия jQuery составляет около 91 КБ при сжатии, поэтому она добавляет примерно тот же вес страницы, что и небольшая фотография или скриншот. Самый простой способ включить jQuery в ваш проект — вставить ссылку на самую последнюю размещенную версию в раздел заголовка вашего сайта:
<script src="http://code.jquery.com/jquery-latest.min.js"></script> Однако обратите внимание, что если вы работаете с 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, заключите все в теги <script> следующим образом:
<script type="text/javascript"> // jQuery code codes here </script>
$ (« селектор » ). метод ();
Вот и все, в названии там. Это базовая структура отдельного фрагмента кода 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*=""]')
Разве это не круто? Ну, я думаю, что это так.
Следующим портом захода должна быть документация по jQuery API для селекторов . Это огромный список всех видов селекторов, доступных для использования, и никто не ожидал бы, что вы изучите их все.
Следующая часть уравнения — метод — что делать с этими вещами, когда вы их все нашли — но мы оставим это для следующего урока. Если вы хотите начать работу с различными селекторами сейчас, я советую вам придерживаться следующего метода CSS. Для этого требуется два параметра — имя свойства CSS и новое значение, назначаемое этому свойству. Итак, чтобы дать всем ссылкам красный цвет фона, вы должны сделать:
$('a').css('background-color','red');
Достаточно просто! Хотя это может не иметь никакого практического применения, оно позволит вам легко увидеть любые элементы, расположенные с помощью ваших селекторов. Теперь идите и выберите — DOM ждет вас.
Я надеюсь, что этот урок был полезен для вас; Я попытался сделать это как можно более простым для понимания. Не стесняйтесь задавать любые вопросы или оставлять отзывы, но имейте в виду, что я определенно не элитный ниндзя jQuery.