Fatal编程技术网
  • javascript/
  • Javascript JS&；jQuery可以'；t检测html元素，并说'；它们是未定义的

Javascript JS&；jQuery可以'；t检测html元素，并说'；它们是未定义的

javascript jquery

Javascript JS&；jQuery可以'；t检测html元素，并说'；它们是未定义的,javascript,jquery,Javascript,Jquery,我对JS和jQuery非常陌生，我正在尝试使用它们制作字幕播放器。不幸的是，我还停留在一个非常早期的阶段 当我试图通过.js文件选择一些HTML元素时，它的行为就像找不到我要的元素一样，什么也没有发生。如果我试图提醒元素的值或HTML，它会提醒undefined 这就是代码： HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <s

我对JS和jQuery非常陌生，我正在尝试使用它们制作字幕播放器。不幸的是，我还停留在一个非常早期的阶段

当我试图通过.js文件选择一些
HTML
元素时，它的行为就像找不到我要的元素一样，什么也没有发生。如果我试图提醒元素的值或HTML，它会提醒
undefined

这就是代码：

HTML

  <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="jquery-2.1.3.min.js"></script>
        <script src="script.js"></script>
        <style type="text/css">
            body{
                margin: 0px;
                padding: 0px;           
            }           
            #wrapper{
                width: 150px;
                text-align: center;
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#75bdd1), color-stop(14%,#75bdd1), color-stop(100%,#2294b3));
                padding: 10px 2px;
            }
            h3{
                font-family: Arial, Helvetica, sans-serif;
            }
            img{
                width: 50px;
                margin: 0 auto;     
            }
            input{
            display: none;          
            }
        </style>


    </head>
    <body>
        <div id="wrapper">
            <h3>Select subtitles file</h3>
                <img src="browse.png" alt="browse">
        </div>
        <input type="file" accept=".srt" id="file">
    </body>
</html>
谢谢。

因为您的
脚本
标记位于定义其作用的元素的HTML之上，所以它找不到它们，因为它们在代码运行时不存在。以下是页面中发生事情的顺序：

  • 创建
    html
    和
    head
    元素
  • 将创建
    meta
    元素，并由解析器记录其内容
  • jQuery的
    脚本
    元素被创建
  • 解析器停止并等待jQuery文件加载
  • 加载后，将执行jQuery文件
  • 继续分析
  • 将创建代码的
    脚本
    元素
  • 解析器停止并等待加载文件
  • 加载后，脚本代码将运行，并且找不到任何元素，因为还没有
    div
    元素
  • 继续分析
  • 浏览器完成对页面的解析和构建，包括在脚本中创建要访问的元素
    • 纠正方法：

  • 将
    脚本
    元素移到末尾，就在关闭
    标记之前，这样所有元素都会在代码运行之前存在。除非有充分的理由不这样做，否则这通常是最好的解决方案

  • 使用jQuery的

  • 在script元素上使用，但要注意，并非所有浏览器都支持它

    • 但同样，如果您控制脚本元素的位置，通常最好选择1。

    您应该在DOM就绪事件之后执行脚本。在jquery中，它这样做：

    $(function(){
    $("div").click(function () {
            console.log('loaded');
    })
});
    调用.click（）方法时，dom未完全加载。 您必须等待DOM中的所有内容加载完毕。因此，您必须将script.js更改为：

    $(document).ready(function(){
$("div").click(function () {
    console.log('loaded');
});
});

    $（文档）。在（'click'，element'，function（ev）{
console.log（'loaded'）；

    })
    将整个脚本放在$（document）.ready（function（）{}）下；blockYou是在DOM中的元素可用之前绑定事件。@或者Navo您试图在初始化DOM元素或变量之前访问它，请转到此处，好的，这确实帮助了我解决问题并理解了过程，非常感谢！最后，我的MSO问题有一个很好的答案： 
    $(document).ready(function(){
$("div").click(function () {
    console.log('loaded');
});
});