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在一段文字中的光标处插入其他文字
Aug 26 Javascript
js 提交和设置表单的值
Dec 19 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
JS实现小米轮播图
Sep 21 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 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
我的论坛源代码(四)
2006/10/09 PHP
PHP函数积累总结
2019/03/19 PHP
Javascript Select操作大集合
2009/05/26 Javascript
Date对象格式化函数代码
2010/07/17 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
Python语言的12个基础知识点小结
2014/07/10 Python
Python迭代用法实例教程
2014/09/08 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
Mac 上切换Python多版本
2017/06/17 Python
python 中random模块的常用方法总结
2017/07/08 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
python游戏地图最短路径求解
2019/01/16 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
AURALog面试题软件测试方面
2013/10/22 面试题
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
《风娃娃》教学反思
2014/04/19 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python