使用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 $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
JSON辅助格式化处理方法
Mar 26 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
javascript中this关键字详解
Dec 12 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 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中CI操作多个数据库的代码
2012/07/05 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
jquery 插件学习(一)
2012/08/06 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
Vue指令指令大全
2019/02/09 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
python之Socket网络编程详解
2016/09/29 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
Python退火算法在高次方程的应用
2018/07/26 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
副总经理工作职责
2013/11/28 职场文书
应用心理学专业求职信
2014/08/04 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
医生个人年终总结
2015/02/28 职场文书
礼仪培训心得体会
2016/01/22 职场文书
Python学习开发之图形用户界面详解
2021/08/23 Python
24年收藏2000多部退役军用电台
2022/02/18 无线电