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)
Oct 01 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
jQuery动画与特效详解
Feb 01 Javascript
Html中 IFrame的用法及注意点
Dec 22 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 Javascript
在Vue 中获取下拉框的文本及选项值操作
Aug 13 Javascript
React列表栏及购物车组件使用详解
Jun 28 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 带逗号千位符数字的处理方法
2012/01/10 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
2011/09/19 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
跟老齐学Python之类的细节
2014/10/13 Python
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
Python 判断奇数偶数的方法
2018/12/20 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
家庭户外服装:Hawkshead
2017/11/02 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
体育教育毕业生自荐信
2013/11/21 职场文书
酒店拾金不昧表扬信
2014/01/18 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
整改报告格式
2014/11/06 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python