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下弹出窗口的变通
Apr 18 Javascript
JavaScript 新手24条实用建议[TUTS+]
Jun 21 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 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
ajax 的post方法实例(带循环)
2011/07/04 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
python中函数总结之装饰器闭包详解
2016/06/12 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
解决python对齐错误的方法
2020/07/16 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
毕业生的自我鉴定
2013/10/29 职场文书
毕业生的自我评价范文
2013/12/31 职场文书
思想汇报格式
2014/01/05 职场文书
大学生自我鉴定评语
2014/01/27 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
物业经理自我鉴定
2014/03/03 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python