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 相关文章推荐
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
动态的9*9乘法表效果的实现代码
May 16 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 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和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
Python中Unittest框架的具体使用
2019/08/27 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
Django跨域请求原理及实现代码
2020/11/14 Python
重构Python代码的六个实例
2020/11/25 Python
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
教师个人自我鉴定
2014/02/08 职场文书
安全负责人任命书
2014/06/06 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
MySQL开启事务的方式
2021/06/26 MySQL
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android
MySQL分布式恢复进阶
2022/07/23 MySQL