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

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

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

jQuery - это обход и манипулирование ПРИГОВОР - в D окумент ИЛИ bject M одель. DOM - это иерархическое древовидное представление страницы, построенное браузерами после прочтения всего HTML-кода. В jQuery мы будем использовать терминологию вроде родитель , дети , а также братья и сестры довольно часто, поэтому вы должны иметь представление о том, что это означает в отношении DOM.

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

jQuery code codes here`

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

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

Вселекторсообщает jQuery, что нужно найти то, что соответствует этому правилу, и совпадает с селекторами CSS (а потом еще несколько). Итак, как и в CSS, вы должны стилизовать все ссылки с помощью

a { }

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

$('a')

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

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

$('a.findme')

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

$('.findme')

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

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

импортировать пароли из Firefox в Chrome

$('#something')

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

$('body p:first')

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

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

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

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

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

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

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

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

Делиться Делиться Твитнуть Эл. адрес 5 советов, как зарядить ваши машины VirtualBox Linux

Устали от низкой производительности виртуальных машин? Вот что вам нужно сделать, чтобы повысить производительность VirtualBox.

Читать далее Похожие темы

Веб-культура
Веб-разработка
JavaScript
Программирование
jQuery

Об авторе Джеймс Брюс(Опубликовано 707 статей)

Джеймс имеет степень бакалавра в области искусственного интеллекта и имеет сертификаты CompTIA A + и Network +. Когда он не занят в качестве редактора обзоров оборудования, он любит LEGO, VR и настольные игры. До прихода в MakeUseOf он работал светотехником, учителем английского языка и инженером центра обработки данных.

Ещё от James Bruce

Подписывайтесь на нашу новостную рассылку

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

Нажмите здесь, чтобы подписаться