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 相关文章推荐
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
javascript中sort()的用法实例分析
Jan 30 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
基于AngularJS的简单使用详解
Sep 10 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
Sep 14 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 Javascript
微信小程序实现蓝牙打印
Sep 23 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 SOCKET编程详解
2015/05/22 PHP
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python入门篇之字典
2014/10/17 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
python中强大的format函数实例详解
2018/12/05 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
制冷与电控专业应届生求职信
2013/11/11 职场文书
展会邀请函范文
2014/01/26 职场文书
小学英语教学反思案例
2014/02/04 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
2014年维稳工作总结
2014/11/18 职场文书
会计工作态度自我评价
2015/03/06 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
2015年电教工作总结
2015/05/26 职场文书
2016年校长新年寄语
2015/08/17 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android