Uru-ru.ru - web дизайн, программирование, система оперативного управления компанией, 3d art
about web design web programming 3d art contacts
jQuery FAQ - часто задаваемые вопросы по jQuery.

jQuery FAQ - часто задаваемые вопросы по jQuery. jQuery FAQ - часто задаваемые вопросы по jQuery.

Речь пойдет о казалось бы совсем простых вещах, но не всегда очевидных с первого взгляда, поэтому эта информация наверняка может кому-то пригодится.

Как выбирать элементы, используя class или id?

Этот код выбирает элемент с id "myDivId". Поскольку id является уникальным, это выражение всегда выбирает один элемент. Или ничего не выбирает, если элемента с таким id не существует.

$('#myDivId');

Следующий код выбирает элемент(ы) с классом "myCssClass". Поскольку любое количество элементов может иметь этот класс, это выражение будет выбирать любое количество элементов.

$('.myCssClass');

Выбранный элемент может быть присвоен переменной javascript, например так:

var myDivElement = $('#myDivId');

Обычно выбранные элементы задействуются другими функциями jQuery:

// получаем значение элемента
var myValue = $('#myDivId').val();
// устанавливаем значение элемента
$('#myDivId').val("hello world");

Выбирая элементы по имени класса, лучше использовать составной селектор. Если отбор идет по id, то логично использовать именно id.

$('#myDivId'); // лучше  
$('div#myDivId'); // хуже  
$('span.myCssClass'); // лучше  
$('.myCssClass'); // хуже

Как проверить имеет ли элемент специфический класс?

Вы можете использовать метод is() вместе с подходящим селектором.

if ( $('#myDiv').is('.pretty') )     
$('#myDiv').show();

Заметьте, что этот метод позволяет Вам проверять также и другие вещи. Например Вы можете проверить, скрыт ли элемент (при использовании :hidden селектора).

if ( $('#myDiv').is(':hidden') )     
$('#myDiv').show();

Иногда также бывает вопрос: имеет ли jQuery hasClass метод?

Заметьте, что hasClass был добавлен начиная с версии 1.2, чтобы обрабатывать наиболее распространенное использование метода is().

$("div").click(function(){    
if ( $(this).hasClass("protected") )      
$(this).animate({ left: -10 }).animate({ left: 10 }).animate({ left: -10 }).animate({ left: 10 }).animate({ left: 0 });  
});

В этом коде добавляется некая анимация для элемента(ов) с классом protected. Обратите внимание, что имя класса тут записывается без точки.

Как проверить существование элемента?

Вы можете использовать свойство length набора jQuery, возвращенного селектором.

if ( $('#myDiv').length )   
$('#myDiv').show();

Заметьте, что вовсе не всегда необходимо проверять, существует ли элемент. Следующий код показал бы элемент, если он существует, и не сделал бы ничего (и никакой ошибки бы не возникло), если это неверно.

$('#myDiv').show();

Как определить состояние переключаемого элемента?

Вы можете проверить состояние, используя селекторы :visible или :hidden.

var isVisible = $('#myDiv').is(':visible'); 
var isHidden = $('#myDiv').is(':hidden');

Если Вы хотите воздейстовать на элемент, основываясь на его видимости, просто включите ":visible" или ":hidden" в выражение селектора. Например:

$('#myDiv:visible').animate({left: '+=200px'}, 'slow');

Как выбирать элементы, которые имеют специфические символы в id?

Например, это может быть обычным для некоторых фреймворков, генерирующих уникальные id, которые имеют специальные символы в них (такие как '.' или '[..]'). Проблема состоит в том, что эти символы имеют специальное значение в CSS. Как поступать в таких случаях, смотрите на следующих примерах:

$("#some.id") // это не работает!  
$("#some\.id") // а это работает!  
$("#some[id]") // это не работает!  
$("#some\[id\]") // а это работает!

Как разрешать/запрещать использование элемента?

Вы можете разрешать/запрещать элемент, устанавливая атрибут 'disabled' в значение 'disabled' (чтобы запретить использование элемента) или присвоить тому же атрибуту пустое значение '', или же просто удалить атрибут 'disabled' (чтобы разрешить использование элемента). Код может выглядеть примерно следующим образом:

// запрещаем использование элемента 
#x  $("#x").attr("disabled","disabled");  
// разрешаем  использование элемента 
#x  $("#x").attr("disabled","");  // разрешаем  использование элемента 
#x  $("#x").removeAttr("disabled");

Вы можете посмотреть исходный код:


    
    

Как отметить/снять отметку с элемента checkbox?

Вы можете отметить/снять отметку c элемента checkbox, устанавливая атрибуту 'checked' значение 'checked' (чтобы отметить элемент) или установить атрибуту 'checked' пустое значение "" (чтобы снять отметку). Пример кода приведен ниже:

// отмечаем checkbox с id="c"  
$("#c").attr("checked", "checked");
  // снимаем отметку 
checkbox'а с id="c"  $("#c").attr("checked","");

Вы можете посмотреть исходный код:

    
    

Как получать значения выбранной опции элемента select?

Элементы select обычно имеют два значения, к которым нужно обратиться. Это значение атрибута value соответствующего элемента option и его текстовое значение. Для примера возьмем следующий код:

Вот так можно получить значение атрибута value, выбранной опции:

$("select#myselect").val();

А вот так можно получить текст выбранной опции:

$("#myselect option:selected").text();

Вы можете посмотреть исходный код:

    
    
 jQuery FAQ - часто задаваемые вопросы по jQuery.
Дата публикации 13 апреля 2009

Реклама

about | design | programming | art | contacts

copyrights (C) 2005-2014 Uru-ru.ru