Работа с выборкой элементов на jQuery
В предыдущей статье мы разбирали, как сделать выборку элементов в jQuery, однако, сама по себе выборка не имеет смысла, если с ней ничего не делать. И в этой статье мы разберём, как мы можем работать с выборкой элементов на jQuery.
Давайте разберём для начала следующий пример
<div id="block"><span>Блок</span></div>
<script type="text/javascript">
var element = $("#block span").clone(); // Клонируем элемент span внутри #block
element.text("Новый блок"); // Устанавливаем текстовое содержимое у элемента
$("#block").append(element); // Добавляем элемент внутрь #block
</script>
В данном примере мы, во-первых, разобрали метод clone(). Его цель создать копию элемента для того, чтобы мы могли управлять новым элементом, не затрагивая старый. Далее мы поменяли текстовое содержимое с "Блок", доставшееся нам от элемента, который мы склонировали, на "Новый блок". В конце мы уже добавили с помощью метода append() наш созданный блок внутрь элемента с id="block".
Помимо клонирования элементов и изменения текстового содержимого, также используется возможность задания CSS-свойств для элементов:
<div id="red"><span>Блок</span></div>
<div id="green"><span>Блок</span></div>
<script type="text/javascript">
$("div").css("font-size", "20px"); // Устанавливаем размер шрифта для всех div
$("#red").css("color", "#f00"); // Устанавливаем красный цвет для id="red"
$("#green").css("color", "#0f0"); // Устанавливаем зелёный цвет для id="green"
</script>
Как видите, методы можно применять не только к одному элементу, а к целой выборке, как это продемонстрировано в строчке, где устанавливается размер шрифта.
Разберём ещё один пример работы с выборкой элементов на jQuery:
<div>
<a href="#">Ссылка</a>
<img src="image.jpg" alt="" />
<img src="image.jpg" alt="" />
<img src="image.jpg" alt="" />
</div>
<script type="text/javascript">
var elements = $("div").children(); // Получаем дочерние элементы
for (var i = 0; i < elements.length; i++) {
$(elements.get(i)).attr("title", "Заголовок"); // Устанавливаем атрибут title="Заголовок"
}
</script>
В данном примере мы получили дочерние элементы и установили у них атрибуты. Но здесь самое главное не это. Обратите внимание, что метод attr() применяется именно к объекту jQuery. То есть написать так: "elements.get(i).attr" - нельзя, а только так "$(elements.get(i)).attr". Запомните, что если Вы используете метод, принадлежащий jQuery, а не JavaScript, то обязательно надо обёртывать элементы в $().
И, напоследок, ещё разберём один пример:
<div class="class_1"></div>
<div class="class_2"></div>
<div class="class_3"></div>
<script type="text/javascript">
var elements = $("div"); // Получаем все div
for (var i = 0; i < elements.length; i++) {
var element = elements.get(i); // Берём i-й элемент из выборки
/* Далее с помощью метода html() устанавливаем соответствующий HTML-код внутри элемента */
if (element.className == "class_1") $(element).html("<p>Это блок с классом №1</p>");
else if (element.className == "class_2") $(element).html("<p>Это блок с классом №2</p>");
else $(element).html("<p>Это блок с другим классом</p>");
}
</script>
Здесь стоит обратить внимание на "element.className". Как видите, здесь нет $(). Так написано потому, что свойство className встроено в JavaScript. А вот метод html() принадлежит jQuery, поэтому мы и пишем "$(element).html(...)".
Несмотря на то, что статья получилась немного больше обычного, здесь всё равно разобраны далеко не все возможности по работе с элементами на jQuery. Более подробно по работе с выборкой элементов на jQuery я рассказывал здесь.
-
Создано 14.10.2013 12:21:49
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.