*****************************************************************************************************************************************************************
.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');
});
});
</script>
</head>
<body>
<!--<ul id="selected-plays">
<li>comedies
<ul>
<li><a href="/asyoulikeit/">As You Like It</a></li>
<li>All'a Well That Ends Well</li>
<li> A Midsummer Night's Dream</li>
<li>Twelfth Night</li>
</ul>
</li>
<li>Tragedies
<ul>
<li><a href="hamlet.pdf">Hamlet</a></li>
<li>Macbeth</li>
<li>Romeo and Juliet</li>
</ul>
</li>
<li>Histories
<ul>
<li>Henry IV (<a href="mailto:348943973@qq.com">emai</a>)
<ul>
<li>Part I</li>
<li>Part II</li>
</ul>
</li>
<li><a href="http://www.shakespeare.co.uk/henry.htm">Henry V</a></li>
<li>Richard</li>
</ul>
</li>
</ul>-->
<table cellspacing="0px">
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td></td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1604</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr> <tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Henry IV,Part I</td>
<td>History</td>
<td>1599</td>
</tr>
<tr>
<td>Henry V</td>
<td>History</td>
<td>1599</td>
</tr>
</table>
<br />
<br />
<div class="divparent" style="border-top: 5px solid red; cursor:pointer;">
<h3>style switcher</h3>
<div class="button" id="switcher-default">
Default
</div>
<div class="button" id="switcher-narrow">
Narrow Column
</div>
<div class="button" id="switcher-large">
Larges Print
</div>
</div><br/><br />
1、url可以通过location.href得到；
2、http://hao123.com/weboa/formname?openform&unid=1234567
若想得到unid=1234567：
url.substring(url.indexOf("&")+1,url.length);(注意：substring()后面的s一定是小写；indexOf()中的"O"一定是大写)
若想得到openform和unid=1234567：
var var1=url.subString(url.indexOf("?")+1,url.length)
var arr=var1.split("&");
var openform=arr[0]
var unid=arr[1]
<br />
<br />
<!--<div class="foo" style="border:2px solid blue; padding-top:30px;">
<span class="bar" style="border:2px solid red; padding-top:10px;">
<a href="#">
the quick brown fox jumps over the lazy dog
</a>
</span>
<p class="pp" style="border:2px solid red;">
How razorback-jumping frogs can level six piqued gymnasts1
</p>
</div>-->
<div class="switcher" style="border: 5px solid #69F; cursor:pointer; width:600px;">
<h3>style switcher</h3>
<table>
<tr>
<td>
<div class="but" id="switcher-def">
Default
</div>
</td>
<td>
<div class="but" id="switcher-nar">
Narrow Column
</div>
</td>
<td>
<div class="but1" id="switcher-lar">
Larges Print
</div>
</td>
</tr>
</table>
</div>
<br />
<br />
1、url可以通过location.href得到；
2、http://hao123.com/weboa/formname?openform&unid=1234567
若想得到unid=1234567：
url.substring(url.indexOf("&")+1,url.length);(注意：substring()后面的s一定是小写；indexOf()中的"O"一定是大写)
若想得到openform和unid=1234567：
var var1=url.subString(url.indexOf("?")+1,url.length)
var arr=var1.split("&");
var openform=arr[0]
var unid=arr[1]
</body>
</html>
/**************************************************************************
对应的css
**************************************************************************/
@charset "utf-8";
/* CSS Document */
.horizontal {
float:left;
list-style:none;
margin:10px;
}
.sub-level {
background-color: #CCC;
}
a {
color:#00c;
}
a.mailto{
background:url(mail.gif) no-repeat right top;
padding-right:10px;
}
a.pdflink{
background:url(pdf.gif) no-repeat right top;
padding-right:25px;
}
a.henrylink{
background-color:#fff;
padding:2px;
border:1px solid #000;
}
tr{
background-color:#fff;
}
.alt{
background-color:#ccc;
}
.cell01{
background-color:#CFC;
}
.cell02{
background-color:#C9F;
}
.cell03{
background-color:#C3F;
}
.cell04{
background-color:#F0F;
}
.cell05{
background-color:#FCF;
}
.cell06{
background-color:#696;
}
.highlight{
background-color:#FF9;
}
.childendiv{
float:left;
width:100px;
border:1px solid black;
margin-left:10px;
text-align:center;
}
.chapter{
font-size:36px;
}
.hidden{
display:none;
}
.hover{
cursor:pointer;
background-color:#afa;
}
.td{
width:200px;
}
.but{
border:1px solid #C3C;
cursor:default;
}