jQuery 在 HTML 文件中不起作用答案

【问题标题】：jQuery not working in HTML filejQuery 在 HTML 文件中不起作用
【发布时间】：2017-02-24 15:33:19
【问题描述】：

我尝试了多种导入 jQuery 的变体，但没有任何效果。当我运行它时，正文中的所有内容都会显示出来，但 jQuery 函数不起作用。这是我当前的代码：

<!DOCTYPE html>
<html>
<head>

<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type='text/javascript'>

    $(window).load(function(){
        $('select').on('change',function(){
            var value=$(this).val();
            var output='';
            for(var i=1;i<=value;i++)
            {
                output+='<div>Your Text</div>';   
            }
            $('#test').empty().append(output);
        });
    }); 

</script>

</head>

<body>
    <select>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="10">10</option>
    </select>

    <span id="test">
    </span>
</body>

</html>

我能做些什么来解决它？

以下是我在控制台中遇到的错误：

资源来自 “https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.mi%C3%A2%E2%82%AC%C5%92%C3%A2%E2%82%AC%E2%80%B9n.js” 由于 MIME 类型不匹配而被阻止（X-Content-Type-Options：不闻）。 testy.html

ReferenceError: $ 未定义[了解更多]

未声明 HTML 文档的字符编码。这在某些浏览器配置中，文档将呈现乱码如果文档包含 US-ASCII 范围之外的字符。页面的字符编码必须在文档中声明或在传输协议中。

【问题讨论】：

对我来说很好jsfiddle.net/e6u5w8ag。您在控制台中遇到什么错误？
也使用绝对 URL，有时某些浏览器会阻止来自不受信任来源的内容，请使用：https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
OP在做$(window).load()，不用担心JS的位置
打开浏览器的开发人员工具（Chrome 和 FF 中的 F12）并转到控制台选项卡并重新加载您的页面。然后看看它显示了什么错误。
@borkborkbork 您是否使用任何网络服务器来获取文件？似乎 jQuery 正在使用 file:// 协议加载

标签： javascript jquery html

【解决方案1】：

执行以下步骤：-

复制jquery库代码（https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js）代码，并在当前工作目录（jquery.min.js）中同名保存：-

现在使用这个代码：-

<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta content="utf-8" http-equiv="encoding"><!-- this is for removing character encoding error--> 

        <script type='text/javascript' src="jquery.min.js"></script><!-- see the change here -->
    </head>
    <body>
    <select>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="10">10</option>
    </select>
    <span id="test">
    </span>
</body>
</html>
<script type = "text/javascript">
    $(document).ready(function(){
        $('select').on('change',function(){
            var value=$(this).val();
            var output='';
            for(var i=1;i<=value;i++)
            {
                output+='<div>Your Text</div>';   
            }
            $('#test').html(output); //html will do everything(removing and then adding)
        });
    }); 
</script>

注意：- 你可以这样尝试一次：-

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

【讨论】：

刚刚尝试过，这就是我的解决方案！我只需要在本地下载 jQuery 库