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

news/2024/7/19 15:53:52 标签: js, 前端

这里有3种加载页面的方法:

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(){ 
    //adding your code here 
  }); 

html代码为<input type="button" id="a">点击</input>,且页面需要引用jquery的js文件 

 

各种方式的区别与选择:

一般的加载页面时调用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"); 
});

 


http://www.niftyadmin.cn/n/1587923.html

相关文章

可编程着色器---着色语言的发展史

为什么80%的码农都做不了架构师&#xff1f;>>> Cook着色树 Perlin像素流编辑器 RenderMan 转载于:https://my.oschina.net/liyangke/blog/2878004

Flutter--按钮组件

属性 属性释义onPressed按钮点击响应事件textColor按钮显示文本的颜色color按钮的颜色diabledColor按钮禁用时的颜色disabledTextColor按钮禁用时的文本颜色splashColor水波纹颜色highlightColor长按显示的颜色elevation阴影的范围&#xff0c;值越大阴影范围越大shape设置按钮…

[设计模式]简单工厂模式

简介简单工厂模式 (Simple Factory) 又叫静态工厂方法&#xff08;Static Factory Method&#xff09;模式。简单工厂模式通常是定义一个工厂类&#xff0c;这个类可以根据不同变量返回不同类的产品实例。简单工厂模式是一种对象创建型模式 &#xff08;可参考 设计模式 创建型…

Flutter--表单

TextField 属性释义maxLines多行文本框onChanged监听文本框中的文字改变decorationhintText, border, labelText, labelStyleobscureText把文本框改为密码框controller结合TextEditingController()可以配置表单默认显示内容 import package:flutter/material.dart; class Text…

我们没得拼爹,只能拼命,但拿什么来拼命?

在当前这个拼爹的社会&#xff0c;我们没得拼爹&#xff0c;只能拼命。有不少人准备充分进入了好学校&#xff0c;大企业&#xff0c;而对于广大的没有这么好条件的我们来说&#xff0c;拿什么来拼呢&#xff1f; 以前更多的工作是劳动密集型&#xff0c;可以靠身体花时间去拼。…

jquery的ajxa请求

1、什么是ajax? AJAX 异步 JavaScript 和 XML&#xff08;Asynchronous JavaScript and XML&#xff09;。 简短地说&#xff0c;在不重载整个网页的情况下&#xff0c;AJAX 通过后台加载数据&#xff0c;并在网页上进行显示。 2、jquery的ajax请求怎么实现 这里介绍三种方…

java简单的判断奇偶数方法(i 1) != 0 i为奇数

今天找提高代码性能的方法,刚好看到这篇文章里http://www.cnblogs.com/chinafine/articles/1787118.html 提到的.1. 奇偶判断 不要使用 i % 2 1 来判断是否是奇数&#xff0c;因为i为负奇数时不成立&#xff0c;请使用 i % 2 ! 0 来判断是否是奇数&#xff0c;或使用 高效式 (…

区块链基础:散列法 (Hashing)

灯泡&#xff0c;比特&#xff08;bits&#xff09;与字节&#xff08;bytes&#xff09;你可能知道计算机中所有的数据都是由0或1组成的&#xff0c;最小的数据单位就是一个比特&#xff08;bit&#xff0c;或位&#xff09;&#xff0c;它也是0或者1。想象一下&#xff0c;一…