hujuan's blog

隨筆分類

文章分類

J2SE(1) (rss)

隨筆檔案

文章檔案

2007年5月 (1)

jQuery基礎(chǔ)ready

Posted on 2009-01-02 15:48 胡娟閱讀(681) 評(píng)論(1) 編輯收藏所屬分類: jQuery

window.onload()函數(shù)執(zhí)行的時(shí)候，要說(shuō)明所有東西已經(jīng)載入，包括圖像和橫幅。要知道較大的圖片下載速度會(huì)比較慢，因此用戶必須等待大圖片下載完畢才能看到window.onload()執(zhí)行的代碼效果，需要很長(zhǎng)等待的時(shí)間。
$(document).ready(function(){ });當(dāng)DOM載入就可以查詢及操縱時(shí)綁定一個(gè)要執(zhí)行的函數(shù)。這是事件模塊中最重要的一個(gè)函數(shù)，因?yàn)樗梢詷O大地提高web應(yīng)用程序響應(yīng)速度。這個(gè)方法純粹是對(duì)向window.load事件注冊(cè)事件的替代方法。通過(guò)這個(gè)方法可以在DOM載入就緒能夠讀取并操縱時(shí)立即調(diào)用你所綁定的函數(shù)。
(document)：獲取整個(gè)網(wǎng)頁(yè)文檔對(duì)象(類似于window.document)；
$(document).ready:獲取文檔對(duì)象就緒的時(shí)候。

制作雙色表格例子：
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

<title>jquery</title>
6

7

9

11

</head>
13

<body>
14

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

//鼠標(biāo)移到class為stripe的表格tr上時(shí)，執(zhí)行函數(shù)
4

$(".stripe tr").mouseover(function(){
5

//給這行添加class值為over，并且當(dāng)鼠標(biāo)移除時(shí)執(zhí)行函數(shù)
6

$(this).addClass("over");}).mouseout(function(){
7

//移除該行的class
8

$(this).removeClass("over");})
9

//給class為stripe的表格的偶數(shù)行添加class值為alt
10

$(".stripe tr:even").addClass("alt");
11

12

});

css：

1

@charset "utf-8";
2

th {
3

font-size: 18px;
4

background-color: #339933;
5

line-height: 20px;
6

color: #FFFFFF;
7

height: 30px;
8

}
9

td {
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

18

td * {
19

padding:6px 11px;
20

}
21

22

tr.alt td {
23

background-color: #99FF99;/*這行將給所有的tr加上背景色*/
24

}
25

26

tr.over td {
27

background-color: #FFCC66;/*鼠標(biāo)滑過(guò)高亮行的背景色*/
28

}
29

Feedback

# re: jQuery基礎(chǔ)ready 回復(fù) 更多評(píng)論

2009-01-03 14:57 by 山風(fēng)小子

不錯(cuò)！
有個(gè)小小建議，展示代碼時(shí)請(qǐng)不要使用‘行號(hào)’，這樣讀者才能方便地其驗(yàn)證正確性并反饋 ;)

新用戶注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問(wèn) 管理
相關(guān)文章: jQuery基礎(chǔ)偽鏈接 jQuery基礎(chǔ)ready

公告

www.kaishengit.com

常用鏈接

我的鏈接

JavaOnRoad

積分與排名

積分 - 24673
排名 - 1547

閱讀排行榜

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