Вход / Регистрация


Вход на сайт:
Логин: 
Пароль: 


Впервые здесь?
 
Регистрация [?]:
Регистрация у нас позволит:
  • Покупать платные продукты из каталога и иметь к ним доступ в любое время
  • Задавать вопросы другим людям, участвовать в дискуссиях
  • Публиковать свои расширения, программы и софт, если Вы разработчик или дистрибьютор
  • Добавлять интересные ссылки и иметь к ним доступ из любой точки, где есть выход в Интернет
  • Следить за обновлениями сервиса и получать дополнительные возможности, которых не имеют обычные гости
  • Следить за новыми статьями и получать новые знания
Выберите логин:
Ваш Email:
Введите результат выполнения операции (цифрами):
11 + 4 = ? Обновить

Особенности API
jQuery - метод hasClass(), или проверяем наличие класса у элемента PDF Печать E-mail
Автор: Максим   
27.04.2012 09:57
Понравилось:
79


Не понравилось: 13
Недоступен ни один перевод.

Доброго времени суток, уважаемые дамы и господа! В этой совсем небольшой статье я расскажу, как с помощью 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:
 
 
Обновлено 13.06.2012 13:38
 
jQuery - предотвратить переход по ссылке, или метод event.preventDefault() PDF Печать E-mail
Автор: Максим   
25.04.2012 10:30
Понравилось:
60


Не понравилось: 8
Недоступен ни один перевод.

В 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("Мы не перешли по ссылке, а вывели своё сообщение!");

	});​

	

 

Демо:

Обновлено 25.04.2012 22:25
 


Нашли ошибку?

Система Orphus

Оплата на сайте

Яндекс.Деньги
www.megastock.ru
Здесь находится аттестат нашего WM идентификатора 207935874510
Проверить аттестат

Статистика сайта

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

Мы в Интернете


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.