jquery ready(fn)事件使用介绍

  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)事件使用介绍