Как получить селектор в jQuery
Библиотека jQuery, сильно упрощает веб-разработчику жизнь, предоставляя простой и кроссбраузерный инструмент для манипуляций с содержимым веб-сайтов. Однако, чтобы суметь воспользоваться этим кладом, необходимо приложить минимум усилий и изучить простейшие функции и методы в jQuery.
jQuery предоставляет функции, которые вы можете использовать для написания каких-нибудь приложений. По сути, это надстройка над JavaScript, повторяющая его функции, но более простым и коротким кодом.
В разделе api.jquery.com, можно ознакомиться с описанием всех функций. На этом уроке, мы подробнее остановимся на наиболее простых и часто используемых функциях jQuery. Вы сразу заметите, насколько сильно сократится количество строчек кода, по сравнению с JavaScript.
Запись любой функции или переменной в jQuery начинается со знака $.
У нас есть параграф. Как мы к нему обратились бы через JavaScript?
<p>JQuery - write less, do more.<p>
Мы написали бы так:
var paragraph = document.getElementsByTagName("p");
Теперь посмотрите, как просто получить параграф в jQuery, в кавычках мы просто указываем нужный тег:
$("p");
Метод ready()
Хорошей практикой – является написание кода, внутри метода ready, так мы перестраховываемся от ситуации, когда страница ещё целиком не загрузилась, а jQuery код, уже начал выполняться и возникла ошибка.
$(document).ready(function () {
alert('Все элементы страницы загружены, можно начинать!');
});
Метод css();
Назначает селекторам/тегам какие-то CSS свойства.
Селектор *
Всем элементам $("*") на странице зададим курсивное начертание текста, где css("имя CSS-свойства","значение").
$(document).ready(function () {
$("*").css("font-style", "italic");
});
HTML –код
<p>Параграф</p>
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
</ul>
Результат
По имени селектора
Для всех параграфов на странице СSS свойству color установлено значения cyan.
$(document).ready(function () {
$("p").css("color", "cyan");
});
Результат
Несколько селекторов
Содержимое тегов "p" и "ul" на странице, изменило цвет на коричневый.
$(document).ready(function () {
$("p,ul").css("color", "brown");
});
Результат
Вложенные селекторы
Выбрать все параграфы, вложенные в тег "div".
$(document).ready(function () {
$("div p").css("color", "red");
});
HTML-код
<div>
<p>Вложенный параграф в тег div</p>
</div>
Результат
Селектор по имени класса
Выбор всех элементов "p" с именем класса "green".
$(document).ready(function () {
$("p.green").css("color", "green");
});
<p>Простой параграф.</p>
<p class="green">Параграф с классом.</p>
Селектор по идентификатору
Выбор всех элементов "p" с идентификатором "green".
$(document).ready(function () {
$("p#green").css("color", "green");
});
<p>Простой параграф.</p>
<p id="green">Параграф с классом.</p>
Селектор по атрибуту
Выбор всех элементов "a", с атрибутом "target", имеющим любое значение.
$(document).ready(function () {
$("a[target]").css("color", "blue");
});
<a href="https://jquery.com/">Выборка по атрибуту</a><br />
<a href="https://jquery.com/" target="_blank">Выборка по атрибуту</a>
Как видите, к счастью библиотека JQuery, проста в понимании, но без должной практики, только теория, быстро выветрится. Советую вам для практического закрепления, пройти мой видеокурс.
-
Создано 08.02.2019 10:28:02
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.