jquery ready(fn)事件使用介绍


Posted in Javascript onAugust 21, 2013

1、事件简介
(1)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数;
(2)请确保在 <body> 元素的onload事件中没有注册函数,否则不会触发+$(document).ready()事件;
(3)可以在同一个页面中无限次地使用$(document).ready()事件;
(4)其中注册的函数会按照(代码中的)先后顺序依次执行。
2、事件格式
$(document).ready(function(){
//jQuery代码
});
3、实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>ready(fn)事件</title> 
<script type="text/javascript" src="jquery-2.0.3.js"></script> 
<style type="text/css"> 
body{ 
background-color:#CCCCFF; 
font-size:24px; 
font-weight:bold; 
text-align:center; 
} 
.body_div{ 
padding:20px 20px 20px 20px; 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("input[type='radio']").click(function(){ 
var se = $("input[name='sex'][type='radio']:checked").val(); 
if(se == "男"){ 
alert("男性"); 
} 
if(se == "女"){ 
alert("女性"); 
} 
}); 
}); 
</script> 
</head> 
<body> 
<div class="body_div"> 
<input type="radio" id="male" name="sex" value="男"/>男 
<input type="radio" id="female" name="sex" value="女"/>女 
</div> 
</body> 
</html>

4、结果如下:
(1)选择“男”时
jquery ready(fn)事件使用介绍 
(2)选择“女”时
jquery ready(fn)事件使用介绍
Javascript 相关文章推荐
分享别人写的一个小型js框架
Aug 13 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
js函数的延迟加载实现代码
Oct 11 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
PHP守护进程实例
Mar 06 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
javaScript面向对象继承方法经典实现
Aug 20 #Javascript
Table冻结表头示例代码
Aug 20 #Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 #Javascript
jQuery回车实现登录简单实现
Aug 20 #Javascript
jquery 延迟执行实例介绍
Aug 20 #Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 #Javascript
js获取指定日期前后的日期代码
Aug 20 #Javascript
You might like
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
php动态变量定义及使用
2015/06/10 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
用js编写留言板
2020/03/17 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
python列出目录下指定文件与子目录的方法
2015/07/03 Python
python字符类型的一些方法小结
2016/05/16 Python
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
Python微信库:itchat的用法详解
2017/08/14 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
Python函数中不定长参数的写法
2019/02/13 Python
Python字节单位转换实例
2019/12/05 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
中专生职业生涯规划书范文
2013/12/29 职场文书
经销商会议欢迎词
2014/01/11 职场文书
直接有效的自我评价
2014/01/11 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
2014年幼儿园元旦活动方案
2014/02/13 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang