网页中JS函数自动执行常用三种方法


Posted in Javascript onMarch 30, 2016

本文为大家分享了在网页中JS函数自动执行常用方法,供大家参考,具体内容如下

一、JS方法
1.最简单的调用方式,直接写到html的body标签里面:

<body onload="myfunction()">
<html> <body onload="func1();func2();func3();"> </body> </html>

2.在JS语句调用:

<script type="text/javascript">
function myfun() 

{ 
 alert("this window.onload"); 
} 
/*用window.onload调用myfun()*/

window.onload = myfun;//不要括号
</script>

第三种

<script type="text/javascript">
window.onload=function(){
func1();
func2();
func3(); }
</script>

二、JQ方法

1.整个页面的document全部加载完成以后执行。不幸的这种方式不仅要求页面的DOM tree全部加载完成,而且要求所有的外部图片和资源全部加载完成。更不幸的是,如果外部资源,例如图片需要很长时间来加载,那么这个js方法执行感觉就比较慢了。也就是说这是一种最严谨的页面加载完再执行方法的方法。
window.onload =function() { $("table tr:nth-child(even)").addClass("even"); //这个是jquery代码 };

2.仅只需要加载所有的DOM结构,在浏览器把所有的HTML放入DOM tree之前就执行方法。包括在加载外部图片和资源之前。
$(document).ready(function() { $("table tr:nth-child(even)").addClass("even"); //任何需要执行的js特效 });

还有一种简写方式
$(function() { $("table tr:nth-child(even)").addClass("even"); //任何需要执行的js特效 });

在网页中JS函数自动执行常用三种方法

在HTML中的Head区域中,有如下函数:

<SCRIPT  LANGUAGE="JavaScript"> 

functionn MyAutoRun()


{ 


 //以下是您的函数的代码,请自行修改先!


 alert("函数自动执行哦!"); 


} 

</SCRIPT>

下面,我们就针对上面的函数,让其在网页载入的时候自动运行!

①第一种方法

将如上代码改为:

<SCRIPT  LANGUAGE="JavaScript"> 

functionn MyAutoRun()


{ 


 //以下是您的函数的代码,请自行修改先!


 alert("函数自动执行哦!"); 


} 


window.onload=MyAutoRun(); //仅需要加这一句

</SCRIPT>

②第二种方法

修改网页的Body为:

<body onLoad="MyAutoRun();">

或者改为:

<body onLoad="javascript:MyAutoRun();">

③第三种方法

使用JS定时器来间断性的执行函数:

setTimeout("MyAutoRun()",1000);   //隔1000毫秒就执行一次MyAutoRun()函数

实现方法,将最上面的那JS函数,改为:

<SCRIPT  LANGUAGE="JavaScript"> 

functionn MyAutoRun()


{ 


 //以下是您的函数的代码,请自行修改先!


 alert("函数自动执行哦!"); 


} 


setTimeout("MyAutoRun()",1000); //这样就行拉

</SCRIPT>

其它的方法比较特殊,也不常用,通用性也不大,就不介绍了!

以上为大家介绍的是JS函数自动执行常用方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
js显示文本框提示文字的方法
May 07 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
微信小程序form表单组件示例代码
Jul 15 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 Javascript
Jquery轮播效果实现过程解析
Mar 30 #Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 #Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 #Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 #Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 #Javascript
React.js入门学习第一篇
Mar 30 #Javascript
Node.js操作mysql数据库增删改查
Mar 30 #Javascript
You might like
PHP中几个常用的魔术常量
2012/02/23 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
jQuery图片轮播的具体实现
2013/09/11 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
详解python之简单主机批量管理工具
2017/01/27 Python
python机器学习之神经网络(三)
2017/12/20 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
工程监理应届生求职信
2013/11/09 职场文书
大学生村官演讲稿
2014/04/25 职场文书
购房协议书范本
2014/10/02 职场文书
2014年手术室工作总结
2014/11/26 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python
浅谈Redis的几个过期策略
2021/05/27 Redis
MySQL空间数据存储及函数
2021/09/25 MySQL