使用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效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
深入探讨前端框架react
Dec 09 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
深入理解vue中的$set
Jun 01 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
vue 根据选择条件显示指定参数的例子
Nov 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
php除数取整示例
2014/04/24 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
python简单的函数定义和用法实例
2015/05/07 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
高中生期末评语
2014/01/28 职场文书
运动会广播稿500字
2014/01/28 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android
Python创建SQL数据库流程逐步讲解
2022/09/23 Python