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 强制刷新页面的实现代码
Dec 13 Javascript
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
javascript继承机制实例详解
Nov 20 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
JavaScript DOM常用操作代码汇总
Jul 03 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
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
php下使用SimpleXML 处理XML 文件
2010/02/27 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
生成二维码方法汇总
2014/12/26 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
Python获取网页上图片下载地址的方法
2015/03/11 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
大学生毕业自我评价范文分享
2013/11/07 职场文书
费用会计岗位职责
2014/01/01 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
农村党员一句话承诺
2014/05/30 职场文书
小学生环保标语
2014/06/13 职场文书
应届大专生求职信
2014/06/26 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技