~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
addClass() ★★★
removeClass() ★★★
toggleClass() ★★★
-->
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function () {
$('#div1').addClass('box2 box4');
//添加多個class，可以用空格隔開；重復的class不會添加進去（JQ自動去重了）
$('#div1').removeClass('box2 box4');
//找到的class會被刪掉，沒有找到的class被JQ自動忽略了
$('#div1').toggleClass('box3');
//如果沒有該class，就自動加上；如果有了，就自動刪去
})
</script>
</head>
<body>
<div id="div1" class="box box2">aaaaaa</div>
</body>
</html>
~~~
***
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul,li{
padding:0;
margin:0;
list-style: none;
}
div{
width:200px;
height:200px;
border:1px solid #000;
display: inline-block;
position: relative;
vertical-align: middle;
}
ul{
position: absolute;
}
.active{
background: red;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function() {
$('li').click(function(){
$(this).toggleClass('active');
});
$('input[value=">>"]').click(function(){
$('#div1').find('li[class=active]').appendTo($('#div2').find('ul'));
$('li').attr('class','');
});
$('input[value="<<"]').click(function(){
$('#div2').find('li[class=active]').appendTo($('#div1').find('ul'));
$('li').attr('class','');
});
})
</script>
</head>
<body>
<div id="div1">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
<input type="button" value=">>">
<input type="button" value="<<">
<div id="div2">
<ul>
<li>444</li>
<li>555</li>
<li>666</li>
</ul>
</div>
</body>
</html>
~~~
