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 相关文章推荐
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
createObjectURL方法实现本地图片预览
Sep 30 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 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
Stop SQL Server
2007/06/21 Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
Python教程之全局变量用法
2016/06/27 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
python文件编写好后如何实践
2020/07/07 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
香港交友网站:be2香港
2018/07/22 全球购物
2015年元旦文艺汇演主持词
2014/03/26 职场文书
小学生个人先进事迹材料
2014/05/08 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL