关于jQuery代码未执行的一种原因

码龄3年审核中

已于 2023-11-02 09:05:09 修改

阅读量641

点赞数

文章标签： jquery 前端 javascript

于 2023-10-31 08:51:25 首次发布

本文链接：https://blog.csdn.net/m0_47505062/article/details/134132002

版权

本文解释了初学者在使用jQuery时可能遇到的问题，即代码必须位于HTML的标签内且在其作用的元素下方。若将代码置于上方，需用`$(document).ready`确保DOM加载完毕。文中给出了两个示例，演示如何在不同事件中处理DOM元素。

摘要由CSDN通过智能技术生成

初学jQuery的同学，很可能会遇到明明是照着代码抄的，为何却没执行，
很有可能的是忽略了，jQuery的代码和HTML中的标签要放在同一个地方（body标签中），并且jQuery代码要放到其作用的HTML代码下方，这是因为浏览器在解析代码时是一行一行地往下执行的，所以，jQuery代码一定要在其修饰的HTML代码下方才能正确被执行。如果JavaScript代码下方的按钮还没有被加载，那么$（‘#btn’）就没有办法获取对应的按钮对象，既然如此，还怎么给它添加单击事件呢？结果肯定是不行的。
比如，<body> 中我有一个按钮，其id=“btn”,
那么，关于这个按钮的jQuery代码也要放在这个按钮的附近，至少要也放在<body>中，才能让jQuery的代码正确执行。
代码如下：

<body>
    <input id="btn" type="button" value="click me">
    <script>$("#btn").click(function(){alert('you are so strong')});</script>
</body>

October31th2023Tuesday

继续补充：
如果，硬要把jQuery代码放到HTML代码的上方，也不是不行，只需要写一个DOM加载完毕后的监听函数就可了，$(document.ready方法可以接收一个东西，但会等页面上所有的DOM资源（不包括图片这种占用带宽的资源）全部加载完毕后，再使用这个东西。这样就不用考虑jQuery代码执行的时候某个HTML元素还没有被加载的情况了。

还有一点需注意的是 $(document).ready只接收和响应一个东西，所以如果你有多个需要做的事情的 jQuery代码，不需要考虑 jQuery代码执行的时候某个HTML元素还没有被加载的情况，那么你就需要写多个 $(document).ready 来接收多个需要做的事情的 jQuery代码，即，一个事件给一个 $(document).ready去处理，多个事件分给多个 $(document).ready去处理。
如下：

 
事件一：
$(document).ready(function(){
$("#btn").click(function(){
alert('you are so strong');});});
对一个HTML页面按钮，设置其点击事件弹出一个对话框，
内容是：你好强。

事件二：
    $(document).ready(function(){
        var ul=$("ul");
    var lis=ul.find("li");
    var li=lis.eq(2);
    alert(li.text());
    // alert("hello");
    });
    对一个列表的元素进行提取并在弹出对话框显示其内容。