.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');
});
});