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 点击按钮显示和隐藏层的代码
Jul 25 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
jquery map方法使用示例
Apr 23 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
javascript表单正则应用
Feb 04 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
JS数组交集、并集、差集的示例代码
Aug 23 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
vue实现列表滚动的过渡动画
Jun 29 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文件上传类
2017/07/04 PHP
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
Vuex简单入门
2017/04/19 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
在Python中使用__slots__方法的详细教程
2015/04/28 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
24岁生日感言
2014/01/13 职场文书
学习雷锋精神心得体会范文
2014/03/12 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
2015年度女工工作总结
2015/10/22 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书