.addClass() 向取得的元素添加class即类，而该元素原来的类不会被去掉，
如果想添加别的属性用attr()----attr({'id':'value'}) 相对的是：removeAttr('id');
******************************************************************************************************************************************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title>无标题文档</title>
< link rel="stylesheet" type="text/css" href="Untitled-2.css" />
< script type="text/javascript" src="jquery-1.6.2.js"></script>
< script type="text/javascript">
$(document).ready(function(){
//通过选择符选取元素
$('#selected-plays > li').addClass('horizontal');
$('#selected-plays li:not(.horizontal)').addClass('sub-level');
$('a[href^=mailto]').addClass('mailto');
$("a[href$='.pdf']").addClass('pdflink');
$("a[href^='http'][href*='henry']").addClass('henrylink');
$("tr:even").addClass('alt');//$("tr:odd").addClass('alt');
//通过连缀来取得元素
$("td:contains('Tragedy')").addClass('cell01');
$("td:contains('Henry')").parent().children().addClass('cell02');
$("td:contains('Tragedy')").next().andSelf().addClass('cell03');
$("td:contains('Comedy')").nextAll().andSelf().addClass('cell04');
$("td:contains('Comedy')").prev().andSelf().addClass('cell05');
$("td:contains('Macbeth')").prevAll().andSelf().addClass('cell06');
//通过连缀取得元素
$("td:contains('Henry')")//取的所有包含‘Henry’的单元格
.parent()//取得它的父元素
.find("td:eq(1)")//取得第二个td元素
.addClass('highlight')//为取得的td元素添加highlight类
.end()//恢复到所有包含'Henry'的父元素
.find("td:eq(2)")//取得第三个td元素
.addClass('highlight');//为该元素添加highlight类
//事件
$('h3').nextAll().addClass('childendiv');
$('#switcher-large').bind('click',function(){//为div添加样式
$('#switcher-large').removeClass('button');//移除class
$(this).addClass('chapter');//this指的是绑定事件的对象
});
//事件绑定的简写
/*
$('#switcher-large').click(function(){//为div添加样式
$('#switcher-large').removeClass('button');//移除class
$(this).addClass('chapter');//this指的是绑定事件的对象
});*/
//复合事件：点击第一次时执行toggle里面的第一个函数，点击第二才是执行第二个函数……如果都执行完就再循环
$('h3').toggle(
function(){
$('.button').addClass('hidden');
},
function(){
$('.button').removeClass('hidden');
});
//hover（）跟toggle一样，也可以接受都多个函数，第一个函数在鼠标进入元素是执行，第二个函数会在鼠标离开元素时执行
$('.button').hover(
function(){
$(this).addClass('hover');
},
function(){
$(this).removeClass('hover');
})
//通过事件对象来改变时间旅程
$('.divparent').click(function(event){
if(event.target==this){
$('.divparent').children().toggleClass('hidden')
}
})
//事件冒泡：点击<td>中的div时，也会触发到<table>外面<div>事件
/*$
('td').addClass('td');
$('.but').addClass('but');
$('.switcher').click(function(){
$('.switcher .but').toggleClass('hidden');
});
*/
//事件目标：可以有效的解决事件冒泡；
$('.switcher').click(function(event){
if(event.target==this){
$('.switcher .but').toggleClass('hidden');
}
});
/*$('.switcher').click(function(event){
if($(event.target).is('.but')){
$('body').removeClass();
if(event.target.id=='switcher-nar'){
$('body').addClass('large');
}
else if(event.target.id=='switcher-lar'){
$('body').addClass('large');
}
$('.switcher .but').removeClass('selected');
$(event.target).addClass('selected');
event.stopPropagation();
}
});*/
//移除事件：
/*
$('.but').click(function(){
$('.switcher').unbind();//移除事件
});*/
//只绑定一次就解除用one()
$('.but1').one('click',function(){
$('.but1').addClass('hidden');
});
});