jQuery中$(function() {});问题详解

$(function() {});是$(document).ready(function(){ })的简写，最早接触的时候也说$(document).ready(function(){ })这个函数是用来取代页面中的window.onload;但是今天发现好像不是这样回事！是在做一个页面载入效果时发现的！

$(document).ready() 里的代码是在页面内容都加载完才执行的，如果把代码直接写到script标签里，当页面加载完这个script标签就会执行里边的代码了，此时如果你标签里执行的代码调用了当前还没加载过来的代码或者dom，那么就会报错，当然如果你把script标签放到页面最后面那么就没问题了，此时和ready效果一样。

$(document).ready(function(){})可以简写成$(function(){});

点击段落后，此段落隐藏：

<html>

<head>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

 $("p").click(function(){

  $(this).hide();

 });

});

</script>

</head>

<body>

 <p>If you click on me, I will disappear.</p>

</body>

</html>

如果把$(document).ready(function() {});去掉后，无法隐藏段落：

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

 $("p").click(function(){

  $(this).hide();

 });

</script>

</head>

<body>

 <p>If you click on me, I will disappear.</p>

</body>

</html>

但是把script放到页面最后的话，就可恢复隐藏效果：

<html>

<head>

</head>

<body>

 <p>If you click on me, I will disappear.</p>

</body>

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<script type="text/javascript">

 $("p").click(function(){

   $(this).hide();

 });

</script>

</html>

总结：

$(document).ready 里的代码是在页面内容都加载完才执行的，你直接写到script标签里，当页面加载完这个script标签就会执行里边的代码了，如果你标签里执行的代码调用了当前还没加载过来的代码或者dom，那么就会报错，
当然如果你把script标签当到页面最后面那么就没问题了和ready差不多的效果

jQuery中$(function() {});问题详解的更多相关文章

jQuery Validate验证框架详解
转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...
触碰jQuery：AJAX异步详解
触碰jQuery:AJAX异步详解传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...
jQuery调用AJAX异步详解[转]
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
jQuery的deferred对象详解（一）
最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面 ...
触碰jQuery：AJAX异步详解（转）
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
【转】jQuery Validate验证框架详解
jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type=& ...
jQuery form插件使用详解
点击打开: jquery选择器全解 jquery中的style样式操作 jquery中的DOM操作 jquery中的事件操作全解 jquery中的动画操作全解 jquery中ajax的应用自定义jq ...
[转] jQuery的deferred对象详解
jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...
jQuery的deferred对象详解（转）
jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...

随机推荐

Python基础08 面向对象的基本概念
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 谢谢逆水寒龙,topmad和Liqing纠错 Python使用类(class)和对 ...
gridview转成EXCEL文件保存(多页)
CompositeLink complink = new CompositeLink(new PrintingSystem()); PrintableComponentLink link = new ...
SQL Server 2005中的分区表（五）：添加一个分区(转)
所谓天下大事,分久必合,合久必分,对于分区表而言也一样.前面我们介绍过如何删除(合并)分区表中的一个分区,下面我们介绍一下如何为分区表添加一个分区. 为分区表添加一个分区,这种情况是时常会发生的.比 ...
[Flex] PopUpButton系列 —— 设置弹出菜单与主按钮之间的间隔
<?xml version="1.0" encoding="utf-8"?><!--设置弹出菜单与主按钮之间的间隔 PopUpButtonPo ...
在eclipse中查找指定文件
1.ctrl+h打开搜索界面 File Search: containing text填*,File name patterns填写hello.*,可以找到hello为命名的文件知道文件类型,查找里 ...
EXT gridGroup
Ext.define('Task', { extend: 'Ext.data.Model', idProperty: 'id', fields: [ { name: 'Customer_name', ...
为什么需要auto_ptr_ref
这几天开始拜读侯捷先生和孟岩先生的译作<C++标准程序库:自修教程与参考手册> .两位先生确实译功上乘,读得很顺.但是读到P55页关于auto_ptr_ref的讨论,却百思不得其解:为什么 ...
java使用jacob将office转pdf
1.此处代码是把office文档转换成pdf的工具类,在BS架构的产品中,我们可以使用基于JS的pdf插件显示pdf文档,但是前提IE需要按照adobe的pdf软件,对于非IE不用安装.2.可以基于f ...
【LeetCode】8. String to Integer (atoi) 字符串转整数
题目: Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input ca ...
支撑5亿用户、1.5亿活跃用户的Twitter最新架构详解及相关实现
如果你对项目管理.系统架构有兴趣,请加微信订阅号"softjg",加入这个PM.架构师的大家庭摘要:Twitter出道之初只是个奋斗在RoR上的小站点,而如今已拥有1.5亿的活跃 ...

jQuery中$(function() {});问题详解

jQuery中$(function() {});问题详解的更多相关文章

随机推荐

热门专题