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 相关文章推荐
javascript实现简单的Map示例介绍
Dec 23 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
jquery图形密码实现方法
Mar 11 Javascript
javascript中动态函数用法实例分析
May 14 Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 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
PHP4实际应用经验篇(5)
2006/10/09 PHP
codeigniter中测试通过的分页类示例
2014/04/17 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
javascript天然的迭代器
2010/10/29 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
python多线程socket编程之多客户端接入
2017/09/12 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
介绍一下SQL Server的全文索引
2013/08/15 面试题
追悼会主持词
2014/03/20 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
个人承诺书怎么写
2014/05/24 职场文书
社区平安建设方案
2014/05/25 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记