hujuan's blog
BlogJava
首页
新随笔
联系
聚合
管理
随笔分类
JAVA(12)
(rss)
JavaScript(2)
(rss)
jQuery(2)
(rss)
JSP(1)
(rss)
Live(1)
(rss)
Oracle(6)
(rss)
Other Database
(rss)
文章分类
J2SE(1)
(rss)
随笔档案
2009年7月 (4)
2009年6月 (7)
2009年1月 (2)
2008年10月 (2)
2008年3月 (3)
2007年7月 (2)
2007年6月 (2)
2007年5月 (6)
文章档案
2007年5月 (1)
最新随笔
1. bean的作用域
2. spring2.5实例化bean的三种方式
3. dom4j创建解析xml
4. jdom创建解析xml
5. JPA+Hibernate 3.3 学习小结——一对一双向关联映射
6. JPA+Hibernate 3.3 学习小结——多对多关系关系映射
7. JPA+Hibernate 3.3 学习小结——双向多对一关联及级联操作
8. JPA+Hibernate 3.3 学习小结——使用JQL语句
9. JPA+Hibernate 3.3 学习小结——增删改查
10. JPA+Hibernate 3.3 学习小结——基本属性映射
11. JPA+Hibernate 3.3 学习小结——第一个JPA程序
12. jQuery基础伪链接
13. jQuery基础ready
14. CSS学习笔记(二)
15. CSS学习笔记(一)
最新评论
1. re: 添加动态验证码
评论内容较长,点击标题查看
--mable
2. re: JPA+Hibernate 3.3 学习小结——基本属性映射[未登录]
非常感谢,你的学习材料,我也要好好学下JPA和HIBERNATE才行啊
--ssh
3. re: JDBC 工作原理[未登录]
不错
--aa
4. re: jQuery基础ready
不错!
有个小小建议,展示代码时请不要使用‘行号’,这样读者才能方便地其验证正确性并反馈 ;)
--山风小子
5. re: Sql Server 调用存储过程
宝贝加油,你是最棒的!不要灰心,前途是光明的!!!
--kay
jQuery基础ready
Posted on 2009-01-02 15:48
胡娟
阅读(663)
评论(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";
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新闻
知识库
C++博客
博问
管理
相关文章:
jQuery基础伪链接
jQuery基础ready
公告
www.kaishengit.com
常用链接
我的随笔
我的文章
我的评论
我的参与
最新评论
我的链接
JavaOnRoad
kay's blog
积分与排名
积分 - 24271
排名 - 1550
阅读排行榜
1. Sql Server 调用存储过程(2778)
2. JPA+Hibernate 3.3 学习小结——双向多对一关联及级联操作(2446)
3. JPA+Hibernate 3.3 学习小结——第一个JPA程序(2017)
4. JDBC 工作原理(1879)
5. JPA+Hibernate 3.3 学习小结——使用JQL语句(1561)
posts - 28, comments - 5, trackbacks - 0, articles - 1
Copyright © 胡娟