jquery ready(fn)事件使用介绍
更新时间：2013年08月21日 08:48:36 作者：
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数，下面有个示例，不懂的朋友可以学习下
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）选择“男”时
（2）选择“女”时
（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）选择“男”时
（2）选择“女”时
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了jquery判断元素是否隐藏的多种方法,本文总结了多种判断方法实例,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了jQuery中Find选择器用法,简单介绍了find选择器的功能,并结合实例分析了find选择器的具体使用方法,需要的朋友可以参考下2016-09-09
这篇文章主要为大家详细介绍了jQuery实现广告显示和隐藏动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
jQuery实现文件编码成base64并通过AJAX上传的方法
这篇文章主要介绍了jQuery实现文件编码成base64并通过AJAX上传的方法,涉及jQuery前台使用FileReader对象编码base64文件进行ajax上传及后台php处理相关操作技巧,需要的朋友可以参考下2018-04-04
图片上下切换效果,学习jquery的朋友可以参考下。2011-03-03
这篇文章主要为大家分享了Jquery日历插件e-calendar升级版,e-calendar是一个jQuery插件,创建一个事件日历它很容易使用,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
昨天看到一个园友的blog中有个页面下滚后出现用于"回到页面顶部"按钮的效果, 感觉挺不错的, 所以自己也写了一个, 用jQuery写是再简单不过了. 下面就直接给出代码了2011-06-06
解决jquery有正确返回值但不执行success函数的问题
今天小编就为大家分享一篇解决jquery有正确返回值但不执行success函数的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
本文给大家分享的是使用jQuery插件animateSlide制作多点滑动幻灯片特效，十分的炫酷，有需要的小伙伴可以参考下2015-06-06
这篇文章主要介绍了jQuery实现将div中滚动条滚动到指定位置的方法,涉及jQuery结合animate方法动态操作页面元素属性的相关技巧,需要的朋友可以参考下2016-08-08
最新评论