Что является ловушками выполнения jQuery без $ (документ) .ready ();?

Используйте getRandomColor() вместо "#0000FF":

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}



function setRandomColor() {
  $("#colorpad").css("background-color", getRandomColor());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colorpad" style="width:300px;height:300px;background-color:#000">

</div>
<button onclick="setRandomColor()">Random Color</button>
5
задан Larsenal 25 June 2009 в 17:54
поделиться

8 ответов

Ваши селекторы jQuery будут случайным образом пропускать любые элементы, потому что они еще не загружены (браузером).

8
ответ дан 18 December 2019 в 13:18
поделиться

$ (document) .ready () - это способ jQuery убедиться, что код, который вы хотите запустить при загрузке страницы, одновременно запускается в разных браузерах.

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

3
ответ дан 18 December 2019 в 13:18
поделиться

Это первое, что нужно узнать о jQuery: если вы хотите, чтобы событие работало на вашей странице, вы должны вызвать его внутри функции $ (document) .ready (). Все внутри нее загрузится, как только будет загружена модель DOM и до того, как будет загружено содержимое страницы.

 $(document).ready(function() {
   // put all your jQuery goodness in here.
 });

Функция $ (document) .ready () имеет массу преимуществ перед другими способами заставить события работать. Прежде всего, вам не нужно добавлять в HTML какую-либо «поведенческую» разметку. Вы можете разделить весь свой JavaScript / jQuery в отдельный файл, где его легче обслуживать и где он не мешает содержанию. Мне никогда не нравилось видеть все эти сообщения «javascript: void ()» в строке состояния, когда я наводил курсор на ссылку. Вот что происходит, когда вы прикрепляете событие непосредственно внутри тега.

На некоторых страницах, использующих традиционный JavaScript, вы увидите в теге атрибут «onload». Проблема в том, что он ограничен только одной функцией. Ах да, и он снова добавляет к контенту «поведенческую» разметку. Прекрасная книга Джереми Кейта «Сценарии DOM» показала мне, как создать функцию addLoadEvent для отдельного файла JavaScript, который позволяет загружать в него несколько функций. Но для чего-то, что должно быть довольно простым, требуется изрядное количество кода. Кроме того, он запускает эти события при загрузке окна, что приводит меня к другому преимуществу $ (document) .ready ().

С помощью $ (document) .ready () вы можете заставить свои события загружаться или запускаться или все, что вы хотите, чтобы они делали до загрузки окна.

2
ответ дан 18 December 2019 в 13:18
поделиться

Когда вы выбираете элементы в DOM, они иногда будут работать, а иногда и нет.

Это просто зависит от того, загружены они или нет.

Однако, если вы добавляете скрипт в самый конец документа, в общем все будет нормально. (Поскольку к этому моменту он должен был загрузить все).

1
ответ дан 18 December 2019 в 13:18
поделиться

Обычно используйте это основное правило:

, если ваш код включает DOM, оберните ваш код в $ (document) .ready (). Если он не связан с DOM, не помещайте его в $ (document) .ready ()

1
ответ дан 18 December 2019 в 13:18
поделиться

Параметры в ваших маршрутах {roleId} , {applicationName} и {roleName} не соответствуют параметру имена в ваших методах действий. Не знаю, имеет ли это значение, но из-за этого становится сложнее понять, в чем заключаются ваши намерения.

Соответствует ли ваш itemId шаблону, который можно сопоставить с помощью регулярного выражения? Если да, то вы можете добавить ограничение к своему маршруту, чтобы только URL-адреса, соответствующие шаблону, определялись как содержащие itemId.

Если ваш itemId содержал только цифры, то это сработало бы:

routes.MapRoute("AssignRemove",
                "Items/{action}/{itemId}",
                new { controller = "Items" },
                new { itemId = "\d+" }
                );

Изменить: вы также можете добавьте ограничение к маршруту AssignRemovePretty , чтобы потребовались и {parentName} , и {itemName} .

Изменить 2: Кроме того, с момента вашего первого действия просто перенаправляет на ваше второе действие,

0
ответ дан 18 December 2019 в 13:18
поделиться

Есть две основные причины для использования

$(document).ready (function ()) // or $(function ())

1) Это гарантирует, что код внутри будет запущен только после полной загрузки DOM (это не включает загрузка изображений, флеш-памяти или других ресурсов, просто DOM, созданного из HTML). Это означает, что вы можете поместить javascript в любом месте HTML, а не внизу (что с ванильным javascript - единственное место, где вы можете разместить его, чтобы гарантировать, что он будет работать во всем DOM, а не на том, что в настоящее время загружено). Если вы не используете событие window.onload, которое также гарантирует это, но может использоваться только один раз. Это подводит меня ко второму пункту:

2) Это позволяет запускать несколько функций после загрузки страницы, а не одноразовое использование window.onload, которое у вас есть при использовании ванильного javascript. Это здорово, потому что это означает, что вам не нужно а) писать свою собственную функцию, чтобы позаботиться о ней, б) беспокоиться о проверке, есть ли уже функция загрузки из другой библиотеки, в) тратить годы на отладку только чтобы узнать, что ваш window.onload был перезаписан чужим кодом.

Бонус: 3) Выглядит круто, не так ли? : P

Другие примечания: Если вы не используете или не манипулируете DOM, ваш код не должен находиться внутри функции $ (document) .ready ().

Помещение файлов javascript в конец html непосредственно перед даст ощутимое увеличение скорости загрузки - на самом деле это не быстрее, но браузер загрузит JS после HTML, поэтому может начать рендеринг HTML во время загрузки JS. Это, в свою очередь, означает, что что-то появится у пользователя

1
ответ дан 18 December 2019 в 13:18
поделиться

Когда сценарий будет выполняться от браузера к браузеру, от страницы к странице, это будет непредсказуемо.

-2
ответ дан 18 December 2019 в 13:18
поделиться
Другие вопросы по тегам:

Похожие вопросы: