hujuan's blog

隨筆分類

文章分類

J2SE(1) (rss)

隨筆檔案

文章檔案

2007年5月 (1)

jQuery基礎ready

Posted on 2009-01-02 15:48 胡娟閱讀(681) 評論(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

<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

//鼠標移到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";
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;/*鼠標滑過高亮行的背景色*/
28

}
29

Feedback

# re: jQuery基礎ready 回復 更多評論

2009-01-03 14:57 by 山風小子

不錯！
有個小小建議，展示代碼時請不要使用‘行號’，這樣讀者才能方便地其驗證正確性并反饋 ;)

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: jQuery基礎偽鏈接 jQuery基礎ready

公告

www.kaishengit.com

常用鏈接

我的鏈接

JavaOnRoad

積分與排名

積分 - 24673
排名 - 1547

閱讀排行榜

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

hujuan's blog

隨筆分類

文章分類

隨筆檔案

文章檔案

最新隨筆

最新評論

jQuery基礎ready

Feedback

# re: jQuery基礎ready 回復 更多評論

公告

常用鏈接

我的鏈接

積分與排名

閱讀排行榜

hujuan's blog

隨筆分類

文章分類

隨筆檔案

文章檔案

最新隨筆

最新評論

jQuery基礎ready

Feedback

# re: jQuery基礎ready 回復 更多評論

公告

常用鏈接

我的鏈接

積分與排名

閱讀排行榜

# re: jQuery基礎ready 回復更多評論