jquery ready(fn)事件使用介紹
更新時(shí)間：2013年08月21日 08:48:36 作者：
當(dāng)DOM載入就緒可以查詢及操縱時(shí)綁定一個(gè)要執(zhí)行的函數(shù)，下面有個(gè)示例，不懂的朋友可以學(xué)習(xí)下
1、事件簡介
（1）當(dāng)DOM載入就緒可以查詢及操縱時(shí)綁定一個(gè)要執(zhí)行的函數(shù)；
（2）請確保在 <body> 元素的onload事件中沒有注冊函數(shù)，否則不會(huì)觸發(fā)+$(document).ready()事件；
（3）可以在同一個(gè)頁面中無限次地使用$(document).ready()事件；
（4）其中注冊的函數(shù)會(huì)按照（代碼中的）先后順序依次執(zhí)行。
2、事件格式
$(document).ready(function(){
//jQuery代碼
});
3、實(shí)例
<!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、結(jié)果如下：
（1）選擇“男”時(shí)
（2）選擇“女”時(shí)
（1）當(dāng)DOM載入就緒可以查詢及操縱時(shí)綁定一個(gè)要執(zhí)行的函數(shù)；
（2）請確保在 <body> 元素的onload事件中沒有注冊函數(shù)，否則不會(huì)觸發(fā)+$(document).ready()事件；
（3）可以在同一個(gè)頁面中無限次地使用$(document).ready()事件；
（4）其中注冊的函數(shù)會(huì)按照（代碼中的）先后順序依次執(zhí)行。
2、事件格式
$(document).ready(function(){
//jQuery代碼
});
3、實(shí)例
復(fù)制代碼 代碼如下:
<!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、結(jié)果如下：
（1）選擇“男”時(shí)
（2）選擇“女”時(shí)
您可能感興趣的文章:
- jquery事件的ready()方法使用詳解
- JavaScript的jQuery庫中ready方法的學(xué)習(xí)教程
- jquery $(document).ready()和window.onload的區(qū)別淺析
- jQuery中ready事件用法實(shí)例
- jQuery的ready方法詳解
- 提取jquery的ready()方法單獨(dú)使用示例
- jquery中的$(document).ready()使用小結(jié)
- Jquery中"$(document).ready(function(){ })"函數(shù)的使用詳解
- JQuery的ready函數(shù)與JS的onload的區(qū)別詳解
- 深入分析jQuery的ready函數(shù)是如何工作的(工作原理)
相關(guān)文章
如何在頁面上同時(shí)使用 jQuery 和其他框架？2013-04-04
jQuery.get、jQuery.getJSON、jQuery.post無法返回JSON問題的解決方法
在WEB項(xiàng)目中，經(jīng)常會(huì)使用到j(luò)Query進(jìn)行AJAX請求，但是自從使用了.net 3.5以后，以往寫的請求語句就有些小問題了，就是返回的始終是xml,而并不是JSON2011-07-07
jquery限定文本框只能輸入數(shù)字（整數(shù)和小數(shù)）
這篇文章主要介紹了jquery限定文本框只能輸入數(shù)字，包括整數(shù)和小數(shù)，感興趣的小伙伴們可以參考一下2016-01-01
jQuery的ajax和遍歷數(shù)組json實(shí)例代碼
下面小編就為大家?guī)硪黄猨Query的ajax和遍歷數(shù)組json實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
由點(diǎn)擊頁面其它地方隱藏div所想到的jQuery的delegate
在網(wǎng)頁開發(fā)的過程中經(jīng)常遇到的一個(gè)需求就是點(diǎn)擊一div內(nèi)部做某些操作，而點(diǎn)擊頁面其它地方隱藏該div。比如很多導(dǎo)航菜單，當(dāng)菜單展開的時(shí)候，就會(huì)要求點(diǎn)擊頁面其它非菜單地方，隱藏該菜單2013-08-08
在本教程中，我將告訴你如何使用一些常見的形式領(lǐng)域jquery.maxlength.js2011-09-09
禁止選中文字在某些時(shí)候還是蠻有必要的，比如不想讓他人復(fù)制自己的文章之類的，下面為大家介紹下具體的實(shí)現(xiàn)方，而且兼容目前主流瀏覽器2013-09-09
網(wǎng)頁應(yīng)用程序需要對(duì)豐富的內(nèi)容提供簡單易用的上傳和操作方式，但是這樣會(huì)給只有少數(shù)圖片處理技能的用戶造成很大的困難。圖片剪切是最基本的圖片處理技術(shù)，這個(gè)詳細(xì)的教程將包括在jQuery庫上創(chuàng)建此參加的每一個(gè)步驟。2011-08-08
基于JQuery實(shí)現(xiàn)相同內(nèi)容合并單元格的代碼
我們就中和下利用JQuery來和他一個(gè)table里面相同內(nèi)容的單元格，這里代碼跟大家分享下，希望對(duì)大家有用2011-01-01
在一下網(wǎng)頁中，一些人會(huì)用到iframe，dom獲取頁面中的iframe還是很簡單的2011-01-01