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 相关文章推荐
[JS]点出统计器
Oct 11 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
this在vue和小程序中的使用详解
Jan 28 Javascript
微信小程序解析富文本过程详解
Jul 13 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
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代码重构工具推荐
2014/10/14 PHP
js兼容的placeholder属性详解
2013/08/18 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
BootStrap selectpicker
2016/06/20 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
js实现中文实时时钟
2020/01/15 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
python打开网页和暂停实例
2014/09/30 Python
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
详解用python实现简单的遗传算法
2018/01/02 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
python文件拆分与重组实例
2018/12/10 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
Numpy 多维数据数组的实现
2020/06/18 Python
提高python代码运行效率的一些建议
2020/09/29 Python
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
英文版区域经理求职信
2013/10/23 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
干部考核评语
2014/04/29 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
乐山大佛导游词
2015/02/02 职场文书
大学生见习总结报告
2015/06/24 职场文书
2016年寒假家长评语
2015/10/10 职场文书
小学数学国培研修日志
2015/11/13 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python