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 原型链学习总结
Oct 29 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
vue-router 中 meta的用法详解
Nov 01 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 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
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
php中stream(流)的用法
2014/03/25 PHP
详解php比较操作符的安全问题
2015/12/03 PHP
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
javascript事件模型介绍
2016/05/31 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
Python分割指定页数的pdf文件方法
2018/10/26 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
使用NumPy读取MNIST数据的实现代码示例
2019/11/20 Python
Python 实现集合Set的示例
2020/12/21 Python
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
毕业生优秀推荐信
2013/11/26 职场文书
保密协议书范本
2014/04/22 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
春风化雨观后感
2015/06/11 职场文书
2016特色励志班级口号
2015/12/24 职场文书
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android
我的收音机情缘
2022/04/05 无线电
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL