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 相关文章推荐
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
键盘KeyCode值列表汇总
Nov 26 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
seajs下require书写约定实例分析
May 16 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 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控制前台弹出对话框的实现方法
2016/08/21 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
Python获取apk文件URL地址实例
2013/11/01 Python
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
windows系统下Python环境搭建教程
2017/03/28 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
优秀党员转正的自我评价
2013/10/06 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
倡议书怎么写?
2019/04/11 职场文书
德劲DE1108畅想
2021/04/22 无线电