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 相关文章推荐
用js+xml自动生成表格的东西
Dec 21 Javascript
动态控制Table的js代码
Mar 07 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
小程序如何构建骨架屏
May 29 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
Swiper实现导航栏滚动效果
Oct 16 Javascript
微信小程序实现底部弹出模态框
Nov 18 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/09/26 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
js密码强度校验
2015/11/10 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
JS前端加密算法示例
2016/12/22 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
python实现线程池的方法
2015/06/30 Python
PyQt5每天必学之布局管理
2018/04/19 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
python属于解释语言吗
2020/06/11 Python
python实现移动木板小游戏
2020/10/09 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
生物学学生自我评价
2014/01/17 职场文书
老公给老婆的保证书
2014/04/28 职场文书
日语专业求职信
2014/07/04 职场文书
民事授权委托书范文
2014/08/02 职场文书
公司演讲稿开场白
2014/08/25 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
市场部岗位职责
2015/02/12 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android