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中为String对象添加trim,ltrim,rtrim方法
Sep 22 Javascript
基于Jquery的温度计动画效果
Jun 18 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 Javascript
原生js实现自定义消息提示框
Nov 19 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
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
详解python分布式进程
2018/10/08 Python
实时获取Python的print输出流方法
2019/01/07 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
关于python中的xpath解析定位
2020/03/06 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
Python如何实现远程方法调用
2020/08/07 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
2013年大学生的自我鉴定
2013/10/24 职场文书
工厂仓管员岗位职责
2014/01/01 职场文书
新学期开学标语
2014/06/30 职场文书
美丽人生观后感
2015/06/03 职场文书