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 相关文章推荐
最新优化收藏到网摘代码(digg,diigo)
Feb 07 Javascript
JS 实现完美include载入实现代码
Aug 05 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 Javascript
js实现随机点名
Jan 19 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
新52大事件
2020/03/03 欧美动漫
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
文章推荐系统(二)
2006/10/09 PHP
php中cookie的作用域
2008/03/27 PHP
PHP Undefined index报错的修复方法
2011/07/17 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
python中实现词云图的示例
2020/12/19 Python
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
软件配置管理有什么好处
2015/04/15 面试题
数学国培研修感言
2014/02/13 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
党员教师群众路线个人整改措施
2014/10/28 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS