网页中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 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
javascript面向对象编程代码
Dec 19 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
基于原生js实现判断元素是否有指定class名
Jul 11 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 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
mysql 全文搜索 技巧
2007/04/27 PHP
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
fetch 使用及如何接收JS传值
2017/11/11 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
python通过smpt发送邮件的方法
2015/04/30 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
python读取图片任意范围区域
2019/01/23 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
.NET程序员的数据库面试题
2012/10/10 面试题
公司业务员岗位职责
2014/03/18 职场文书
学生请假条
2014/04/11 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书