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插件 大家可以收藏一下
Feb 07 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
如何编写高质量JS代码(续)
Feb 25 Javascript
js实现跨域的多种方法
Dec 25 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
微信小程序App生命周期详解
Jan 31 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
Apr 23 Javascript
解决layui table表单提示数据接口请求异常的问题
Sep 24 Javascript
JavaScript实现动态留言板
Mar 16 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模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
优秀志愿者事迹材料
2014/02/03 职场文书
农村葬礼主持词
2014/03/31 职场文书
测绘工程专业求职信
2014/07/15 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
如何有效防止sql注入的方法
2021/05/25 SQL Server