jquery ready(fn)事件使用介紹
更新時(shí)間:2013年08月21日 08:48:36 作者:
當(dāng)DOM載入就緒可以查詢(xún)及操縱時(shí)綁定一個(gè)要執(zhí)行的函數(shù),下面有個(gè)示例,不懂的朋友可以學(xué)習(xí)下
1、事件簡(jiǎn)介
(1)當(dāng)DOM載入就緒可以查詢(xún)及操縱時(shí)綁定一個(gè)要執(zhí)行的函數(shù);
(2)請(qǐng)確保在 <body> 元素的onload事件中沒(méi)有注冊(cè)函數(shù),否則不會(huì)觸發(fā)+$(document).ready()事件;
(3)可以在同一個(gè)頁(yè)面中無(wú)限次地使用$(document).ready()事件;
(4)其中注冊(cè)的函數(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載入就緒可以查詢(xún)及操縱時(shí)綁定一個(gè)要執(zhí)行的函數(shù);
(2)請(qǐng)確保在 <body> 元素的onload事件中沒(méi)有注冊(cè)函數(shù),否則不會(huì)觸發(fā)+$(document).ready()事件;
(3)可以在同一個(gè)頁(yè)面中無(wú)限次地使用$(document).ready()事件;
(4)其中注冊(cè)的函數(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庫(kù)中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)文章
jQuery實(shí)現(xiàn)廣告顯示和隱藏動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)廣告顯示和隱藏動(dòng)畫(huà),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-07-07jQuery實(shí)現(xiàn)文件編碼成base64并通過(guò)AJAX上傳的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)文件編碼成base64并通過(guò)AJAX上傳的方法,涉及jQuery前臺(tái)使用FileReader對(duì)象編碼base64文件進(jìn)行ajax上傳及后臺(tái)php處理相關(guān)操作技巧,需要的朋友可以參考下2018-04-04解決jquery有正確返回值但不執(zhí)行success函數(shù)的問(wèn)題
今天小編就為大家分享一篇解決jquery有正確返回值但不執(zhí)行success函數(shù)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08jQuery插件animateSlide制作多點(diǎn)滑動(dòng)幻燈片
本文給大家分享的是使用jQuery插件animateSlide制作多點(diǎn)滑動(dòng)幻燈片特效,十分的炫酷,有需要的小伙伴可以參考下2015-06-06jQuery實(shí)現(xiàn)將div中滾動(dòng)條滾動(dòng)到指定位置的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)將div中滾動(dòng)條滾動(dòng)到指定位置的方法,涉及jQuery結(jié)合animate方法動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-08-08