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


Posted in Javascript onAugust 10, 2015

$(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差不多的效果

Javascript 相关文章推荐
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
Jan 10 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
JavaScript知识点整理
Dec 09 Javascript
需要牢记的JavaScript基础知识
Sep 25 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 #Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 #Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 #Javascript
javascript实现连续赋值
Aug 10 #Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 #Javascript
js中的内部属性与delete操作符介绍
Aug 10 #Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 #Javascript
You might like
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python 异常处理实例详解
2014/03/12 Python
python批量生成本地ip地址的方法
2015/03/23 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
python僵尸进程产生的原因
2017/07/21 Python
使用Python读取大文件的方法
2018/02/11 Python
PyQt5组件读取参数的实例
2019/06/25 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
python生成大写32位uuid代码
2020/03/03 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
求职推荐信
2013/10/28 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL
Nginx配置之禁止指定IP访问
2022/05/02 Servers