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 相关文章推荐
实用javaScript技术-屏蔽类
Aug 15 Javascript
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
javascript获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
jQuery实现平滑滚动到指定锚点的方法
Mar 20 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
angular.js实现购物车功能
Oct 23 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
世界上最短的数字判断js代码
Sep 09 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网站地图生成类示例
2014/01/13 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
PHP中header用法小结
2016/05/23 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
JQuery优缺点分析说明
2011/04/10 Javascript
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
django rest framework 自定义返回方式
2020/07/12 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
运动会入场词50字
2014/02/20 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
五年级学生期末评语
2014/12/26 职场文书
幸福终点站观后感
2015/06/04 职场文书
七年级作文之冬景
2019/11/07 职场文书
德劲DE1105机评
2022/04/05 无线电