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 multibox 全选
Mar 22 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
JS控制表单提交的方法
Jul 09 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
JavaScript如何判断对象有某属性
Jul 03 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
function.inc.php超越php
2006/12/09 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
Highcharts入门之简介
2016/08/02 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
Vue之Watcher源码解析(2)
2017/07/19 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
python进程和线程用法知识点总结
2019/05/28 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
django API 中接口的互相调用实例
2020/04/01 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
华为的Java面试题
2014/03/07 面试题
骨干教师培训方案
2014/05/06 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
三行辞职书范文
2015/02/26 职场文书
保研推荐信格式
2015/03/25 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
配置Kubernetes外网访问集群
2022/03/31 Servers
在Docker容器中部署SQL Server
2022/04/11 Servers