Статьи

Где объявить ваши функции jQuery

Январь 11, 2019

qanda

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

Вопросов

  • «Это может звучать как очень глупый вопрос, но где я могу объявить свои функции jQuery?»
  • «Работает ли код jQuery вне функции готовности документа?»
  • «Почему моя функция jQuery не работает?»
  • «Поместить ли я событие изменения / нажатия в элемент jQuery или HTML?»

ответы

Простое решение для любого, кто изучает jQuery, — всегда объявлять код jQuery внутри функции готовности документа. Это необходимо для того, чтобы все элементы HTML-страницы, также известные как DOM (объектная модель документа), были загружены перед выполнением любого кода jQuery.

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

$(document).ready(function() {
  // do stuff when DOM is ready
});

См. Различные типы документов, готовые помочь с этим. Это может помочь избежать конфликтов с другими средами jQuery.

Внутри html событий

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

Другое преимущество: используя jQuery для прикрепления событий (а не разметки HTML), вы никогда не увидите все эти сообщения «javascript: void ()» в строке состояния при наведении курсора на ссылку.

Например, создание события щелчка в jQuery: 

 $(document).ready(function() {
     $("a").click(function() {
         alert("Hello world!");
     });
 });

Это то же самое, что поместить его в HTML-код: 

 Link

Сфера

Функции jQuery должны находиться в области видимости: 

 $(document).ready(function() {update();});

function update() { 
    $("#board").append(".");
    setTimeout(update, 1000);
}

или 

 $(document).ready(function() {update();});

function update() { 
  $("#board").append(".");
  setTimeout('update()', 1000);
}

Второй работает, потому что update () внутри блока кода теперь находится в области видимости.

37
Share: