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

Селектори в jQuery

Чрез селекторите в jQuery могат да се избират и манипулират HTML елементи.


Те позволяват да се намери и избере елемент, който се дефинира от неговите характеристики като id, class, type, attribute, value и други. Всички селектори в jQuery започват със знака на долара $(). Елементът <p> от HTML документ може да се избере по следният начин:


$("p")

Всички методи на jQuery се предхождат от събитието $(document).ready, което предотвратява изпълнението на кода преди да завърши качването на документа в DOM.


В следващият пример натискането на бутон ще предизвика скриването на всички <p> елементи (виж примера браузъра):


<!DOCTYPE html>
<html>
   <head>
	<script src="/jquery.js"></script>
	<script>
		$(document).ready(function(){
		  $("button").click(function(){
	 	  $("p").hide();
		  });
		});
	</script>
   </head>

   <body>
	<h2>Заглавие, което не се влияе от натискането на бутона!</h2>
	<p>При натискане на бутона "ИЗТРИВАНЕ" този параграф ще изчезне!</p>
	<p>Това е друг параграф, който при натискане на бутона "ИЗТРИВАНЕ" също ще изчезне!</p>
	<button>ИЗТРИВАНЕ</button>
   </body>
</html>

Поради фактът, че JavaScript функциите, които ще се изпълняват от уеб страницата могат да бъдат доста обемисти е рационално да се записват във външен файл, който да се извиква в сектора <head> на уеб страницата. В описаният случай функцията, която се задейства от бутона, а именно


	<script>
		$(document).ready(function(){
		  $("button").click(function(){
	 	  $("p").hide();
		  });
		});
	</script>

може да бъде записана във външен файл, например application.js, след което секторът <head> на уеб страницата ще изглежда по следния начин:


<!DOCTYPE html>
<html>
   <head>
	<script src="/jquery.js"></script>
	<script src="/application.js"></script>
   </head>

Сега да усложним нещата като добавим различни бутони, които влияят по различен начин на различни части от текста. Добавям още три бутона ПРОМЯНА, БЕЗДЕЙСТВИЕ и ВЪЗСТАНОВЯВАНЕ. На четирите бутона се присвояват id съответно action, emphasis, noaction и toggle. Бутоните са оформени със съответните атрибути в тага style. На трите параграфа присвоявам съответните селектори class="del", name="bold", и id="constant". Тези селектори могат да бъдат един от трите вида, тук са дадени и трите за нагледност. За изпълнение на jQuery функциите се въвежда файла application-buttons.js, съдържанието на който е даден под html файла. (виж примера браузъра)


<!DOCTYPE html>
<html>
  <head>
  
    <style>
	  button {
	  height: 40px;
	  width: 260px;
	  font-size:150%;
	  font-weight:bold;
	  text-align:center;
    </style>
	<script src="/jquery.js"></script>
	<script src="/application-buttons.js"></script>
	
  </head>

  <body>
  
  	<button id="action" style="background-color: #6AF77D;">ИЗТРИВАНЕ</button><br />
	<button id="emphasis" style="background-color: #F70E2D;">ПРОМЯНА</button><br />
	<button id="noaction" style="background-color: #F4ED0E;">БЕЗДЕЙСТВИЕ</button><br />
	<button id="toggle" style="background-color: #0EE5F4;">ВЪЗСТАНОВЯВАНЕ</button>
	
	<h2>Заглавие, което не се влияе от натискането на бутоните</h2>
	<p class="del">При натискане на бутона "ИЗТРИВАНЕ" този параграф ще изчезне!</p>
	<p class="bold">Параграф, в който текста се удебелява и увеличава при натискане на бутона "ПРОМЯНА"!</p>
	<p id="constant">При натискането на който и да е бутон този параграф не се променя!</p>

  </body>
</html>

По-долу е дадено съдържанието на файла application-buttons.js. Функциите се отнасят директно за съответният id селектор (например $("#action").click...; $(".bold").css...) или, ако това е необходимо се записва и съответният таг със селектора (например $("button[id = 'noaction']").click...; $("p[class = 'del']") или съкратените варианти $("button#noaction").click... и $("p.del").hide...) съответно.


$(document).ready(function(){
  $("#action").click(function(){
    $("p[class = 'del']").hide();
  });
  $("#emphasis").click(function(){
    $(".bold").css({'font-weight':'bold','font-size':'120%'});
  });  
  $("button[id = 'noaction']").click(function(){
  alert("Този бутон не работи!");
  });
  $("#toggle").click(function(){
  $("p").show();
  $("p").css({'font-weight':'normal', 'font-size':'100%'});
  }); 
});