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 读取xml,写入xml 实现代码
Jul 10 Javascript
js获取光标位置和设置文本框光标位置示例代码
Jan 09 Javascript
判断复选框是否被选中的两种方法
Jun 04 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
ajax请求前端跨域问题原因及解决方案
Oct 16 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
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
python 上下文管理器使用方法小结
2017/10/10 Python
获取Django项目的全部url方法详解
2017/10/26 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
python 字典操作提取key,value的方法
2019/06/26 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
如何验证python安装成功
2020/07/06 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
JPA的特点
2014/10/25 面试题
毕业生求职自荐书范文
2014/03/27 职场文书
社团活动总结范文
2014/04/26 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript