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

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

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

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

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

родной брат.

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

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

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

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

wp_enqueue_script ( "JQuery");

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

$ .ajax

или же

$ ( "# Заголовок")

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

JQuery ( "# заголовок")

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

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

(function ($) // вставить $ код здесь) (jQuery);

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

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

 // здесь коды jQuery 

$ ( 'Селектор') () метод.

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

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

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

$ ( 'А')

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

Например, чтобы найти все ссылки с классом “Найди меня”, вы бы использовали:

$ ( 'A.findme')

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

$ ( 'FindMe')

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

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

$ ( '# Что-то')

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

$ ('body p: first')

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

$ ( 'А [HREF = "makeuseof"]')

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

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

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

. $ ( 'А') CSS ( 'цвет фона', 'красный');

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

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