实现在HTML页面加载完毕后运行js方法

本文主要和大家分享实现在HTML页面加载完毕后运行js方法,主要以代码的方法和大家分享,希望能帮助到大家。

Js方法:

window.onload=function (){    var userName=”xiaoming”;    alert(userName);}

jQuery方法,需要引用jQuery文件:

$(document).ready(function (){    var userName=”xiaoming”;    alert(userName);});

或者其简写:

$(function (){var userName=”xiaoming”;alert(userName);});

在DOM加载完就可以执行(比window.onload更早)。在同一页面中可以多次出现.ready()

两者主要区别:Window.onload=function (){}:

当一个文档完全下载到浏览器中时,才会触发window.onload事件。这意味着页面上的全部元素对js而言都是可以操作的,也就是说页面上的所有元素加载完毕才会执行。这种情况对编写功能性代码非常有利,因为无需考虑加载的次序。

$(document).ready(function (){});

会在DOM完全就绪并可以使用时调用。虽然这也意味着所有元素对脚本而言是可以访问的,但是,并不意味着所有关联的文件都已经下载完毕。换句话说,当HTML下载完成并解析为DOM树之后,代码就会执行。

使用$(document).ready(function (){})一般来说都要优于使用onload事件处理程序,但必须要明确一点,因为支持文件可能还没有加载完成,所以类似图像的高度和宽度这样的属性此时不一定有效。

注:用把js放在页面底部的方法以及运用defer=”defer”的方法都是会出现问题的。最好使用$(document).ready(function (){})函数。

相关推荐:

HTML页面加载速度加快的介绍

以上就是实现在HTML页面加载完毕后运行js方法的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1545998.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 17:44:50
下一篇 2025年12月21日 17:44:54

