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解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
为Extjs加加速(javascript加速)
Aug 19 Javascript
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 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
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
PHP自定义多进制的方法
2016/11/03 PHP
google 搜索框添加关键字实现代码
2010/04/24 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
javascript常见操作汇总
2014/09/03 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
django将数组传递给前台模板的方法
2019/08/06 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
python下载的库包存放路径
2020/07/27 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
大四学生毕业自荐信
2013/11/07 职场文书
开办加工厂创业计划书
2014/01/03 职场文书
团干部培训方案
2014/06/03 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
销售会议开幕词
2016/03/04 职场文书
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js