网页中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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
javascript如何定义对象数组
Jun 07 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
js实现移动端吸顶效果
Jan 08 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数组查找函数总结
2014/11/18 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
Python中for循环详解
2014/01/17 Python
pandas带有重复索引操作方法
2018/06/08 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
python with (as)语句实例详解
2020/02/04 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
致跳高运动员广播稿
2014/01/13 职场文书
快餐店的创业计划书范文
2014/01/29 职场文书
员工安全生产承诺书
2014/05/22 职场文书
七一建党节演讲稿
2014/09/11 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
上诉状格式
2015/05/23 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
招商银行收入证明
2015/06/17 职场文书
毕业酒会致辞
2015/07/29 职场文书
用python修改excel表某一列内容的操作方法
2021/06/11 Python
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android