相关推荐

  • HTML代码实现简易购物车

    网上关于购物车实现的代码非常多,本次的这篇文章主要是和大家分享了HTML代码实现简易购物车,有需要的小伙伴可以看一下,接下来讲解一下具体的实现。 1、用html实现内容; 2、用css修饰外观; 3、用js(jq)设计动效。   第一步:首先是进行html页面的设计,我用一个大的p将所有商品包含,然…

    2025年12月21日
    000
  • 实例详解HTML如何实现文件间自由切换

    本次的这篇文章主要是和大家分享了实例详解HTML如何实现文件间自由切换,有需要的小伙伴可以看一下。 代码很简单(大道至简嘛)。 先创建一个文件,文件名嘛随便,第二个文件名就不能随便了,因为到时候要调用第二个文件。 建好第一个文件后,用记事本打开文件加代码↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓(记得改文件后…

    2025年12月21日
    000
  • webpack对html文件的处理

    本篇文章给大家分享的是关于webpack对html文件的处理 ,步骤都很详细,有需要的朋友可以参考一下 为什么去处理html文件 我们所有的方法都打包到了dist的文件夹下面,而我们的html是在自己定义的文件夹下面,如果自己手动再去一个一个src引入这些dist文件夹下的js,那么也有些太不靠谱了…

    2025年12月21日 好文分享
    000
  • html的基础 理论

    本篇文章给大家分享的是关于html基础 理论知识,内容很不错,有感兴趣的朋友可以看一下 HTML 语义化 HTML标签的语义化是指:通过使用包含语义的标签(如h1-h6)恰当地表示文档结构 css命名的语义化是指:为html标签添加有意义的class 为什么需要语义化: 立即学习“前端免费学习笔记(…

    好文分享 2025年12月21日
    000
  • 关于html、js的一些用法小技巧

    本篇文章给大家分享的内容是关于html、js的一些用法小技巧,有着一定的参考价值,有需要的朋友可以参考一下 一、Form实现Ajax提交表单 function xxx() { var opts = { url : ‘/xxx.do’, type : ‘post’, dataType : ‘json’…

    好文分享 2025年12月21日
    000
  • HTML调用PHP

    html本身是无法处理动态请求,要完成这个,一般是用javascript。在生成静态网页,可以根据数据库id给html页面生成一个相对应的javascript文件引用。比如页面是123.html,那就在这个页面生成一个。 然后在click.php这个页面就按照php的语法去处理操作数据库就行。 静态…

    好文分享 2025年12月21日
    000
  • HTML如何将网页设计自动适应屏幕宽度

    今天本文主要和大家谈谈HTML如何将网页设计自动适应屏幕宽度 ,需要的朋友可以参考下,希望能帮助到大家。 允许网页宽度自动调整 “自适应网页设计”到底是怎么做到的?其实并不难。 首先,在网页代码的头部,加入一行viewport元标签。 viewport是网页默认的宽度和高度,上面这行代码的意思是,网…

    好文分享 2025年12月21日
    000
  • html如何实现字体大小的自适应

    本文主要和大家分析html如何实现字体大小的自适应,需要的朋友可以参考下,希望能帮助到大家。下面跟随小编一起来看一下吧。 <!DOCTYPE html 菜鸟教程(runoob.com) table { font-size: 1vw;} 一行三列: 10010010010010010010010…

    好文分享 2025年12月21日
    000
  • 前端html的实例分享

    本文主要和大家分享前端html的基本用法和实例详解,希望能帮助到大家。 代码要求: 代码如下: Document.body {width: 560px;height: 260px;border: 1px solid black;padding: 20px;font-size: 14px;line-h…

    2025年12月21日
    000
  • 动态生成的HTML标签如何实现绑定事件

    动态用js往HTML生成标签之后如何对生成的HTML标签绑定事件;尝试了很多种方法之后就是绑定不上;今天跟随小编一起来看解决方案吧。 不成功的案例: $(“#id”).change(function(){ console.log(‘需要执行的事情’);}); 发现用上述的方法,对用JS生成的HTML…

    好文分享 2025年12月21日
    000
  • HTML关于结构语义化的问题

    本文主要为大家分享一篇HTML关于结构语义化的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧。 为什么要web语义化?        首先,人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。搜索引擎只能通过标签来判断内容的语义。因为页面的很大一部分流量是来自搜索引擎的…

    2025年12月21日
    000
  • HTML如何实现定位position

    本文主要为大家分享一篇HTML如何实现定位position的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧。 一、css定位(posotioning)属性允许你对元素进行定位, position属性值:      static(默认值):元素框正常生成。块状元素生成一个人矩形框…

    2025年12月21日 好文分享
    000
  • HTML与CSS中背景相关属性

    这次给大家带来html与css中背景相关属性,使用html与css中背景相关属性的注意事项有哪些,下面就是实战案例,一起来看一下。 一. 背景尺寸属性 1.什么是背景尺寸属性 背景尺寸属性是CSS3中新增的一个属性, 专门用于设置背景图片大小 background-size:xxxx; 取值: 1.…

    好文分享 2025年12月21日
    000
  • nodejs的npm常用命令集合

    这次给大家带来nodejs的npm常用命令集合,使用nodejs的npm常用命令集合注意事项有哪些,下面就是实战案例,一起来看一下。 NPM提供了很多命令,例如install和publish,使用npm help可查看所有命令。 使用npm help 可查看某条命令的详细帮助,例如npm help …

    好文分享 2025年12月21日
    000
  • HTML和XML的区别分析

    在刚开始接触php或者HTML的时候,我们会遇到HTML和XML,可是它们之间有什么区别呢?本文我们主要和大家分享HTML和XML的区别分析,希望能帮助到大家。 一、HTML叫做超文本标记语言; xml是可扩展标记语言;它没有标签集(tagset),也没有语法规则(grammatical rule)…

    好文分享 2025年12月21日
    000
  • 几种关于html和css的使用方法

    本文主要和大家介绍了几种关于html和css的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 html使用方法篇 一:颜色代码 如果你想使用某种颜色,取得它的颜色值即可。比如,您想改变某些文字的颜色,您可以使用下面的代码:改变#符号后的代码即…

    好文分享 2025年12月21日
    000
  • 几个HTML基础知识点

    对于新手来说,一份详细的基础知识点是必要的。本文给大家归纳总结了几个HTML基础知识点,需要的朋友可以参考下,希望能帮助到大家。 HTML 标题 html 标题(heading)是通过 – 等标签进行定义的。 This is a headingThis is a headingThis is a h…

    2025年12月21日
    000
  • HTML与CSS中的过渡模块

    这次给大家带来HTML与CSS中的过渡模块,HTML与CSS中过渡模块的注意事项有哪些,下面就是实战案例,一起来看一下。  a标签的伪类选择器  a标签 1.通过我们的观察发现a标签存在一定的状态 1.1默认状态, 从未被访问过 1.2被访问过的状态 1.3鼠标长按状态 1.4鼠标悬停在a标签上状态…

    2025年12月21日
    000
  • HTML与CSS中2D转换模块

    这次给大家带来html与css中2d转换模块,html与css中2d转换模块的注意事项有哪些,下面就是实战案例,一起来看一下。 一. 2D转换模块 2D转换模块 立即学习“前端免费学习笔记(深入)”; /*其中deg是单位, 代表多少度*/ transform: rotate(45deg);/*第一…

    2025年12月21日 好文分享
    000
  • HTML与CSS中的动画模块

    这次给大家带来html与css中的动画模块,使用html与css中的动画模块注意事项有哪些,下面就是实战案例,一起来看一下。 一. 动画模块 1.过渡和动画之间的异同 1.1不同点 过渡必须人为的触发才会执行动画 动画不需要人为的触发就可以执行动画 立即学习“前端免费学习笔记(深入)”; 1.2相同…

    好文分享 2025年12月21日
    000

发表回复

登录后才能评论
关注微信