`

使用JQuery 加载页面时调用JS

阅读更多

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

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

 

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

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

  这段代码会在整个页面的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 代码:

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

 

分享到:
评论

相关推荐

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

    下面小编就为大家带来一篇使用JQuery 加载页面时调用JS的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    调用Jquery的加载js

    调用Jquery的加载js html调用<script type="text/javascript" src="().'js/jquery-1.4.2.js'?>"></script>

    jquery.tipTips.js 官方原版 付使用教程

    引入包内js及css文件,给元素设置titile,界面加载时调用元素.tipTip()方法,即可在鼠标悬停到指定元素时显示元素title内的内容。 我是悬停提示内容">我是div的文本内容 $(function(){ $("#div1").tipTip(); })

    jQuery打印插件.js

    script type = “ text / JavaScript ” src = “ path / to / jquery.print.js ” > </ script > 使用它像: $(“#myElementId ”)。print(/ * options * /); 要么 $。print(“#myElementId ...

    jQuery插件ImageFlyout弹出图片实现javascript放大图片功能

    可选JS库文件:增强图片显示特效可使用jQuery插件Easing Plugin库文件 素材准备 可自定义CSS样式,控制jQuery插件jQuery Image Flyout提示小图片显示效果。 实例代码 一,包含文件部分 [removed][removed] ...

    jquery插件使用方法大全

    当使用jquery时,推荐使用代码1。 编辑本段事件机制  我们大量使用的事件可能就是button的onclick了。以前习惯在input 元素上写onclick = "fn()",使用jquery可以使javascrīpt代码与html代码分离,保持HTML的清洁...

    jQuery popmenu 面包宵菜单.rar

    在编写时使用了jquery插件,以及一个popmenu菜单插件:jquery.popmenu.js,调用方法请参见示例包中的index.html文件,调用的方法挺简单的,直接运行本页面也可看到调用方法。  注:若在IE下预览效果,请打开后刷新...

    动态树的管理程序(基于jQuery Treeview实现)

    在实现的时候也会有很多的方法,例如可以用extjs,jquery treeview等一些js开发包。 但是在开发的时候我种想找个例子来参考下,发现有很多这样的例子,包括extjs和jquery treeview的官方也有,但结合java后台实现的...

    jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例

    本文实例讲述了jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作。分享给大家供大家参考,具体如下: 1、先给json格式的数据: [ {"id":1,"name":"stan"}, {"id":2,"name":"jack"}, {"id":3,"name":"lucy"}...

    超实用的jQuery代码段

    超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...

    jQuery AJAX实现调用页面后台方法

    本文实例为大家分享了jQuery AJAX调用页面后台方法,供大家参考,具体内容如下 1.新建demo.aspx页面。 2.首先在该页面的后台文件demos.aspx.cs中添加引用。 using System.Web.Services; 1).无参数的方法调用. ...

    jQuery实现在线考试答题代码.zip

    开发周期短,上手快,入门低,但是进阶难一般常用的jquery特效 jquery焦点图 jquery选项卡 jquery滚动条 jquery下拉广告,jquery图片延时加载等,jquery代码,放大镜特效,jquery广告代码,jquery导航,jquery在线客服...

    jQuery详细教程

    如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。 当我们在教程中演示 jQuery 时,会将函数直接添加到 <head> 部分中。不过,把它们放到一个单独的...

    jquery ui 后台界面演示系统 登陆界面

    目前的这个版本,最值得推荐的功能在于,jQuery代码是一次载入的,使用这套系统进行开发,程序员可以完全不懂jQuery,而仍能享用jQuery的种种便利。 0.1版系统特点介绍 • 集成了jQuery UI的风琴盒、页标签特效、...

    自写的jQuery万能浮动框调用插件,附有实例

    内容索引:脚本资源,jQuery,浮动框,jQuery插件 jquery-powerFloat,国内Js高人自写的jQuery万能浮动框插件,附有6种效果的浮动框调用实例,  1、加载页面上元素。  2、Ajax加载外部元素,加载外部HTML片段,加载...

    [原创]基于FLASH机制实现的不同域窗口相互调用js的插件-虫洞

    4)本插件在JS中的实现是依靠一个静态类Wormhole来实现的,使用时在页面中相当于单实例模式,不用构造一个对象,只用初始化即可 5)由于AS3之间的LocalConncetion还可以传递支持序列化的自定义对象,使用此插件传输的数据...

    jQuery酷炫LED数字时钟.zip

    开发周期短,上手快,入门低,但是进阶难一般常用的jquery特效 jquery焦点图 jquery选项卡 jquery滚动条 jquery下拉广告,jquery图片延时加载等,jquery代码,放大镜特效,jquery广告代码,jquery导航,jquery在线客服...

    如何解决jQuery 和其他JS库的冲突

    通常,全局对象都被很好地存储在 jQuery 命名空间里,因此当把 jQuery 和其他 JavaScript 库(例如 Prototype、MooTools 或 YUI)一起使用时,不会引起冲突。 注意:默认情况下,jQuery 用 $ 作为自身的快捷方式。 1...

    jquery电子文档chm

    jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时...

Global site tag (gtag.js) - Google Analytics