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 相关文章推荐
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
了解重排与重绘
May 29 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 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
PHP 5.0对象模型深度探索之对象复制
2008/03/27 PHP
PHP文件读写操作之文件写入代码
2011/01/13 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
Python实现的简单万年历例子分享
2014/04/25 Python
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
国家助学金获奖感言
2014/01/31 职场文书
新年寄语大全
2014/04/12 职场文书
初中生操行评语大全
2014/04/24 职场文书
民主生活会意见
2015/06/05 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
Python一些基本的图像操作和处理总结
2021/06/23 Python
MySQL主从切换的超详细步骤
2022/06/28 MySQL
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android