使用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 相关文章推荐
重写javascript中window.confirm的行为
Oct 21 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
js 提取某()特殊字符串长度的实例
Dec 06 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 Javascript
Vue router安装及使用方法解析
Dec 02 Vue.js
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 函数执行效率的小比较
2010/10/17 PHP
介绍一些PHP判断变量的函数
2012/04/24 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
php获取微信openid方法总结
2019/10/10 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
Python批处理更改文件名os.rename的方法
2018/10/26 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
python实现简单的五子棋游戏
2020/09/01 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
linux面试题参考答案(6)
2014/08/29 面试题
中国好声音华少广告词
2014/03/17 职场文书
房地产广告词大全
2014/03/19 职场文书
股东协议书
2014/04/14 职场文书
给上级领导的感谢信
2015/01/22 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android