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>
- CSS3和Html5
- 图表与图形
- 表单验证
- 导航菜单
- table选项卡
- 视频播放器
- 日期和时间
- 返回顶部
- 图层代码
- 滚动代码
- 幻灯片
- 文字特效
- 图片放大镜
- juqery焦点图
- 瀑布流
- 广告悬浮代码
- 在线客服
- 网页导航菜单
- 时间倒计时
- Jquery教程
- wap手机网站教程
- javascript教程
- CSS3教程
- 网页基础
- php
- html
- 图片表情
- 手机网站模板
- CSS3动画
- html5 Canvas画布
总结:
$(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进阶07 函数对象
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 秉承着一切皆对象的理念,我们再次回头来看函数(function).函数也是一个对象 ...
- Opensturt和Struct区别
1 OpenStruct和Struct区别,Opestruct你需要创建时,直接给属性赋值,而Struct需要先定义属性后 ,再给属性赋值.选择哪个就看你对属性赋值的时机, 2 Struct和Open ...
- 在Windows 7上安装MongoDB 2.6.7
sc.exe create MongoDB binPath= "C:\mongodb\bin\mongod.exe --service --config=\"C:\mongodb\ ...
- 用inno Setup制作web项目安装包
http://www.cnblogs.com/xionghui/archive/2012/03/22/2411207.html 用inno Setup制作安装包 新建一个文件夹exambody,放ap ...
- [SQL]sql语句中charindex的用法
假如你写过很多程序,你可能偶尔会碰到要确定字符或字符窜串否包含在一段文字中,在这篇文章中,我将讨论使用CHARINDEX和PATINDEX函数来搜索文字列和字符串.我将告诉你这两个函数是如何运转的,解 ...
- (转)如果知道dll文件是面向32位系统还是面向64位系统的?
本文为转载文章,原文地址:http://www.cnblogs.com/qguohog/archive/2011/09/13/2174897.html,仅仅是记录供后续使用,如有侵权请通知删除. 在发 ...
- Flex 医疗行程图
================================================ 病案的质量控制: 1.医生自检,主任检测,病案室检测达到三级检测 2.人工检测,自动检测 3.抽检(采 ...
- 为view添加约束constraints
在相应要设置约束的view中按住鼠标右键进行拖拽,然后向指定的方向添加约束,如图: 拖拽的时候会显示一条蓝线,如上图所示,然后手指离开鼠标的时候会弹出向对应的约束供添加约束的时候进行使用如图:
- ZigBee无线网络技术在小区路灯照明系统的应用
小区路灯照明系统是楼宇智能的一部分,但受制于布线.成本等的问题,难以得以实施.随着计算机技术的迅猛发展,无线网络技术越来越成熟,ZigBee无线网络成本低.功耗低.传输距离远等的特点,非常适合在无线路 ...
- the error code is 2203
权限不够 切换管理员再操作