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 相关文章推荐
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
javascript读写json示例
Apr 11 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
express.js中间件说明详解
Mar 19 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
个人小程序接入支付解决方案
May 23 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
js验证账户名是否重复
May 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
使用数据库保存session的方法
2006/10/09 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
Hadoop中的Python框架的使用指南
2015/04/22 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
佳能法国商店:Canon法国
2019/02/14 全球购物
五水共治捐款倡议书
2014/05/14 职场文书
入股合作协议书
2014/10/12 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
车队安全员岗位职责
2015/02/15 职场文书
换届选举主持词
2015/07/03 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python
Win11 S Mode版本泄露 正式上线后叫做Windows 11 SE
2021/11/21 数码科技
vue+echarts实现多条折线图
2022/03/21 Vue.js
Python开发五子棋小游戏
2022/05/02 Python
python中 Flask Web 表单的使用方法
2022/05/20 Python
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL