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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
[JS]点出统计器
Oct 11 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
jQuery实现返回顶部功能
Feb 23 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
Vue动态组件实例解析
Aug 20 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 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基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
php split汉字
2009/06/05 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
jquery实现瀑布流效果分享
2014/03/26 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
javascript验证form表单数据的案例详解
2019/03/25 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
python如何代码集体右移
2020/07/20 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
授权委托书格式模板
2014/04/03 职场文书
团支部推优材料
2014/05/21 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
如何用PHP实现多线程编程
2021/05/26 PHP
如何理解PHP核心特性命名空间
2021/05/28 PHP
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS
浅谈MySQL函数
2021/10/05 MySQL