Javascript Jquery代码放置在head标记中时不工作_Javascript_Jquery

Javascript Jquery代码放置在head标记中时不工作

javascript jquery

Javascript Jquery代码放置在head标记中时不工作,javascript,jquery,Javascript,Jquery,我有一些jquery代码，当放在head标记中时不起作用，但放在body标记之后时起作用。即使它在document.ready中，它也无法工作这是我的密码： $(document).ready(function() { for (i = 1950; i <= new Date().getFullYear(); i++) { $('#from').append($('<option />').val(i).html(i)); $('#to

我有一些jquery代码，当放在head标记中时不起作用，但放在body标记之后时起作用。即使它在document.ready中，它也无法工作

这是我的密码：

$(document).ready(function() {
    for (i = 1950; i <= new Date().getFullYear(); i++) {
        $('#from').append($('<option />').val(i).html(i));
        $('#to').append($('<option />').val(i).html(i));
    }
})

这是我的结构

 < head>

     <script type="text/javascript" src="scripts/jquery/js/jquery-1.4.2.min.js"></script>

   <script type="text/javascript" src="scripts/jquery/js/jquery-ui-1.8.17.custom.min.js"></script>

    <script type="text/javascript" src="/easyoffice/js/excelExport.js"></script>
     <script type="text/javascript" src="/easyoffice/js/tinytable.js"></script>

   <script type="text/javascript">
$(document).ready(function() {
    for (i = 1950; i <= new Date().getFullYear(); i++) {
        $('#from').append($('<option />').val(i).html(i));
        $('#to').append($('<option />').val(i).html(i));

    }

})
      function checkyear() {
    var from = $('select[id=to]').val();
    var to = $('select[id=from]').val();
    if (from == 'Select' || to == 'Select') {
        alert(" Please Select an Year  ")
        return false;
    } else if (from <= to) {

        alert(" Please Select an Year greater than From Year ")
        $("select#to").prop('selectedIndex', 0);

        return false;
    } else {
        return true;
    }
}

   </script>
   </head>

请检查您在head标记中添加yout jquery文件的位置的顺序？应该是

<script src="your_jquery_library_file.js" type="text/javascript"></script>
//Then
<script type="text/javascript">
   $(document).ready(function() {
          for (i = 1950; i <= new Date().getFullYear(); i++) {
        $('#from').append($('<option />').val(i).html(i));
        $('#to').append($('<option />').val(i).html(i));

        }
      })
</script>

请检查您在head标记中添加yout jquery文件的位置的顺序？应该是

<script src="your_jquery_library_file.js" type="text/javascript"></script>
//Then
<script type="text/javascript">
   $(document).ready(function() {
          for (i = 1950; i <= new Date().getFullYear(); i++) {
        $('#from').append($('<option />').val(i).html(i));
        $('#to').append($('<option />').val(i).html(i));

        }
      })
</script>

$document.ready只是确保在加载javascript之前加载所有DOM元素

没关系的时候

在不等待触发此事件的情况下，您可能会最终操纵页面上尚未存在的DOM元素或样式。DOM就绪事件还允许您更灵活地在页面的不同部分上运行脚本。例如：

    <div id="map"></div>
    <script type="text/javascript">
     document.getElementById('map').style.opacity = 0;
    </script>

将运行，因为在脚本运行之前已加载映射div。事实上，通过将脚本放在页面底部，可以获得相当好的性能改进

重要的时候

但是，如果在元素中加载脚本，则大部分DOM都没有加载。此示例不起作用：

    <script type="text/javascript">
    document.getElementById('map').style.opacity = 0;
    </script>
    <div id="map"></div>

不会，因为映射div尚未加载

这完全取决于代码的某些部分何时执行。

如果它们在标题中，那么它们试图访问的元素可能/将*不存在。