网页中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 相关文章推荐
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
xss文件页面内容读取(解决)
Nov 28 Javascript
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
学习vue.js计算属性
Dec 03 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 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 异常处理实现代码
2009/03/10 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
python实现马耳可夫链算法实例分析
2015/05/20 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
详解Python3中的 input() 函数
2020/03/18 Python
python判断正负数方式
2020/06/03 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
为什么要使用servlet
2016/01/17 面试题
股权转让协议书
2014/04/12 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python