Login / Sign Up


Enter site:
Login: 
Password: 


First time here?
 
Register [?]:
Registering allows you:
  • Purchase products from the product catalog and access them any time.
  • Ask questions to another specialists in IT
  • Publish your own Joomla extensions, soft or other products if you are developer or distributor
  • Add interesting weblinks and access them from any place
  • Watch the updates of the site and have special abilities that guests don't have
  • Watch the news of the service and new articles and get knowledge
Choose login:
Your Email:
Enter the result of operation (in digits):
13 - 1 = ? Update

API Features
jQuery - метод hasClass(), или проверяем наличие класса у элемента PDF Print E-mail
Written by Максим   
Friday, 27 April 2012 09:57
Liked:
67


Did not like: 11

Доброго времени суток, уважаемые дамы и господа! В этой совсем небольшой статье я расскажу, как с помощью jQuery проверить наличие класса у элемента. Любой HTML-элемент всегда может иметь более одного класса. Все классы, назначенные элементу, перечисляются через пробел в атрибуте class элемента, как показано ниже:

 

	 

	<div id="myPanel" class="sizeable draggable"></div>

	 

	
 
В этом примере для DIV-элемента установлено два класса - sizeable и draggable. Если нам необходимо проверить, задан ли определенный класс для какого-то элемента, то на jQuery это делается с помощью метода hasClass(). Так, если мы хотим узнать, есть ли у нашего DIV-а класс sizeable, мы делаем следующую проверку:
 

	 

	if ( $("#myPanel").hasClass("sizeable") ) {

	alert("У элемента задан класс sizeable!");

	}

	 

	
 
После выполнения этого кода на экран будет выведено сообщение "У элемента задан класс sizeable!". Иногда начинающим разработчикам jQuery хочется использовать метод attr() библиотеки jQuery, чтобы сравнить значение атрибута class элемента с каким-то классом, что в корне неверно. Например, следующий код написан неправильно:
 

	 

	if ( $("#myPanel").attr("class") == "sizeable" ) {    

	    // сюда мы никогда не попадем!

	    alert("Это сообщение не отобразится, т.к. нельзя проверять наличие класса у элемента с помощью метода attr()!");

	}

	 

	
 

Никогда не проверяйте наличие класса у элемента с помощью метода attr()! Этот код не будет работать. Всегда используйте метод hasClass()

Поскольку по спецификации HTML у любого элемента может быть несколько классов, то вполне понятно, почему attr() здесь не срабатывает - этот метод используется для чтения или установки тех атрибутов элемента, которые имеют единственное значение. Такими могут быть, например, атрибуты id, title и т.д. Если необходимо проверить наличие нескольких классов у элемента, придется использовать метод hasClass() для проверки каждого класса. Например, если мы хотим узнать, заданы ли оба класса у элемента, то используем следующий код:
 

	 

	if ( $("#myPanel").hasClass("sizeable") && $("#myPanel").hasClass("draggable") ) {

	alert("У элемента заданы оба класса: sizeable и draggable!");

	}

	 

	
 
Если же хотим проверить наличие хотя бы одного из двух классов, то проверяем так:
 

	 

	if ( $("#myPanel").hasClass("sizeable") || $("#myPanel").hasClass("draggable") ) {

	alert("У элемента задан какой-то из классов: sizeable или draggable!");

	}

	 

	
 

Демо

Я решил для наглядности привести демонстрацию работы приведенных выше кусков кода. Как уже понятно, будут выведены подряд три сообщения. Чтобы увидеть результат работы, перейдите на вкладку Result:
 
 
Last Updated on Wednesday, 13 June 2012 13:38
 
jQuery - предотвратить переход по ссылке, или метод event.preventDefault() PDF Print E-mail
Written by Максим   
Wednesday, 25 April 2012 10:30
Liked:
56


Did not like: 6

В jQuery есть один интересный метод preventDefault(), который позволяет предотвратить возникновение "действия по умолчанию" для конкретного события. Например, если в  разметке есть гиперссылка, но мы хотим использовать эту ссылку как кнопку button - т.е. без перехода по URL, заданному в атрибуте href, то используется как раз preventDefault(). После этого, всё, что необходимо сделать, - это добавить вызов preventDefault() в обработчик события клика мышью. Пример разметки и кода показан ниже:

1. Разметка. Создаем гиперссылку. В ней указан некоторый URL в атрибуте href. Но мы предотвратим переход по ссылке


	<a id="customLink" href="http://google.com">При клике по этой ссылке ты не сможешь перейти на Google</a>

	

2. Обработчик на jQuery. Добавляем в обработчик click вызов метода preventDefault(). Результат - отмена перехода по ссылке и вывод нашего сообщения.


	 

	$("a#customLink").click(function(event) {

	    

	    event.preventDefault();

	    alert("Мы не перешли по ссылке, а вывели своё сообщение!");

	});​

	

 

Демо:

Last Updated on Wednesday, 25 April 2012 22:25
 


Found Error?

Система Orphus

Site Statistics

Яндекс.Метрика

Our Pages


Allineed.Ru © 2009-2012 - Allineed.Ru - ответы на IT вопросы, статьи о разработке, IT и программном обеспечении. При использовании материалов сайта ссылка обязательна. Использование данного сайта и любой его части означает принятие условий Пользовательского Соглашения.
Allineed.Ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.