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 相关文章推荐
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
Javascript call和apply区别及使用方法
Nov 14 Javascript
给js文件传参数(详解)
Jul 13 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
JavaScript SHA512加密算法详细代码
Oct 06 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
es6函数name属性功能与用法实例分析
Apr 18 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
获取远程文件大小的php函数
2010/01/11 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
js Math 对象的方法
2013/09/01 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
Python实现端口检测的方法
2018/07/24 Python
使用numba对Python运算加速的方法
2018/10/15 Python
python五子棋游戏的设计与实现
2019/06/18 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
硕士研究生个人求职信
2013/12/04 职场文书
污水厂厂长岗位职责
2014/01/04 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
中文教师求职信
2014/02/22 职场文书
房屋转让协议书
2014/04/11 职场文书
白岩松演讲
2014/05/21 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
优秀员工事迹材料
2014/12/20 职场文书
先进单位申报材料
2014/12/25 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python