Notice: Undefined variable: this in /home/dimarini/public_html/libraries/src/Application/CMSApplication.php on line 441

Справочник за селекторите в jQuery

Селектор $(*)

Със селекторът $(*) се избират всички елементи в документа, в това число и таговете html, head и body. Когато се използва заедно с друг елемент се избират всички child елементи в този елемент. Например, за да се изберат всички елементи в тага body се използва следния код:

		<script>
		$(document).ready(function(){
		  $("body *").css("font-family","arial");
		});
		</script>


Този селектор се обработва трудно от някои браузъри.



Селектор $("#id")

Този селектор избира елемент с определено наименование, което се отнася към id атрибута на даден HTML елемент. Този атрибут трябва да бъде единствен в целия документ. Примерен код:

		<script>
		$(document).ready(function(){
		  $("#main-text").css({'font-weight':'bold','font-size':'120%'});
		});
		</script>


В секторът body на HTML документа, този елемент изглежда примерно така:



		<div id="main-text">Уникален текст за форматиране!</div>


Атрибутът id не трябва да започва с цифра, тъй като може да се окаже проблем за някои браузъри.



Селектор $(".class")

Този селектор избира елементи с определен клас, които се отнасят към class атрибута на дадени HTML елементи. Този атрибут се използва за форматиране за няколко HTML елементи едновременно. Примерен код:

		<script>
		$(document).ready(function(){
		  $(".element-text").css({'font-weight':'bold','font-size':'120%'});
		});
		</script>


В секторът body на HTML документа, тези елементи изглеждат примерно така:



		<p class="element-text">Текст за форматиране в тага <p>!</p>
		<div class="element-text">Текст за форматиране в тага <div>!</div>


Атрибутът class не трябва да започва с цифра, тъй като може да се окаже проблем за някои браузъри. Този селектор може да се използва за избор на повече класове едновременно, като всеки клас се отделя от следващият със запетая.

		<script>
		$(document).ready(function(){
		  $(".intro,.demo,.element-text").css({'font-weight':'bold','font-size':'120%'});
		});
		</script>




Селектор на определен елемент

Чрез този селектор се избират всички елементи с еднакво наименование. Селекторът може да се използва за избор на повече елементи едновременно, отделени със запетая. В примера по-долу за форматиране са избрани всички елементи, обозначени с тагове <p> и <div>:

		<script>
		$(document).ready(function(){
		  $("p,div").css({'font-weight':'bold','font-size':'120%'});
		});
		</script>




Селектори :first, :first-child, :last и :last-child

Най-често селекторите :first и :last се използват в комбинация с друг селектор за да се избере единствено първия или последния елемент от дадена група. По-долу е даден пример за използването на четирите селектора (виж примера в браузъра):

	<!DOCTYPE html>
	<html>
	  <head>
		<script src="/jquery.js">
		</script>
		<script>
			$(document).ready(function(){
			$("h4:first").css({'background-color':'Coral','width':'600px'});
			$("p:first-child").css({'background-color':'LightBlue','width':'600px'});
			$("p:last").css({'background-color':'red','width':'600px'});
			$("h4:last-child").css({'background-color':'LawnGreen','width':'600px'});
			});
		</script>
	  </head>
	  <body>
		<h4>Това е първият елемент, който е ограден с тага <h4> и отговаря на условието ("h4:first").</h4>
		<br /><br />
		<div style="border:1px solid;width:600px;">
		<p>Това е първият параграф, който е ограден с първия таг <div> и отговаря на условието ("p:first-child").</p>
		<p>Това е вторият параграф, който е ограден с първия таг <div>.
		<br />Този елемент не се влияе от форматирането.</p>
		</p>
		</div>
		<br />
		<div style="border:1px solid;width:600px;">
		<p>Това е първият параграф, който е ограден с втория таг <div> и отговаря на условието ("p:first-child").</p>
		<p>Това е вторият параграф, който е ограден с втория таг <div>.
		<br />Този елемент не се влияе от форматирането.</p>
		<p>Това е последният параграф, който е ограден с втория таг <div> и отговаря на условието ("p:last")</p>
		</div>
		<br />
		<h4>Това е последният елемент, който е ограден с тага <h4> и отговаря на условието  ("h4:last-child").</h4>
	  </body>
	</html>




Селектори :even и :odd

