Class селектор в jQuery

Публикуван: 22 октомври 2013
Категория: jQuery

В този урок ще ти покажа как работи class селектора в jQuery. Подобно на id селектора, този също селектира HTML елементи от страницата. Има обаче една съществена разлика между тях. Тя е в начина, по който атрибутите id и class се използват в HTML документа.

Демо Свали

Докато стойността на id атрибута трябва да бъде уникална за документа, стойността на class атрибута може да се повтаря многократно. Това е и едно от големите предимства на този селектор. class селектора в jQuery се използва по следния начин:

$( ".list-item" )

..., където:

. подсказва на кода, че това е class селектор; и
list-item е стойността на class атрибута

Може би забелязваш, че .list-item тук е напълно идентичен с начина, по който използваш class селектора в CSS. Това е вярно. Голяма част от jQuery селекторите са еднакви с вече познатите ти CSS селектори. Това ги прави лесни за употреба.

Възможен HTML пасващ на този селектор е:

<ul>
	<li class="list-item">Точка 1</li>
	<li class="list-item">Точка 2</li>
	<li class="list-item">Точка 3</li>
</ul>

В контраст с id селектора, който селектира само един елемент от страницата, class селектора ще селектира всички елементи, които съвпадат със зададената стойност в class атрибута.

От гледна точка на време за изпълнение, class селектора е сравнително бърз. Според документацията в сайта на jQuery, jQuery използва JavaScript функцията getElementsByClassName() в браузърите, които я поддържат.

Друг фактор, за който трябва да внимаваш е използването на специалните мета-символи !"#$%&'()*+,./:;<=>?@[\]^`{|}~ в class стойността. Разгледай следния код:

<h2 class="h2.zaglavie[1]">Заглавие</h2>

За да селектираш този елемент, трябва да “ескейпнеш” всеки от символите . [ ] с две ляво наклонени черти \\. Селектора ще придобие следния вид:

$(".h2.zaglavie[1]") // грешно
$("\\.h2\\.zaglavie\\[1\\]") // правилно

Упражнение

Време е да разгледаш един пример. Ще се опитам да бъде кратък и ясен.

Стъпка 1

Тук създавам нова HTML 5 страница. В нея има неподреден списък с 6 точки. Към всяка втора точка има class атрибут със стойност "list-item". Идеята е да използвам тази стойност в jQuery, за да приложа стил/поведение към избраните елементи.

HTML кода изглежда така:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Class селектор в jQuery</title>
		<link rel="stylesheet" href="style.css">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="custom.js"></script>
	</head>
	<body>
		<h1>Демо: Class селектор в jQuery</h1>
		<ul>
			<li>Точка 1</li>
			<li class="list-item">Точка 2</li>
			<li>Точка 3</li>
			<li class="list-item">Точка 4</li>
			<li>Точка 5</li>
			<li class="list-item">Точка 6</li>
		</ul>
	</body>
</html>

Кода по-горе сигурно ти е ясен:

На 6 ред използвам външен CSS файл за стила на страницата.
На 7 ред използвам услугата Google Hosted Libraries, за да добавя jQuery към страницата. Имам специален урок, в който можеш да научиш повече за това.
На 8 ред използвам външен JavaScript файл, в който всъщност ще добавя целия jQuery код.

Стъпка 2

CSS стила изглежда така:

body {
	font: 14px/21px Verdana, Arial, sans-serif;
	width: 550px;
	margin: 0 auto;
	margin-top: 20px;
}
ul li {
	margin: 5px 0;
}

Тъй като този урок не е свързан със CSS, няма да му обръщам голямо внимание. Надявам се все пак, че нямаш никакви затруднения относно работата на този код.

Резултат

Резултат от стъпка 2. Неподреден лист с няколко подточки.

Стъпка 3

Време е да добавя jQuery. Във файла custom.js имам следния код:

$(document).ready(function () {	
	$(".list-item").css({
		"border" : "2px solid #f26565",
		"padding" : "5px",
		"backgroundColor" : "#efefef"
	});
});

Значението на израза $(document).ready(function () { ... } е разгледан подробно в Стъпка 5 от упражнението към урока “Въведение в jQuery”, затова няма да го повтарям отново. Накратко: кода поставен в този израз се изпълнява след напълното зареждане на страницата.

Може би вече имаш представа за крайният резултат. Чрез $(".list-item") селектирам всички елементи, който имат стойността list-item в своя class атрибут. Това са точките 2, 4 и 6.

Тази селекция обаче сама по себе си не ми дава никаква полза. Ползата е в нещата, които мога да правя с нея. В случая използвам jQuery метода css(), за да добавя CSS стил върху избраните елементи. В някой бъдещ урок ще ти покажа какво представлява този метод. За сега запомни, че чрез него можеш да промениш стила на един/няколко елемента.

Т.е. кода на ред 3 ще добави 2px рамка около елементите. Кода на ред 4 ще добави 5px padding от всички страни. А кода на ред 5 ще промени фона на #efefef.

Резултат:

Стила на подточките 2, 4 и 6 е променен чрез jQuery

Заключение

В този урок научи как да използваш class селектора в jQuery. Той се използва за селектиране на група елементи с общ class. Определено е доста ефективен, гъвкав и дава големи възможности за работа с него. Може би ще го използваш значително по-често от id селектора.

Надявам се, че успя да научиш нещо ново от този урок, което да използваш в своя код. В следващите уроци ще ти покажа няколко други видове селектори, които да добавиш в своя “арсенал” от умения. Ще се радвам да чуя мнението ти относно урока. Сподели го в коментарите по-долу.

Ресурси

Class селектор в страницата на jQuery

Демо Свали

Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.

Награда за това, че успя да достигнеш до края на урока.

Уеб уроци и ресурси по HTML,
CSS, CSS3, JavaScript и други