javascript中$(function() {});写与不写有哪些区别


Posted in Javascript onAugust 10, 2015

javascript中$(function() {....}) 是 jQuery 中的经典用法,等同于 $(document).ready(function() {....}),即在页面加载完成后才执行某个函数,如果函数中要操作 DOM,在页面加载完成后再执行会更安全,所以在使用 jQuery 时这样的写法很常见。

$(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>

javascript 中(function(){})()的作用和用法有哪些

和对象啥的没关系
(function(){})() 代表立即执行一个匿名的方法
一般用来与外界隔绝  制造一个似闭包的环境 创建一个作用域链 避免变量冲突

(function(){
 var a;
..........
})()

这篇文章主要介绍了javascript中$(function() {});写与不写有哪些区别,希望对大家有所帮助。

Javascript 相关文章推荐
js切换光标示例代码
Oct 10 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
JS获取一个未知DIV高度的方法
Aug 09 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 Javascript
jQuery中$(function() {});问题详解
Aug 10 #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
You might like
无限级别菜单的实现
2006/10/09 PHP
通俗易懂的php防注入代码
2010/04/07 PHP
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
纯js实现背景图片切换效果代码
2010/11/14 Javascript
node.js操作mongoDB数据库示例分享
2014/11/26 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
小程序如何构建骨架屏
2019/05/29 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
python的依赖管理的实现
2019/05/14 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
什么是python的id函数
2020/06/11 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
高级电工工作职责
2013/11/21 职场文书
园林技术个人的自我评价
2014/01/08 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
python中__slots__节约内存的具体做法
2021/07/04 Python
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python