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使用prototype定义对象类型(转)[
Dec 22 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
动态加载jquery库的方法
Feb 12 Javascript
javascript动态创建链接的方法
May 13 Javascript
jquery选择器简述
Aug 31 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
从理论角度讨论JavaScript闭包
Apr 03 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
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中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
php字符编码转换之gb2312转为utf8
2013/10/28 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
python中dir函数用法分析
2015/04/17 Python
python实现K最近邻算法
2018/01/29 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
Python持续监听文件变化代码实例
2020/07/22 Python
Python识别验证码的实现示例
2020/09/30 Python
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
排查整治工作方案
2014/06/09 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
win10下go mod配置方式
2021/04/25 Golang
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers