jquery ready(fn)事件使用介紹
更新時間：2013年08月21日 08:48:36 作者：
當DOM載入就緒可以查詢及操縱時綁定一個要執(zhí)行的函數(shù)，下面有個示例，不懂的朋友可以學習下
1、事件簡介
（1）當DOM載入就緒可以查詢及操縱時綁定一個要執(zhí)行的函數(shù)；
（2）請確保在 <body> 元素的onload事件中沒有注冊函數(shù)，否則不會觸發(fā)+$(document).ready()事件；
（3）可以在同一個頁面中無限次地使用$(document).ready()事件；
（4）其中注冊的函數(shù)會按照（代碼中的）先后順序依次執(zhí)行。
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、結(jié)果如下：
（1）選擇“男”時
（2）選擇“女”時
（1）當DOM載入就緒可以查詢及操縱時綁定一個要執(zhí)行的函數(shù)；
（2）請確保在 <body> 元素的onload事件中沒有注冊函數(shù)，否則不會觸發(fā)+$(document).ready()事件；
（3）可以在同一個頁面中無限次地使用$(document).ready()事件；
（4）其中注冊的函數(shù)會按照（代碼中的）先后順序依次執(zhí)行。
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、結(jié)果如下：
（1）選擇“男”時
（2）選擇“女”時
您可能感興趣的文章:
- jquery事件的ready()方法使用詳解
- JavaScript的jQuery庫中ready方法的學習教程
- jquery $(document).ready()和window.onload的區(qū)別淺析
- jQuery中ready事件用法實例
- jQuery的ready方法詳解
- 提取jquery的ready()方法單獨使用示例
- jquery中的$(document).ready()使用小結(jié)
- Jquery中"$(document).ready(function(){ })"函數(shù)的使用詳解
- JQuery的ready函數(shù)與JS的onload的區(qū)別詳解
- 深入分析jQuery的ready函數(shù)是如何工作的(工作原理)
相關(guān)文章
這篇文章主要介紹了jquery判斷元素是否隱藏的多種方法,本文總結(jié)了多種判斷方法實例,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了jQuery中Find選擇器用法,簡單介紹了find選擇器的功能,并結(jié)合實例分析了find選擇器的具體使用方法,需要的朋友可以參考下2016-09-09
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)廣告顯示和隱藏動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
jQuery實現(xiàn)文件編碼成base64并通過AJAX上傳的方法
這篇文章主要介紹了jQuery實現(xiàn)文件編碼成base64并通過AJAX上傳的方法,涉及jQuery前臺使用FileReader對象編碼base64文件進行ajax上傳及后臺php處理相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
圖片上下切換效果,學習jquery的朋友可以參考下。2011-03-03
這篇文章主要為大家分享了Jquery日歷插件e-calendar升級版,e-calendar是一個jQuery插件,創(chuàng)建一個事件日歷它很容易使用,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
昨天看到一個園友的blog中有個頁面下滾后出現(xiàn)用于"回到頁面頂部"按鈕的效果, 感覺挺不錯的, 所以自己也寫了一個, 用jQuery寫是再簡單不過了. 下面就直接給出代碼了2011-06-06
解決jquery有正確返回值但不執(zhí)行success函數(shù)的問題
今天小編就為大家分享一篇解決jquery有正確返回值但不執(zhí)行success函數(shù)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
本文給大家分享的是使用jQuery插件animateSlide制作多點滑動幻燈片特效，十分的炫酷，有需要的小伙伴可以參考下2015-06-06
jQuery實現(xiàn)將div中滾動條滾動到指定位置的方法
這篇文章主要介紹了jQuery實現(xiàn)將div中滾動條滾動到指定位置的方法,涉及jQuery結(jié)合animate方法動態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-08-08