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 相关文章推荐
用window.location.href实现刷新另个框架页面
Mar 07 Javascript
javascript 自动转到命名锚记
Jan 10 Javascript
jQuery实现可拖动的浮动层完整代码
May 27 Javascript
动态加载jquery库的方法
Feb 12 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
javascript回调函数的概念理解与用法分析
May 27 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
关于小程序优化的一些建议(小结)
Dec 10 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
基于empty函数的判断详解
2013/06/17 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
python解析json串与正则匹配对比方法
2018/12/20 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
史学专业毕业生求职信
2014/05/09 职场文书
计算机实训报告范文
2014/11/05 职场文书
初中学生操行评语
2014/12/26 职场文书
公路施工安全责任书
2015/05/08 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
朋友聚会开场白
2015/06/01 职场文书
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript
2022漫威和DC电影上映作品
2022/04/05 欧美动漫
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL