web-development.ucoz.ru

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

Используйте атрибут 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, который состоит из символов, используемых в обозначении CSS?

Потому что jQuery использует синтакс CSS для выбора элементов, некоторые символы интерпретируются как CSS обозначения. Например, атрибуты ID, после букв (a-z или A-Z), также могут использовать точки и двоеточия, в дополнение к буквам, цифрам, знакам переноса и подчеркивания (смотрите W3C Основные типы данных HTML). Двоеточие (":") и точка (".") являются проблематичными в контексте селекторов jQuery, поскольку они указывают на псевдо-класс и класс, соответственно.

Для того, чтобы сказать jQuery, чтобы тот рассматривал эти символы буквально, а не как CSS обозначения, они должны быть "обозначенны" размещением двух обратных косых черт перед ними.

 // Does not work
 $("#some:id")
 
 // Works!
 $("#some\\:id")

 // Does not work
 $("#some.id")
 
 // Works!
 $("#some\\.id")

Следующая функция заботится об обозначении этих символов и ставит "#" в начале строки с ID:

 function jq(myid) { 
 return '#' + myid.replace(/(:|.)/g,'$1');
 }

Функция может быть использована как:

 $( jq('some.id') )

Как включить или отключить элемент формы?

Есть два способа включить / отключить элементы формы.

Установить атрибут 'disabled' в true или false:

 // Disable #x
 $('#x').attr('disabled', true);
 // Enable #x
 $('#x').attr('disabled', false);

Добавить или удалить атрибут 'disabled':

 // Disable #x
 $("#x").attr('disabled', 'disabled');
 // Enable #x
 $("#x").removeAttr('disabled');

Вы можете попробовать пример включения / выключения со следующей демонстрацией:

и здесь код демонстрации:

Как я могу поставить/убрать флажок или радио кнопку?

Есть два способа поставить/убрать флажок или радио кнопку.

Установить атрибут 'checked' в true или false.

 // Check #x
 $('#x').attr('checked', true);
 // Uncheck #x
 $('#x').attr('checked', false);

Добавить или удалить атрибут 'checked':

 // Check #x
 $("#x").attr('checked', 'checked');
 // Uncheck #x
 $("#x").removeAttr('checked');

Вы можете попробовать пример установки/убирания со следующей демонстрацией:

I'll be checked/unchecked.

и здесь код демонстрации:

Как я могу получить текстовое значение выбранного параметра?

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

 $("#myselect").val();
 // => 1

И второе это текстовое значение выбора. Например, используя следующее окно выбора:

Если вы хотите получить строку "Mr", если первый вариант был выбран (вместо "1"), вы могли бы сделать это следующим образом:

 $("#myselect option:selected").text();
 // => "Mr"

Вы можете увидеть это в действии в следующей демонстрации:

и здесь полный код к этой демонстрации:

Как заменить текст из третьего элемента списка, состоящего из 10 элементов?

Либо селектор :eq(), либо метод .eq() позволят вам выбрать правильный элемент. Вместе с тем, чтобы заменить текст, вы должны получить значение, прежде чем установить его:

 // This doesn't work; text() returns a string, not the jQuery object
 $(this).find('li a').eq(2).text().replace('foo','bar');

 // This works
 var $thirdLink = $(this).find('li a').eq(2);
 var linkText = $thirdLink.text().replace('foo','bar');
 $thirdLink.text(linkText);

Первый пример просто отбрасывает измененный текст. Второй пример сохраняет измененный текст, а затем заменяет прежний текст на новый измененный текст. Помните, что .text() получает; .text("foo") устанавливает.

Как сжать мой код?

Вообще лучший способ сделать это состоит в использовании Закрытого компилятора Google (используется jQuery) или YUI компрессора. jQuery предоставляет минифицированную версию jQuery для вашего удобства.

Сжатие JavaScript с использованием Dean Edwards упаковщик (специально использующем кодирование base64) не рекомендуется, так как декодирование на стороне клиента имеет существенные недостатки превышающие преимущества по сокращению размера файла.

Если сжатие JavaScript повреждает его, попробуйте запустить код через JSLint. Это позволит обнаружить незначительные ошибки, которые могут вызвать провал у сжатого JavaScript, в то время как распакованная версия работает отлично.

Как я могу получить и использовать сервер ответ от запроса AJAX?

"А" в AJAX расшифровывается как асинхронный. При вызове функций, которые имеют асинхронное поведение необходимо указать функцию обратного вызова для захвата желаемого результата. Это особенно важно с AJAX в браузере, потому что когда удаленный запрос сделан, то невозможно определить, когда (или даже если) ответ будет получен.

В следующем фрагменте показан пример создания AJAX вызова и оповещения полученного ответа (или ошибки):

 $.ajax({
 url: 'myPage.php',
 success: function(response) {
 alert(response);
 },
 error: function(xhr) {
 alert('Error! Status = ' + xhr.status);
 }
 });

Но как ответ может использоваться в контексте функции? Рассмотрим недостатки этого примера, когда мы пытаемся обновить некоторые сведения о состоянии на странице:

 function updateStatus() {
 var status;
 $.ajax({
 url: 'getStatus.php',
 success: function(response) {
 status = response;
 }
 });
 // update status element? this will not work as expected
 $('#status').html(status);
 }

Приведенный выше код не работает в соответствии с пожеланиями в связи с характером асинхронного программирования. В случае успеха обработчик не вызывается непосредственно, а в некоторый момент времени в будущем, когда получен ответа от сервера. Поэтому, когда мы используем переменную "status" сразу после вызова $.ajax, то ее значение еще не определено. Следующий фрагмент кода показывает, как мы можем переписать эту функцию, чтобы та вела себя как хотелось бы:

 function updateStatus() {
 $.ajax({
 url: 'getStatus.php',
 success: function(response) {
 // update status element
 $('#status').html(response);
 }
 });
 }

Но как я могу вернуть ответ с сервера при вызове AJAX? Здесь мы снова покажем недостатки попытки. В этом примере мы попытаемся выдать предупреждение о http статусе для адреса "getStatus.php ':

 //...
 alert(getUrlStatus('getStatus.php'));
 //...
 function getUrlStatus(url) {
 $.ajax({
 url: url,
 complete: function(xhr) {
 return xhr.status;
 }
 });
 }

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

 //...
 getUrlStatus('getStatus.php', function(status) {
 alert(status);
 });

 // ...
 function getUrlStatus(url, callback) {
 $.ajax({
 url: url,
 complete: function(xhr) {
 callback(xhr.status);
 }
 });
 }

Как вытащить родной элемент DOM из объекта jQuery?

Объект jQuery является массиво-подобным, обернут вокруг одного или нескольких элементов DOM. Чтобы получить ссылку на фактические элементы DOM (вместо объекта jQuery), у вас есть два варианта. Первый (и самый быстрый) способ заключается в использовании массива обозначения:

 $('#foo')[0]; // equivalent to document.getElementById('foo')

Вторым способом является использование функции get:

 $('#foo').get(0); // identical to above, only slower

Вы также можете вызвать get без каких-либо аргументов, чтобы получить истинный массив элементов DOM.

Почему ... ?

Почему мои события перестают работать после запроса AJAX?

Часто, когда вы добавляете нажатие (или другое события) обработчика на все ссылки использующие $('a').click(fn), вы обнаружите, что события больше не работатают, после того как загружается новое содержание на страницу с помощью запроса AJAX.

При вызове $('a'), возвращаются все линки на странице на время этого вызова, и .click(fn) добавляет ваш обработчик только на эти элементы. Когда добавленны новые линки, на них этот эффект не распространяется.

Есть два способа обработки этого:

Использование события делегации

Делегирование события это техника, использующая кипение события для захвата событий на элементы в любом месте DOM.

Начиная с jQuery 1.3, вы можете использовать методы live и die для делегирования события с подмножеством типов событий. Начиная с jQuery 1.4, вы можете использовать эти методы (вместе с delegate и undelegate начиная с 1.4.2) для делегации события с почти любым типом события.

Вы также можете вручную обрабатывать делегирование события путем связывания с общим контейнером и трансляцией событий оттуда. Например:

 $('#mydiv').click(function(e){
 if( $(e.target).is('a') )
 fn.call(e.target,e);
 });
 $('#mydiv').load('my.html');

Этот пример будет обрабатывать клики на любые элементы <a> в #mydiv, даже если они еще не существуют, когда обработчик нажатия добавляется.

Использование события связывания

Этот метод требует, чтобы вы вызвали метода bind на новые элементы по мере их добавления. Например:

 $('a').click(fn);
 $('#mydiv').load('my.html',function(){
 $('#mydiv a').click(fn);
 });

Осторожно! Начиная с jQuery 1.4.2, привязывание обработчика на тот же элемент несколько раз заставит его выполнить обработчик более одного раза. Это отличается от предыдущих версий jQuery, а также спецификации событий DOM 2 (которая обычно игнорирует дубликаты обработчиков событий).

Почему событие не работает на новые созданные мною элементы?

Как объяснялось в предыдущем вопросе о AJAX, события связаны только к элементам, которые существуют на момент, когда вы производите ваш первоначальный вызов jQuery. При создании нового элемента, необходимо привязать событие к нему отдельно, или использовать делегацию события.

Почему анимация устанавливает стиль отображения в block?

Только элементы уровня блока могут иметь пользовательские ширину или высоту. Когда вы выполняете анимацию на элемент, который оживляет высоту или ширину (например, show, hide, slideUp, или slideDown), свойство CSS 'display' будет установлено в "block" на протяжении анимации. Свойство 'display' будет возвращено к исходному значению после завершения анимации. (Это не работает должным образом для встроенного блока элементов.)

Есть два распространенных обходных пути:

Если вы хотите, чтобы элемент оставался в строке, но вы просто хотите оживить его, вы можете использовать анимацию fadeIn или fadeOut (которые влияют только на прозрачность элемента).

 // Instead of this:
 $("span").show("slow");
 
 // do this:
 $("span").fadeIn("slow");

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