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

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的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

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

    1,window.onload = function() {}; 2,$(document).ready(function() {}); 一.一般的加载页面时调用js方法如下: window.onload = function() { $("table tr:nth-child(even)").addClass("even"); //这个是jquery代码 }; 这段代码会在整个页面的document全部加载完成以后执行.不幸的这种方式不仅要求页面的DOM tree

  • jquery加载页面的方法(页面加载完成就执行)

    1.$(function(){ $("#a").click(function(){ //adding your code here }); }); 2.$(document).ready(function(){ $("#a").click(function(){ //adding your code here }); }); 3.window.onload = function(){ $("#a").click(function(){ //add

  • jquery加载图片时以淡入方式显示的方法

    本文实例讲述了jquery加载图片时以淡入方式显示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title></title> </head> <script type="text/java

  • 原生JS实现DOM加载完成马上执行JS代码的方法

    用原生JS我们经常使用window.onload事件来加载页面.但是window.onload是在页面元素都加载完毕后才执行,如果页面内有大的图片的话,会在页面展现后好久时间后才执行.所以有时我们需要在DOM载入时马上执行一些函数.jQuery提供了document.ready方法用来代替window.onload.但又不愿意仅为了这一个需求而引入整个JQuery库,于是就把jQuery的方法提取出来,单独使用了. 如果只需要对DOM进行操作,那么这时就没必要等到页面全部加载了.Firefox有

  • AngularJS使用ng-inlude指令加载页面失败的原因与解决方法

    本文实例讲述了AngularJS使用ng-inlude指令加载页面失败的原因与解决方法.分享给大家供大家参考,具体如下: AngularJS中提供的ng-include指令,很类似于JSP中的<jsp:include>用来将多个子页面合并到同一个父页面中,避免父页面过大,可读性差,不好维护. 父页面parent.html代码如下: <html> <head> <script src="angular-1.2.2/angular.js">&

  • JavaScript控制图片加载完成后调用回调函数的方法

    本文实例讲述了JavaScript控制图片加载完成后调用回调函数的方法.分享给大家供大家参考.具体分析如下: 这段代码可以控制指定区域内的图片加载完成后执行指定的回调函数. 复制代码 代码如下: function when_images_loaded($img_container, callback) { /* do callback when images in $img_container (jQuery object) are loaded. Only works when ALL ima

  • 使用jQuery的load方法设计动态加载及解决被加载页面js失效问题

    使用jQuery的load方法设计动态加载及解决被加载页面js失效问题

    一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根据不同菜单定位到不同页面,而整体布局不会变化 这种布局结构对于单纯的HTML不具备这种嵌入各部分内容的能力,所以就需要我们自己来寻找或者解决这种问题,由于jquery的兼容性和使用广度比较不错,这里 使用jquery的load方法来处理这种页面布局框架. 二.load方法详解 1.定义 $(sele

  • jquery在启动页面时,自动加载数据的实例

    其实,重要的就是这个方法: $(document).ready(function(){ } 具体的在jquery中: 具体的ajax怎么使用,可以查看我的上一篇博客<浅谈ajax在jquery中的请求和servlet中的响应> <script type="text/javascript"> $(document).ready(function(){ var str = ""; var strA = ""; $.ajax({

  • JavaScript实现当网页加载完成后执行指定函数的方法

    本文实例讲述了JavaScript实现当网页加载完成后执行指定函数的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码演示了如何在网页加载完成时调用指定的函数,并且可以通过第二段代码动态添加多个函数同时执行. 我们只需要给window.onload指定一个函数既可以在页面加载完成时自动执行MyCoolInitFunc函数 <script type="text/javascript" > window.onload = MyCoolInitFunc </scri

  • 解决用jquery load加载页面到div时,不执行页面js的问题

    jquery代码: 复制代码 代码如下: $(function(){$("#test").load("${contextPath}/notepad/toCreate.do");} 加载 ${contextPath}/notepad/toCreate.do 页面到id为test的div中,加载完成之后,create页面中的js不会执行 这种方式没办法实现,换个思路: 复制代码 代码如下: <div id="test">    <i

随机推荐