jquery从入门到精通免费Word格式.docx
《jquery从入门到精通免费Word格式.docx》由会员分享，可在线阅读，更多相关《jquery从入门到精通免费Word格式.docx（43页珍藏版）》请在冰豆网上搜索。
{
background-color:
Red;
}
.green
Green;
.blue
Blue;
/style>
$（document）.ready（
function（）
$（"
div"
）.addClass（"
blue"
）;
//$（"
#olID>
li"
green"
）.hover（
$（this）.addClass（"
red"
）
},
$（this）.removeClass（"
}）;
li:
last"
}）
/head>
body>
form
id="
form1"
div>
ol
olID"
li>
Terry.Feng.C<
/li>
冯瑞涛<
fengruitao@<
/ol>
/div>
/form>
/body>
/html>
jQuery选择器的使用
jQuery能如此的流行，很重要的一点也许就是他有非常强大且灵活的选择器，下面是一个使用选择器的例子，同样你可以复制下面的代码运行一下。
font-size:
x-small;
font-weight:
bold;
.yellow
Yellow;
x-large;
li
padding:
0
3px;
.horizontal
float:
left;
list-style:
none;
margin:
10px;
.sub-level
background:
#ffc;
a
color:
#00f;
a.mailto
#f00;
a.pdflink
#090;
a.mysite
text-decoration:
border-bottom:
1px
dotted
.table-heading
#ff0;
th
text-align:
.odd
.even
#eee;
.highlight
.italic
font-style:
italic;
.bold
#0066ff;
#ffffff;
line-height:
20px;
/*
*/
height:
30px;
//我们使用
$（document）.ready（）
包住我们的
jQuery
代码，DOM
加载完毕后就可以使它所有东西都可用。
$（document）.ready（function（）
$（'
span:
contains（冯瑞涛）'
）.addClass（'
red'
//
添加风格，让list横向排列
//选择#selected-plays
下面的li元素
#selected-plays
li'
horizontal'
//递归所有li，自定义选择器:
not
排除.horizontal类的元素
not（.horizontal）'
sub-level'
使用XPath
属性选择器
为链接分配Class
//正则表达式，获得所有内容为mailto:
开始的
a[href^="
mailto:
]'
mailto'
//正则表达式，内容为.pdf
结尾的
a[href$="
.pdf"
pdflink'
//正则表达式，内容任何位置为finehappy的
a[href*="
finehappy"
mysite'
//
//为th的父对象tr添加类
th'
）.parent（）.addClass（'
table-heading'
//tr，除了内容存在th
属性
的并且TR索引值匹配为偶数的元素
tr:
not（[th]）:
even'
//奇数
odd'
//$（'
not（[th]）'
）.filter（'
:
//同样可以实现
//发现存在WPF的td
td:
contains（"
WPF"
）'
highlight'
//自定义选择器，内容中带有WPF
的同辈（同级别）为td的元素
高亮显示
）~
td'
一下这些实现可以得到上面同样的结果
，代表了jQuery选择器的灵活和链接能力
1．得到包含
Henry
的单元格，然后它的兄弟（不只是下一个的兄弟）。
加入这个类：
Henry"
）.siblings（）.addClass（'
2．得到包含
的单元格，得到它的父亲，然后查找所有在它里面大于0的单元格（0
是第一个单元格），加入这个类：
）.parent（）.find（'
gt（0）'
）
.addClass（'
3．得到包含
的单元格，得到它的父亲，查找所有在它里面，然后过滤那些除了包
含
Henry的，加入这个类：
）.not（'
4．得到包含
的单元格，得到它的父亲，查找在它的孩子里面的第二个单元格，然
后加入这个类，取消上一个
.find（）
，在孩子里查找第三个单元格，并加入这个类：
eq
（1）'
）.addClass（
'
）.end（）.find（'
eq
（2）'
span>
冯瑞涛，祝愿
找到我博客的同学
2009年
身体健康<
/span>
ul
selected-plays"
北京
ul>
a
href="
finehappy
网站<
/a>
宣武<
/ul>
上海
finemoon.pdf"
书籍下载<
浦东<
广州
Mailto：
fengruitao@"
我的邮件<
级别
1<
2<
天河<
h2>
图书阅读<
/h2>
table
border="
0"
cellspacing="
1"
cellpadding="
5"
tr>
th>
图书名称
/th>
作者
出版日期
/tr>
td>
WPF
揭秘
/td>
Adam
Nathan
2007年1月
WCF
****
2007年2月
SharePoint
Service
3.0
开发指南
Todd
C.
Bleeker
2007年3月
/table>
jQuery的事件处理
jQuery事件处理的例子，你可以复制下面的代码，运行并对照注释，快速理解jQuery常用的事件处理方法。
Head1"
.poem
5em;
.chapter
1em;
#switcher
right;
#ddd;
border:
solid
#000;
.9em;
#switcher
h3
0;
按钮类
*/#switcher
.button
width:
100px;
center;
#fff;
border-top:
3px
#888;
border-left:
#444;
border-right:
#header
clear:
both;
body.large
#container
1.5em;
body.narrow
400px;
.selected
.hidden
display:
.hover
cursor:
pointer;
#afa;
升级会员 