Вот моя проблема: как гласит название, jQuery работает только тогда, когда я помещаю скрипты в нижнюю часть тега body. Когда я кладу их в голову, они не работают. Я использую только некоторые простые сценарии jQuery
Это мой <head> :
<head> <title>P site</title> <link rel='stylesheet' href='style.css'/> <link rel='stylesheet' type='text/css' href='jquery/css/ui-lightness/jquery-ui-1.10.4.css'/> <link rel='stylesheet' type='text/css' href='jquery/time/jquery.ui.timepicker.css'/> <style type="text/css"> <!-- .pagNumActive { color: #000; border:#060 1px solid; background-color: #D2FFD2; padding-left:3px; padding-right:3px; } .paginationNumbers a:link { color: #000; text-decoration: none; border:#999 1px solid; background-color:#F0F0F0; padding-left:3px; padding-right:3px; } .paginationNumbers a:visited { color: #000; text-decoration: none; border:#999 1px solid; background-color:#F0F0F0; padding-left:3px; padding-right:3px; } .paginationNumbers a:hover { color: #000; text-decoration: none; border:#060 1px solid; background-color: #D2FFD2; padding-left:3px; padding-right:3px; } .paginationNumbers a:active { color: #000; text-decoration: none; border:#999 1px solid; background-color:#F0F0F0; padding-left:3px; padding-right:3px; } --> </style> <?php require 'connect.inc.php'; require 'function.php'; ?>
<body> имеет более 500 строк, поэтому я просто покажу вам, как jQuery загружается очень близко:
<script type='text/javascript' src='jquery/js/jquery-1.10.2.js'></script> <script type='text/javascript' src='jquery/js/jquery-ui-1.10.4.js'></script> <script type='text/javascript' src='jquery/time/jquery.ui.timepicker.js'></script> <script type='text/javascript' src='jquery/js/ui.js'></script>
Где проблема, почему я не могу загрузить их в <head> ?
Способ работы jQuery или JavaScript в том, что он обнаруживает элементы или связывает события в момент вызова самого сценария. Когда документ загружается сверху вниз, размещение jQuery внизу гарантирует, что ваш DOM загружен первым, перед выполнением JS. С другой стороны, вы можете разместить jQuery сверху, используя такую технику, как:
$(document).ready(function() { console.log('jQuery is now ready to be executed!'); // Place jQuery code here... });
Это в основном говорит jQuery, подождите, пока DOM загрузится, прежде чем действовать на него.
Источник: http://api.jquery.com/ready/
Я не думаю, что ваша проблема заключается в том, где загрузить jquery, как его использовать, например, положить jquery в голову и попробовать следующее:
$(document).ready(function(){ alert('document is fully loaded and jquery can access all elements now !'); })
если он работает, когда код находится ниже тела, это то, что элементы уже загружены, я не знаю, разместил ли вы свой код внутри функции jQuery.
пример:
$( document ).ready(function() { $( "p" ).text( "The DOM is now loaded and can be manipulated." ); });
источник: http://api.jquery.com/ready/
Спасибо, ребята, я нашел решение для своей проблемы, вы, ребята, действительно классные .. Если у кого-то такая же проблема, вот что я делаю, и это работает …
Как @Jaimil Prajapati, @Damen Salvatore и @coder_ck сказали, что мне просто нужно поместить мой код jquery внутри документа, готового к работе. Вот что я поставил в голову, и теперь он работает 🙂
<head> <script type='text/javascript' src='jquery/js/jquery-1.10.2.js'></script> <script type='text/javascript' src='jquery/js/jquery-ui-1.10.4.js'></script> <script type='text/javascript' src='jquery/time/jquery.ui.timepicker.js'></script> <script> $(document).ready(function() { console.log('jQuery is now ready to be executed!'); $('#date').datepicker({ dateFormat: 'dd/mm/yy'}); $('#time').timepicker(); $(function() { $( document ).tooltip(); }); }); </script> </head>