放在head标签中的jQuery代码不起作用

Question

我有一些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>

Answer 1

请检查在head标签中添加了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>

Answer 2

$（document）.ready（）只是确保在加载JavaScript之前先加载所有DOM元素。

没关系的时候

在不等待此事件触发的情况下，您可能最终要处理页面上尚不存在的DOM元素或样式。 DOM ready事件还使您可以更加灵活地在页面的不同部分上运行脚本。 例如：

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

将运行，因为在脚本运行之前已加载了map div。 实际上，通过将脚本放在页面底部，您可以获得一些相当不错的性能改进。

什么时候重要

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

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

不会，因为尚未加载map div。

这完全取决于代码的某些部分何时执行。 如果它们在标题中，则它们尝试访问的元素可能/将*不存在。

Answer 3

我找出了问题所在。 我将ready函数放在<body>标记之后，现在可以正常使用了。

放在head标签中的jQuery代码不起作用

问题描述

3 个解决方案

解决方案1
4 2016-08-22 07:01:55

解决方案2
0 2016-08-22 07:35:12

解决方案3
0 已采纳 2016-11-10 05:41:25

放在head标签中的jQuery代码不起作用

问题描述

3 个解决方案

解决方案1 4 2016-08-22 07:01:55

解决方案2 0 2016-08-22 07:35:12

解决方案3 0 已采纳 2016-11-10 05:41:25

解决方案1
4 2016-08-22 07:01:55

解决方案2
0 2016-08-22 07:35:12

解决方案3
0 已采纳 2016-11-10 05:41:25