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 相关文章推荐
各种常用浏览器getBoundingClientRect的解析
May 21 Javascript
js 事件处理函数间的Event物件是否全等
Apr 08 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
详解webpack的proxyTable无效的解决方案
Jun 15 Javascript
Vue+Django项目部署详解
May 30 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 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
PHP 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
详解Python的Django框架中的templates设置
2015/05/11 Python
使用python加密自己的密码
2015/08/04 Python
浅谈Python单向链表的实现
2015/12/24 Python
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
Python List cmp()知识点总结
2019/02/18 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
员工拾金不昧表扬信
2014/01/09 职场文书
成考报名单位证明范本
2014/01/16 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
标准毕业生自荐信
2014/06/24 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
python析构函数用法及注意事项
2021/06/22 Python
关于MySQL中explain工具的使用
2023/05/08 MySQL