使用JQuery 加载页面时调用JS的实现方法


Posted in Javascript onMay 30, 2016

1,window.onload = function() {};

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

一、一般的加载页面时调用js方法如下:

window.onload = function() {  
$("table tr:nth-child(even)").addClass("even"); //这个是jquery代码  
};

这段代码会在整个页面的document全部加载完成以后执行。不幸的这种方式不仅要求页面的DOM tree全部加载完成,而且要求所有的外部图片和资源全部加载完成。更不幸的是,如果外部资源,例如图片需要很长时间来加载,那么这个js效果就会让用户感觉失效了。

 二、用jquery的方法加载页面

$(document).ready(function() {  
// 任何需要执行的js特效  
$("table tr:nth-child(even)").addClass("even");  
});

就仅仅只需要加载所有的DOM结构,在浏览器把所有的HTML放入DOM tree之前就执行js效果。包括在加载外部图片和资源之前。

其简写的方式:

$(function() {  
// 任何需要执行的js特效  
$("table tr:nth-child(even)").addClass("even");  
});

使用 $(document).ready() 的简写,同时内部的 jQuery 代码依然使用 $ 作为别名,而不管全局的 $ 为何。

jQuery 代码:

jQuery(function($) {
  // 你可以在这里继续使用$作为别名...
 });

以上这篇使用JQuery 加载页面时调用JS的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
Jun 30 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
JavaScript 跨域之POST实现方法
May 07 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
Aug 16 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 Javascript
VsCode里的Vue模板的实现
Aug 12 Javascript
javascript实现拼图游戏
Jan 29 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 #Javascript
jquery获取复选框checkbox的值实现方法
May 30 #Javascript
JS在onclientclick里如何控制onclick的执行
May 30 #Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 #Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 #Javascript
js获取所有checkbox的值的简单实例
May 30 #Javascript
一览画面点击复选框后获取多个id值的方法
May 30 #Javascript
You might like
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
js控制框架刷新
2008/08/01 Javascript
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
Python3如何解决字符编码问题详解
2017/04/23 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
Django密码存储策略分析
2020/01/09 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
印尼旅游网站:via
2017/11/12 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
让生命充满爱演讲稿
2014/05/10 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
审美与表现自我评价
2015/03/09 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL