`

使用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的实现方法

    本篇文章将详细介绍两种在页面加载完成后调用JavaScript的常见方法,并分析它们的差异。 首先,我们来看传统的JavaScript方法,即通过`window.onload`事件来触发脚本执行: ```javascript window.onload = ...

    jquery跨域调用 js跨域调用

    在Web开发中,"跨域调用"是一个关键的话题,特别是在使用JavaScript进行AJAX操作时。由于浏览器的同源策略(Same-Origin Policy),一个域下的文档或脚本不能请求另一个域下的资源,除非这两个域完全相同。这限制了...

    jquery强大的调用其它页面

    首先,jQuery的页面调用功能主要体现在其 AJAX(Asynchronous JavaScript and XML)模块。AJAX允许我们在不刷新整个页面的情况下,与服务器进行异步数据交换。这极大地提高了网页的交互性和用户体验。通过$.ajax()...

    简单jQuery加载等待转圈页面插件

    "简单jQuery加载等待转圈页面插件"就是为了解决这个问题而设计的,它能提供一个优雅的、可视化的等待提示,让用户知道后台正在忙碌并期待即将完成的操作。 jQuery是一个广泛使用的JavaScript库,它简化了HTML文档...

    jQuery.spin.js自定义页面加载Loading动画代码

    jQuery.spin.js就是一个这样的插件,它允许开发者自定义页面加载的Loading动画效果,提供了一种优雅的方式来提升用户体验。 jQuery是一个广泛使用的JavaScript库,它的易用性和丰富的功能使其成为网页开发的首选...

    Jquery调用iframe父页面中的元素及方法

    iframe中的页面通过jQuery在页面加载时调用这两个元素: ```javascript $(function(){ // 在iframe中查找父页面元素 alert($('#default', window.parent.document).html()); // 在iframe中调用父页面中定义的方法...

    jquery图片预加载

    `images`文件夹自然存放了需要预加载的图片,而`js`文件夹可能包含了`jQuery`库和上述预加载函数的JavaScript代码。 预加载策略并不止于简单地逐个加载所有图片。对于大图或者数量众多的图片,可以采用分批加载、懒...

    jquery.lazyload.js

    jQuery.Lazyload.js是一个高效实用的JavaScript插件,它能够显著提升网页加载速度,同时赋予网页图片渐显效果,从而创造出既美观又高效的网页浏览体验。 jQuery.Lazyload.js的核心原理在于"懒加载"(Lazy Loading)...

    jqueryAjax_无刷新调用另一页实例

    "jqueryAjax_无刷新调用另一页实例"这个标题意味着我们将探讨如何利用jQuery的AJAX功能实现页面的动态加载。 首先,jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计以及AJAX交互。...

    jquery.lazyload图片预加载效果 jquery预加载

    jQuery LazyLoad 是一个jQuery插件,它的主要功能是在用户滚动页面到图片所在位置时才开始加载图片,而不是在页面初始加载时就一次性加载所有图片。这种方式大大减少了首次加载页面时的数据量,提高了页面的加载速度...

    调用Jquery的加载js

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

    jquery-1.8.3.js 、jquery-1.8.3.min.js 【官方jquery包 js】

    而"jquery-1.8.3.min.js"则是经过压缩和优化后的版本,文件大小显著减小,适用于生产环境,可以提高网页加载速度。 jQuery 1.8.3版本在功能上继承了jQuery一贯的优雅特性,包括选择器引擎(Sizzle)、链式调用、DOM...

    jquery页面屏蔽器插件

    在Web开发中,有时候我们需要在页面加载或执行特定操作时暂时隐藏页面内容,防止用户交互,这时就需要用到页面屏蔽功能。"jQuery页面屏蔽器插件"就是为了满足这种需求而创建的。本文将详细介绍这款插件的使用方法和...

    使用jQuery-webcam摄像头拍照demo

    在本文中,我们将深入探讨如何使用jQuery-webcam插件实现在Web页面上调用摄像头进行拍照的功能。jQuery-webcam是一款非常实用的JavaScript库,它允许开发者轻松地将摄像头功能集成到网页中,为用户提供实时预览、...

    jquery与ajax调用,有代码 , 有说明,使ajax调用简单

    在Web开发中,jQuery与Ajax的结合使用极大地简化了异步数据交互的过程,使得前端可以高效地与服务器进行通信,而无需刷新整个页面。本教程将详细介绍如何利用jQuery实现Ajax调用,并通过具体的代码示例帮助你理解和...

    jquery回到顶部插件jquery.goup.js

    3. JavaScript初始化:在文档加载完成后,使用jQuery选择器找到返回顶部按钮,并调用插件: ```javascript $(document).ready(function() { $('#back-to-top').goup(); }); ``` 4. 配置选项:如果需要自定义插件的...

    html5+jquery+canvas 实现调用手机拍照上传图片

    关于图片旋转问题,通常需要检查图片的Exif元数据,这些信息包含了设备方向,可以使用JavaScript的第三方库如`exif-js`来处理。 在`canvasDemo-master`这个项目中,可能包含了实现上述功能的HTML、CSS和JavaScript...

    jquery-1.9.1.min.js_javascript_jquery_

    jQuery 1.9.1.min.js 是这个库的一个特定版本,经过压缩优化,用于在实际网站上提高性能和减少页面加载时间。 **jQuery 的主要特性** 1. **DOM 操作**:jQuery 提供了一套方便的函数来选择、遍历和操作HTML元素。...

    js生成二维码jquery.qrcode.js

    首先,我们要理解JavaScript(简称JS)是网页开发中的主要脚本语言,负责处理页面的交互逻辑。而jQuery是一个高效、简洁且易用的JavaScript库,它简化了DOM操作、事件处理、动画制作等任务,使得开发者能够更高效地...

Global site tag (gtag.js) - Google Analytics