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 相关文章推荐
JS获取父节点方法
Aug 20 Javascript
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
jquery异步请求实例代码
Jun 21 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
文件编码导致jquery失效的解决方法
Jun 26 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
vue组件实例解析
Jan 10 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
在vue中安装使用vux的教程详解
Sep 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
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
基于文本的访客签到簿
2006/10/09 PHP
php处理复杂xml数据示例
2016/07/11 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
客户端静态页面玩分页
2006/06/26 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
videocapture库制作python视频高速传输程序
2013/12/23 Python
Python中的包和模块实例
2014/11/22 Python
Python入门学习之字符串与比较运算符
2015/10/12 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
cf战队收人口号
2014/06/21 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
Win10 Anaconda安装python-pcl
2022/04/29 Servers