JavaScript代码放在哪里？

浏览器在渲染HTML页面时，是从头到尾，一行一行地检查执行的。如果JavaScript代码在前面，HTML元素在后面，遇到JavaScript选择一个还未渲染的HTML元素将会选择失败。因此，通常的做法是将脚本放在页面最后（紧跟在</body>标签之前）。

ready()事件

如果将JavaScript代码分和HTML离出来，脚本又在<head></head>之间引入，会不会出问题？

要避免上述问题，可以使用ready()事件。

jQuery的ready()事件通常在DOMContentLoaded事件加载后执行。因此可以保证JavaScript代码被执行。

ready()事件写法：

1
2
3
$(document).ready(function(){
   // 要被执行的JavaScript代码
});

这样写，可以保证要被执行的JavaScript被执行，不管这些要被执行的JavaScript代码放在页面的哪个地方。

示例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>ready()使外置JS代码正常运行</title>

    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>

    <script src="dh.js"></script>

    <style>

        li{

            max-width: 200px;

            background-color: #6cc0ac;

            color: #fff;

        }

    </style>

</head>

<body>

<div>

    <ul id="ul">

        <li id="a">鼠标</li>

        <li id="b">键盘</li>

        <li id="c">屏幕</li>

        <li id="d"><a>主机</a></li>

    </ul>

</div>

<script>

    $(document).ready(function () {

        // 要被执行的JavaScript代码

        dh();

    });

</script>

</body>

</html>

　　

ready()事件简写

jQuery还提供了ready()事件的简写方式：

1
2
3
$(function () {
    // 要被执行的JavaScript代码
});

ready()事件;使外置JS代码正常运行的更多相关文章

  1. 如何快速找出网页中事件对应的js代码片段

    后端人员也免不了要处理一些前端的事情,由于代码不是自己写的,所以不好找到相关的代码. 比如在表单提交时,前端提交的数据不正确,这时候你可能会想在谷歌浏览器里添加一个鼠标 点击事件的断点. 然而查看js ...

  2. 如何查找元素对应事件的js代码，检测定位js事件

    比如一张图片当鼠标放到上面时,图片改变.想找到这个事件对应的js代码,假设另存为html之后,文件夹中有.js文件. 如果你会调试,可以用打开浏览器的调试功能,以chrome为例,按F12打开调试窗口 ...

  3. 网页调试js时，如何知道某个事件对应哪段js代码？

    有时候我们需要知道某个事件对应的js代码,比如点击一个div元素时,出现下拉框,我想知道这个功能对应的js代码,那就可以按下图操作: 勾选click事件,重新运行,那么就会在每个click事件那里设置 ...

  4. js便签笔记（6）——jQuery中的ready()事件为何需要那么多代码？

    前言: ready()事件的应用,是大家再熟悉不过的了,学jQuery的第一步,最最常见的代码: jQuery(document).ready(function () { }); jQuery(fun ...

  5. js 如何判断鼠标点击事件还是js代码调用

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. JQuery - 动态添加Html后，如何使CSS生效，JS代码可用？

    今天在开发JQuery Mobile程序时候,需要从服务器取得数据,随后显示在页面上的Listview控件中,数据完整获取到了,也动态添加到Listview控件中,但是数据对应的CSS没有任何效果了, ...

  7. js封装的三级联动菜单(使用时只需要一行js代码)

    前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...

  8. JS代码的位置与事件响应代码块的封装问题

    JS代码的位置       我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分.   放在<head>部分最常用的方式是在页面中h ...

  9. onload事件与ready事件的区别，原生js与jquery的区别

    onload事件与ready事件分别是原生js与jquery的入口函数 原生js入口函数写法: window.onload=function(){ } jquery入口函数写法: $(document ...

随机推荐

  1. 2017-2018-2 20165221实验二《Java面向对象程序设计》实验报告

    JAVA实验二报告 课程:Java程序设计 姓名:谭笑 学号:20165221 实验时间:2018.4.13--2018.4.15 实验2--1 实验内容 实现百分制成绩转成"优.良.中.及 ...

  2. 第五节，损失函数：MSE和交叉熵

    损失函数用于描述模型预测值与真实值的差距大小,一般有两种比较常见的算法——均值平方差(MSE)和交叉熵. 1.均值平方差(MSE):指参数估计值与参数真实值之差平方的期望值. 在神经网络计算时,预测值 ...

  3. Python换行符问题：\r\n还是\n？

    今天写一个Python脚本去读取一个txt文件时,发现一个很有趣的现象: 如果这个文件是用atom编辑器写的,发现换行符是'\r'.这样一来去逐行读取数据就失效了,因为用open函数 去打开该文件re ...

  4. linux 用户空间获得纳秒级时间ns【转】

    转自:https://www.cnblogs.com/kekukele/p/3662816.html 一.引言 我们在测试程序的性能的时候往往需要获得ns级的精确时间去衡量一个程序的性能,下面介绍下l ...

  5. shell文本左右对齐排版【转】

    文本左右对齐排版 有文本4.txt如下: 111111111111111111111 98912 张三 222222222222222222 150020 李四四 333333333333333333 ...

  6. VC使一个对话框不显示

    //add  this void CbkDlg::OnNcPaint() {     ShowWindow(SW_HIDE);     CDialog::OnNcPaint(); }     初始化时 ...

  7. boost.lexical_cast 学习

    1,字符串 到 数值类型的转换 2,数值 到 字符串的转换 3,异常处理情况 4,boost::lexical_cast 的原型: template<typename Target, typen ...

  8. Linux下编写和加载 .ko 文件（驱动模块文件）

    一..ko 文件介绍 .ko文件是kernel object文件(内核模块),该文件的意义就是把内核的一些功能移动到内核外边, 需要的时候插入内核,不需要时卸载. 二.优点 (1)这样可以缩小内核体积 ...

  9. softmax详解

    原文地址:https://blog.csdn.net/bitcarmanlee/article/details/82320853 1.softmax初探 在机器学习尤其是深度学习中,softmax是个 ...

  10. 解决“错误 D8016 “/ZI”和“/Gy-”命令行选项不兼容 ”问题

    在Visual Studio 2017中调试VC++6.0代码,出现该问题,解决方案如下:(1)[项目]—>[属性]—>[C/C++]—> [常规]—>[调试信息格式]—> ...