Jquery中"$(document).ready(function(){ })"函数的使用详解


Posted in Javascript onDecember 30, 2013

Jquery是优秀的Javascrīpt框架,$是jquery库的申明,它很不稳定(我就常遇上),换一种稳定的写法jQuery.noConflict(); jQuery(document).ready(function(){});

使用jQuery的好处是它包装了各种浏览器版本对DOM对象(javascript的DOM对象你应该知道吧,就是它了)的操作.

比如jquery写法:
$("div p"); // (1)
$("div.container"); // (2)
$("div #msg"); // (3)
$("table a",context); // (4)
$("#myId"); //(5)

第一行代码得到所有<div>标签下的<p>元素。第二行代码得到class 为container的<div>元素,第三行代码得到<div>标签下面id为msg的元素。第四行代码得到context为 上下文的table里面所有的连接元素。第五行代码得到id为myid的所有元素

如果你熟悉CSS,你会觉得这些写法很眼熟!对了。正是。看出奥妙了吧。jquery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。

现在回答你的具体问题吧

$(document).ready(function(){
alert("hello");
});(1)

<body onload="alert('hello');">(2)

上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作,即$(document).ready (fn)可以在一个页面中重复出现,而不会冲突。基本上Jquery的很多plugin都是利用这个特性,正因为这个特性,多个plugin共同使用起 来,在初始化时不会发生冲突。

如果我们在
$(document).ready(function(){
加入的内容
});
加入内容$(".btn-slide").click(function(){
          alert("你单击了a标签中class等于btn-slide的连接");
});

则表示当我们单击class=btn-slide的超级连接时弹出“你单击了a标签中class等于btn-slide的连接”对话框.

如此方便易用,因此使用jquery是一个不错的选择。

Javascript 相关文章推荐
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
Jquery中children与find之间的区别详细解析
Nov 29 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
jQuery快速高效制作网页交互特效
Feb 24 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
如何用JS实现简单的数据监听
May 06 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 #Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 #Javascript
jQuery中.live()方法的用法深入解析
Dec 30 #Javascript
Javasipt:操作radio标签详解
Dec 30 #Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 #Javascript
jquery获得keycode的示例代码
Dec 30 #Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 #Javascript
You might like
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
str_replace只替换一次字符串的方法
2013/04/09 PHP
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
vue 组件简介
2020/07/31 Javascript
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
十条建议帮你提高Python编程效率
2016/02/16 Python
python列表推导式操作解析
2019/11/26 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
Python pip 常用命令汇总
2020/10/19 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
建筑工程实习自我鉴定
2013/09/19 职场文书
2014年高三毕业生自我评价
2014/01/11 职场文书
三年级语文教学反思
2014/02/01 职场文书
大二学生自我检讨书
2014/10/23 职场文书
大学生实习证明
2015/06/16 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
如何用JavaScipt测网速
2021/05/09 Javascript
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript