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

比眉伴天荒 2022-05-17 00:17 156阅读 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)里面的代码，会在整个网页加载完毕后才会执行。比如这个例子，就能弹框了。

![70][]

[70]: /images/20220517/a650ef7b4178488da1a616ffcccf78ca.png

发表评论取消回复

表情：

评论列表（有 0 条评论，156人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery的元素选择器

标签元素选择器（element）指向 DOM 节点的标签名,根据给定的元素名匹配所有元素。示例描述: 查找一个 DIV 元素。 HTML 代码: <d

朴灿烈づ我的快乐病毒、/ 2023年06月14日 10:54/ 0 赞/ 17 阅读

相关 Jquery选择兄弟元素

如何不使用css选择器，使用JQuery选择目标元素。 HTML 代码: <div></div><div></div><div></div><div></d

╰+哭是因爲堅強的太久メ/ 2022年08月20日 15:15/ 0 赞/ 248 阅读

相关 jquery选择多个元素

<!DOCTYPE html> <html> <head> <title>sele1,sele2,seleN选择器</title>

本是古典何须时尚/ 2022年08月11日 19:58/ 0 赞/ 243 阅读

相关转--js代码放在head还是body里面

在HTML body部分中的JavaScripts会在页面加载的时候被执行。在HTML head部分中的JavaScripts会在被调用的时候才执行。一、区

淡淡的烟草味﹌/ 2022年07月16日 03:53/ 0 赞/ 325 阅读

相关 javascript放在head和body的区别

JavaScript脚本放在哪里在HTML body部分中的JavaScripts会在页面加载的时候被执行。在HTML head部分中的JavaScripts会在被

心已赠人/ 2022年06月16日 08:21/ 0 赞/ 170 阅读

相关 jquery 选择元素

理解DOM DOM(Document Object Model) ，它是JavaScript与网页之间的接口，通俗来讲DOM就是提供给JavaScript来修改页面上

迷南。/ 2022年05月28日 13:52/ 0 赞/ 298 阅读

相关 JS放在head和放在body中的区别

JS放在head和放在body中的区别在HTML body部分中的JavaScripts会在页面加载的时候被执行。在HTML head部分中的JavaScrip

﹏ヽ暗。殇╰゛Y/ 2022年05月28日 04:59/ 0 赞/ 242 阅读

相关 jQuery选择器获取元素

1、遍历tr中所有td中的内容 // 遍历 tr $('tab tr').each(function(i){

柔光的暖阳◎/ 2022年05月24日 09:11/ 0 赞/ 276 阅读

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

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

比眉伴天荒/ 2022年05月17日 00:17/ 0 赞/ 157 阅读

相关 jQuery 兄弟元素选择器

本篇文章介绍jQuery的兄弟元素选择器什么是兄弟元素？ <ul id="list"> <li class="li-1">web-7258</li

小鱼儿/ 2022年05月12日 12:26/ 0 赞/ 298 阅读