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

Методи на jQuery

jQuery е съставен специално да реагира на събитията в една HTML страница. Различните действия на посетителите, на които реагира уеб страницата се наричат събития. Дадено събитие представлява точният момент когато се случва нещо. Например, преместване на курсора или кликване върху определен елемент, избиране на бутон и т.н. Повечето събития в DOM имат еквивалентен метод в jQuery. За да се присвои събитието "click" към определен елемент и това, което трябва да се случи когато се състои това събитие се записва както следва:
		$("елемент").click((function(){
			// следва код
		}); 


Някои често използвани методи в jQuery

ready()


С този метод се прикачва функция като манипулатор на събитие, която се изпълнява след като DOM е напълно зареден, например:


		$(document).ready(function() {
			 $("p").text("DOM сега е зареден и може да бъде манипулиран!");
		});

click()


Методът click() прикачва функция като манипулатор на събитие към определен HTML елемент. Функцията се изпълнява когато потребител кликне върху този HTML елемент. По-долу е даден пример за неговото използване (виж примера в браузъра):


	<!DOCTYPE html>
	<html>
	  <head>
		<script src="/jquery.js"></script>
		<script>
		  $(document).ready(function(){
			$("#aim").click(function() {
			alert("Манипулаторът за сабитие .click() е задействан!");})
		  });
		</script>
		<style>
		  a:hover {
		  cursor:pointer;
		  }
		  .j1 {
		  width:120px;
		  height:auto;
		  padding:5px;
		  background-color:#FFE4C4;
		  background-clip:content-box;
		  border:2px solid #DEB887;
		  text-align: center;
		  }
	 
		</style>
	  </head>

	  <body>
		<div  class="j1">
		 <div id="aim">
		  <a href="/">Натиснете тук</a>
		 </div>
		</div>
		<div>
		  Този елемент не реагира на събитие .click().
		</div>
	  </body>
	</html>

dblclick()


Методът dblclick() прикачва функция като манипулатор на събитие към определен HTML елемент. Разликата с методът click() се състои в това, че функцията се изпълнява когато потребител извърши двойно кликване върху съответния HTML елемент.


mouseenter()
mouseleave()
hover()


Прикачената функция към метода mouseenter() се изпълнява когато курсорът се постави върху съответния HTML елемент.


Прикачената функция към метода mouseleave() се изпълнява когато курсорът се отстрани от съответния HTML елемент.


Метода hover() е комбинация между двата горни метода, като първата прикачена към него функция се изпълнява когато курсорът се постави върху съответния HTML елемент, а втората прикачена функция се изпълнява когато курсорът се отстрани от съответния HTML елемент. По-долу е даден пример с добавяне на допълнително форматиране към неномериран списък при изпълнение на метода hover() (виж примера в браузъра):


	<!DOCTYPE html>
	<html>
	  <head>
		<style>
		  ul { margin-left:120px;  font-weight:bold;}
		  li { cursor:pointer; }
		  span { color:green;}
		</style>
		<script src="/jquery.js"></script>
	  </head>
	  
	  <body>
		<ul>
		  <li>Автомобили</li>
		  <li>Мотоциклети</li>
		  <li>Автобуси</li>
		  <li class='decorated'>Други превозни средства</li>
		</ul>
		<script>
		  $("li").hover(
			function () {
			$(this).append($("<span> <<< </span>"));
			 },
			function () {
			$(this).find("span:last").remove();
			 }
		  );
			//li, обозначени с клас decorated
			$("li.decorated").hover(function(){$(this).fadeOut(200);$(this).fadeIn(200);});
		</script>
	  </body>
	</html>

mousedown()
mouseup()


Методите mousedown() и mouseup() задействат прикачената функция когато левият бутон на мишката съответно е натиснат или освободен докато мишката се намира върху съответния HTML елемент. За предпочитане е да се използва методът click()


focus()


Методът focus() задейства прикачената към него функция когато фокусът попада над определен елемент. Този метод може да се прилага към елементи като <input>, <select> и <a href>. Прилагане на метода към скрити елементи предизвиква грешка в браузъра Internet Explorer, затова трябва да се използва само с видими елементи (виж примера в браузъра):


	<!DOCTYPE html>
	<html>
	 <head>
		<style>span {display:none;}</style>
		<script src="/jquery.js"></script>
	 </head>
	 <body>
		<p><input type="text" /> <span>Въведете Вашите имена</span></p>
		<p><input type="password" /> <span>Въведете парола</span></p>
		<script>
		  $("input").focus(function () {
		  $(this).next("span").css('display','inline').fadeOut(3000);
		  });
		</script>
	 </body>
	</html>
	

blur()


Методът blur() се задейства когато полето <input> загуби фокус върху съответния html елемент (виж примера в браузъра):


	<!DOCTYPE html>
	<html>
	 <head>
	  <script src="/jquery.js"></script>
	  <script>
		$(document).ready(function(){
		$("input").focus(function(){
			$(this).css('background-color','#FFE4C4');
		 });
		$("input").blur(function(){
			$(this).css('background-color','#F5F5DC');
		  });
		});
		</script>
	 </head>
	 <body>
		Вашите имена: <input type="text" name="fullname" style="background-color: #F5F5DC;"><br>
		Вашият адрес: <input type="text" name="address" style="background-color: #F5F5DC;">
	 </body>
	</html>