jquery元素选择代码放在head里无效的问题

最新推荐文章于 2023-06-09 17:40:08 发布

最终变量

最新推荐文章于 2023-06-09 17:40:08 发布

阅读量1.3k

点赞数 1

分类专栏： jquery 文章标签： jquery web前端

本文链接：https://blog.csdn.net/cc1969281777/article/details/81387970

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $("input#btn1").click(function(){
            alert("点击了按钮");
        })
    </script>
</head>
<body>
<input type="button" id="btn1" value="按钮"/>
</body>
</html>

如上代码，发现点击按钮却不会弹框，于是在网上查找了资料，发现了原因。

一个网页（.html）,是从上到下加载的，如果<script>标签对放在<body>标签对前面，当加载到<script>标签对里面的代码时，<body>标签对里的内容还未加载，$("input#btn1")就不能找到其对应的元素。

解决方法：

方法一

将<script>标签对放在<body>标签对后面。

方法二

将代码写到$(document).ready(function)里面，将函数绑定到文档的就绪事件（当文档完成加载时）。

如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("input#btn1").click(function(){
                alert("点击了按钮");
            })
        })
    </script>
</head>
<body>
<input type="button" id="btn1" value="按钮"/>
</body>
</html>

这样的话，$("input#btn1")就能找到其对应的元素，因为写到$(document).ready(function)里面的代码，会在整个网页加载完毕后才会执行。比如这个例子，就能弹框了。