jQuery基础ready

Posted on 2009-01-02 15:48 胡娟 阅读(657) 评论(1)  编辑  收藏 所属分类: jQuery
window.onload()函数执行的时候，要说明所有东西已经载入，包括图像和横幅。要知道较大的图片下载速度会比较慢，因此用户必须等待大图片下载完毕才能看到window.onload()执行的代码效果，需要很长等待的时间。
$(document).ready(function(){  });当DOM载入就可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序响应速度。这个方法纯粹是对向window.load事件注册事件的替代方法。通过这个方法可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数。
(document)：获取整个网页文档对象(类似于window.document)；
$(document).ready:获取文档对象就绪的时候。


制作双色表格例子：
html：
 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2<html xmlns="http://www.w3.org/1999/xhtml">
 3<head>
 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5<title>jquery</title>
 6<!--将jquery.js引进 -->
 7<script src="js/jquery.js" type="text/javascript"></script>
 8<!--将javascript.js引进 -->
 9<script  src="js/javascript.js"type="text/javascript"></script>
10<!--将stylecss.css引进 -->
11<link href="css/stylecss.css" rel="stylesheet" type="text/css" />
12</head>
13<body>
14<!--用class="stripe"来标识需要使用该效果的表格-->
15<table  class="stripe" border="0" cellspacing="0" cellpadding="0">
16<thead>
17  <tr>
18    <th >姓名</th>
19    <th >年龄</th>
20    <th >MSN</th>
21    <th >Email</th>
22  </tr>
23</thead>
24<tbody>
25  <tr>
26    <td>樊凯</td>
27    <td>23</td>
28    <td>fankai2008@gmail.com</td>
29    <td>35622334@qq.com</td>
30  </tr>
31  <tr>
32    <td>胡娟</td>
33    <td>23</td>
34    <td>hujuan2008@gmail.com</td>
35    <td>hujuan2008@gmail.com</td>
36  </tr>
37  <tr>
38    <td>qq</td>
39    <td>24</td>
40    <td>aa@126.com</td>
41    <td>aa@126.com</td>
42  </tr>
43  <tr>
44    <td>bb</td>
45    <td>23</td>
46    <td>bb@163.com</td>
47    <td>bb@163.com</td>
48  </tr>
49  <tr>
50    <td>cc</td>
51    <td>14</td>
52    <td>cc@qq.com</td>
53    <td>cc@qq.com</td>
54  </tr>
55  <tr>
56    <td>dd</td>
57    <td>38</td>
58    <td>dd@sina.com</td>
59    <td>dd@sina.com</td>
60  </tr>
61 </tbody>
62</table>
63</body>
64</html>
65

JavaScript：
 1// JavaScript Document
 2$(document).ready(function(){
 3    //鼠标移到class为stripe的表格tr上时，执行函数
 4        $(".stripe tr").mouseover(function(){
 5            //给这行添加class值为over，并且当鼠标移除时执行函数
 6            $(this).addClass("over");}).mouseout(function(){
 7            //移除该行的class
 8            $(this).removeClass("over");})
 9        //给class为stripe的表格的偶数行添加class值为alt
10        $(".stripe tr:even").addClass("alt");
11            
12});
css：
 1@charset "utf-8";
 2th {
 3    font-size: 18px;
 4    background-color: #339933;
 5    line-height: 20px;
 6    color: #FFFFFF;
 7    height: 30px;
 8}
 9td {
10    padding:6px 11px;
11    vertical-align:top;
12    text-align:center;
13    border-bottom-width: 1px;
14    border-bottom-style: solid;
15    border-bottom-color: #006600;
16}
17 
18td * {
19        padding:6px 11px;
20}
21 
22tr.alt td {
23    background-color: #99FF99;/*这行将给所有的tr加上背景色*/
24}
25 
26tr.over td {
27    background-color: #FFCC66;/*鼠标滑过高亮行的背景色*/
28}
29

Feedback

# re: jQuery基础ready  回复  更多评论   

2009-01-03 14:57 by 山风小子
不错！
有个小小建议，展示代码时请不要使用‘行号’，这样读者才能方便地其验证正确性并反馈 ;)

只有注册用户登录后才能发表评论。
网站导航:
 

posts - 28, comments - 5, trackbacks - 0, articles - 1

Copyright © 胡娟