Най-често селекторите :even и :odd се използват в комбинация с друг селектор за да се изберат всички четни или съответно нечетни елементи от дадена група. По долу е даден пример за оцветяване на четните (tr = 0,2 или 4) и нечетните (tr = 1,3 или 5) редове на таблица в два различни цвята, както и задаване на ширината на първата (td = 0,2,4,6,8 или 10) и втората (td = 1,3,5,7,9 или 11) колони (виж примера в браузъра):

	<!DOCTYPE html>
	<html>
		 <head>
			<script src="/jquery.js">
			</script>
			<script>
			$(document).ready(function(){
			  $("tr:even").css({'background-color':'LightGray','text-align':'center'});
			  $("tr:odd").css({'background-color':'Lavender','text-align':'center'});
			  $("td:even").css("width","250px");
			  $("td:odd").css("width","150px");
			});
			</script>
		 </head>
		 <body>
		  <div style="width:450px">
		   <h1 align="center">Селектори :even и :odd</h1>
		   <table border="1" align="center">
		   <tr>
			<th>Селектор</th>
			<th>Синтакс</th>
		   </tr>
		   <tr>
			<td>jQuery селектор .class </td>
			<td>$(.class)</td>
		   </tr>
		   <tr>
			<td>jQuery селектор #name</td>
			<td>$(#name)</td>
		   </tr>
		   <tr>
			<td>jQuery селектор element</td>
			<td>$("element")</td>
		   </tr>
		   <tr>
			<td>jQuery селектор :even</td>
			<td>$(tr:even)</td>
		   </tr>
		   <tr>
			<td>jQuery селектор :odd</td>
			<td>$(tr:odd)</td>
		   </tr>
		   </table>
		  </div>
		 </body>
	</html>


Селектори :first-of-type и :last-of-type

С тези селектори, в комбинация с друг селектор, се избират всички елементи, които са първо или последно разклонение (child) от определен тип на основния таг (parent). По-долу е даден пример за използването на селекторите (виж примера в браузъра):

	<!DOCTYPE html>
	<html>
		<head>
		  <script src="/jquery.js">
		  </script>
		  <script>
				$(document).ready(function(){
				$("p:first-of-type").css({'background-color':'LightBlue','width':'600px'});
				$("p:last-of-type").css({'background-color':'LightGreen','width':'600px'});
				});
		  </script>
		</head>
		<body>
		  <p>Това е първият параграф, който отговаря на условието ("p:first-of-type") </p>
		  <br />
		  <div style="border:1px solid;width:600px;">
		  <p>Това е първият параграф, който е ограден с първия таг <div> и отговаря на условието ("p:first-of-type").</p>
		  <p>Това е вторият параграф, който е ограден с първия таг <div> и отговаря на условието("p:last-of-type").</p>
		  </div>
		  <br />
		  <div style="border:1px solid;width:600px;">
		  <span>Това е елемент <span>, който е ограден с втория таг <div> и не се влияе от форматирането.</span>
		  <p>Това е вторият елемент, но първи параграф, който е ограден с втория таг <div> и отговаря на условието  ("p:first-of-type").
		  <p>Това е последният параграф, който е ограден с втория таг <div> и отговаря на условието("p:last-of-type").
		  </div>
		  <br />
		  <p>Това е последният параграф, който отговаря на условието ("p:last-of-type")</p>
		</body>
	</html>


Селектори :nth-child(n), :nth-last-child(n), :nth-of-type(n) и :nth-last-of-type(n)

С помощта на селекторът :nth-child(n) се избират всички елементи, които са поредно n-то разклонение (child) в основен таг (parent) и са от определен тип. Селекторът :nth-of-type(n) избира всички елементи, които са поредно n-то разклонение (child) от определен тип в основен таг. (parent). Селекторите :nth-last-child(n) и :nth-last-of-type(n) са подобни съответно на селекторите :nth-child(n) и :nth-of-type(n), с тази разлика, че броенето започва от последният елемент. (виж примера в браузъра):



	<!DOCTYPE html>
	<html>
		<head>
		  <script src="/jquery.js">
		  </script>
		  <script>
			$(document).ready(function(){
			$("p:nth-child(3)").css({'background-color':'LightBlue','width':'600px'});
			$("p:nth-of-type(3)").css({'background-color':'LightGreen','width':'600px'});
		});
		  </script>
		</head>
		<body>

		  <h1>Това е заглавие, оградено с таг <h1></h1>
		  <p>Първи параграф <p> в сектора <body>.</p>
		  <p>Втори параграф <p> в сектора <body>, който отговаря на условието ("p:nth-child(3)")</p>
		  <div style="border:1px solid;width:600px;">
		  <span>Това е елемент <span> в първия таг <div>.</span>
		  <p>Това е първият параграф <p> в първия таг <div>.</p>
		  <p>Това е вторият параграф <p> в първия таг <div>, който отговаря на условието ("p:nth-child(3)").</p>
		  <p>Това е последният (трети) параграф <p> в първия таг <div>, който отговаря на условието ("p:nth-of-type(3)").</p>
		  </div><br>

		  <div style="border:1px solid;width:600px;">
		  <span>Това е елемент <span> във втория таг <div>.</span>
		  <p>Това е първият параграф <p> във втория таг <div>.</p>
		  <p>Това е вторият параграф <p> във втория таг <div>, който отговаря на условието ("p:nth-child(3)").</p>
		  <p>Това е последният (трети) параграф <p> във втория таг <div>, който отговаря на условието ("p:nth-of-type(3)").</p>
		  </div>

		  <p>Това е последният (трети) параграф <p> в сектора <body>, който отговаря на условието ("p:nth-of-type(3)").</p>

	</body>
	</html>


Като параметри към двата селектора могат да се използват следните стойности:



Параметър Описание
nИндекс на тага за избор, който трябва да е число. Първият елемент е с индекс 1.
evenИзбира се всеки четен елемент.
oddИзбира се всеки нечетен елемент.
формулаС формула се определя кои елементи да се изберат, например p:nth-child(3+2n).

Останалите селектори ще бъдат представени в таблица с принципно описание на тяхното действие. За подробности кликнете върху наименованието на съответния селектор в първата колонка на таблицата.



СЕЛЕКТОРСИНТАКСИСОПИСАНИЕ
:only-child$("p:only-child")  Всички <p> елементи, които са единствено разклонение (child) на водещия елемент (parent)
:only-of-type$("p:only-of-type") Всички <p> елементи, които са единствено разклонение (child) от определен вид на на водещия елемент (parent)
parent > child$("div > p") Всички <p> елементи, които са пряко разклонение (child) на водещия елемент <div>
parent descendant$("div p") Всички <p> елементи, които се намират във водещия елемент <div>
prev + next$("div + p") Елементите <p>, които следват веднага след елемент <div>
prev ~ siblings$("div ~ p") Всички първи съседни <p> елементи, които следват елемент <div>, независимо дали преди тях има друг елемент.
:eq(номер)$("ul li:eq(3)") Четвъртият елемент от неномериран списък (броенето започва от 0)
:gt(номер)$("ul li:gt(3)") Избират се всички елементи от неномериран списък, които са с по-голям номер от този в скобите (броенето започва от 0).
:lt(номер)$("ul li:gt(3)") Избират се всички елементи от неномериран списък, които са с по-малък номер от този в скобите (броенето започва от 0).
:not(елемент)$("input:not(:empty)") Избира всички елементи, които не съвпадат с указания в скобите, в случая (:empty).
:header$(":header") Избира всички елементи, които са заглавия от типа h1, h2, h3 и т.н.
:animated$(":animated") Избира всички елементи, които са в процес на анимиране при изпълнение на действието на селектора.
:focus$(":focus") Избира елемент, който в момента е на фокус.
:contains(текст)$(":contains('Иван')") Избират се всички елементи, които съдържат точно зададения текст. Действието, което е указано в скрипта след селектора ще бъде изпълнено за всички текстове, които съдържат думата Иван.
:has(елемент)$("div:has(p)") Избират се всички елементи <div>, които съдържат поне един елемент <p>.
:empty$(":empty") Избират се всички елементи, които намят разклонения (children), в това число и текстовите разклонения.
:parent$(":parent") Избират се всички елементи, които имат поне едно разклонение (child).
:hidden$("p:hidden") Избират се всички елементи, които съдържат скрит елемент <p hidden> или
<p style="display:none;">.
:visible$("div:visible") Избират се всички видими елемент <div>.
:root$(":root") Избира се основният елемент на документа.
:lang(идентификатор)$("p:lang(bg-bg)") Избират се всички елементи <p>, които съдържат идентификатора lang="bg-bg".
:input$(":input") Избират се всички елементи input, textarea, select и button.
:text$(":text") Избират се всички елементи от вида type="text".
:password$(":password") Избират се всички елементи от вида type="password".
:radio$(":radio") Избират се всички елементи от вида type="radio".
:checkbox$(":checkbox") Избират се всички елементи от вида type="submit".
:submit$(":submit") Избират се всички елементи от вида type="checkbox".
:reset$(":reset") Избират се всички елементи от вида type="reset"
:button$(":button") Избират се всички елементи от вида type="button"
:image$(":image") Избират се всички елементи от вида type="image"
:file$(":file") Избират се всички елементи от вида type="file"
:enabled$(":enabled") Избират се всички елементи, за които е валидно enabled="enabled".
:disabled$(":disabled") Избират се всички елементи, за които е валидно disabled="disabled".
:selected$(":selected") Избират се всички елементи, за които е валидно selected="selected".
:checked$(":checked") Избират се всички елементи, за които е валидно checked="checked".