使用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实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
Prototype使用指南之array.js
Jan 10 Javascript
事件模型在各浏览器中存在差异
Oct 20 Javascript
js控制CSS样式属性语法对照表
Dec 11 Javascript
jquery zTree异步加载简单实例分享
Feb 05 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 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与php MySQL 之间的关系
2009/07/17 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
python双向链表实现实例代码
2013/11/21 Python
python类继承用法实例分析
2015/05/27 Python
详解python调度框架APScheduler使用
2017/03/28 Python
你真的了解Python的random模块吗?
2017/12/12 Python
python如何读写csv数据
2018/03/21 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
Python列表如何更新值
2020/05/27 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
Python实现一个优先级队列的方法
2020/07/31 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
军训新闻稿范文
2015/07/17 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
详解Python中*args和**kwargs的使用
2022/04/07 Python
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android