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 相关文章推荐
节点的插入之append()和appendTo()的用法介绍
Jan 13 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
elementUI select组件使用及注意事项详解
May 29 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 Javascript
design vue 表格开启列排序的操作
Oct 28 Javascript
JavaScript中跨域问题的深入理解
Mar 04 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计算给定时间之前的函数用法实例
2015/04/03 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
javascript 数组排序函数
2009/08/20 Javascript
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
2019/05/08 Javascript
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
python 实现客户端与服务端的通信
2020/12/23 Python
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS