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实现运行代码需要刷新的解决方法
Aug 18 Javascript
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
Jun 02 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
SVG实现时钟效果
Jul 17 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的面向对象编程
2006/10/09 PHP
Zend Guard一些常见问题解答
2008/09/11 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
php json转换成数组形式代码分享
2014/11/10 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
python中reload(module)的用法示例详解
2017/09/15 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
Django 开发环境配置过程详解
2019/07/18 Python
python函数定义和调用过程详解
2020/02/09 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
美国电视购物HSN官网:HSN
2016/09/07 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
中科前程Java笔试题
2016/11/20 面试题
社区学雷锋活动策划方案
2014/01/30 职场文书
三八节主持词
2014/03/17 职场文书
人大代表选举标语
2014/10/07 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python