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对象. ...
随机推荐
- C#异步编程 z
http://www.cnblogs.com/fangyz/p/5134018.html 从.NET4.5开始,用async和await关键字再加上Task.Run是一个非常不错的异步编程模型. 1. ...
- [Flex] ButtonBar系列——如何给ButtonBar添加一个ViewStack
<?xml version="1.0" encoding="utf-8"?> <!--如何给ButtonBar添加一个ViewStack--& ...
- gomobile 真机 log 打出的日志跟踪
go mobile 开发的应用,真机调试时,我们期望看到log包打出的日志, 这时候就需要借用 Android Device Monitor 了. 我们的 go 代码中用最简单的 log.Printl ...
- SecureCRT的背景和文字颜色的修改
options->;session options->;emulation->;terminal选择linux(相应的服务器系统)ansi color 打上钩options-> ...
- SSH连接问题
新安装的ubuntu14.04无法使用root用户ssh连接,显示ssh root permission denied 解决方法: /etc/ssh/sshd_confg: PermitRootLog ...
- Nginx 内置全局变量
Nginx在使用过程中,有不少的内置全局变量可以用做条件判断和编程控制,本文总结一些已知的指令,以供参考. $arg_PARAMETER 这个变量包含在查询字符串时GET请求PARAMETER的值. ...
- (转)c#多线程 Invoke方法的使用
原文地址:http://www.cnblogs.com/lovko/archive/2008/12/19/1358748.html 在多线程编程中,我们经常要在工作线程中去更新界面显示,而在多线程中直 ...
- [译]使用AES 256以达到SSL/TLS安全最大化
原文链接:https://luxsci.com/blog/256-bit-aes-encryption-for-ssl-and-tls-maximal-security.html 原文发表时间:201 ...
- MyBatis框架
MyBatis是支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以使用简单的xml或者注解用于 ...
- OpenStack-Mitaka 一键安装测试环境脚本
说明:这个脚本是采用Bash Shell编写,这个版本还只能作为测试环境搭建使用. 此脚本原形的发起人是网友:WuYuLiang.这里有他的博客链接: 第一版的链接: http://blog.cs ...