<!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>
<title>jquery test</title>
<style>
.s1{
color:blue;
}
.t1{
color:red;
background-color:blue;
}
.t2{
color:yellow;
background-color:#dddddd;
}
</style>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
//加载时执行
$(function(){
//addClass 添加样式 removeClass 去除样式
$('#testspan').addClass('s1');
//table:thead、tbody、tfoot
//even 偶数 ，odd 奇数，first 第一个，last 最后一个
$('#tb tbody tr:even').addClass('t2');
//点击id为 showHidden 时执行
$('#showHidden').click(function(){
//显示 隐藏 切换 toggele
$('#showHiddenSpan').toggle();
//判断是否显示状态
if($('#showHiddenSpan').is(':visible')){
//当前按钮隐藏
$(this).val('隐藏');
}else{
//当前按钮显示
$(this).val('显示');
//将标签插入到指定标签之前 insertBefore 之后 insertAfter
$('<a href="http://baidu.com" target="_blank">百度一下，你就知道！</a>').insertAfter('#testp');
//$('<a href="http://baidu.com" target="_blank">百度一下，你就知道！</a>').insertBefore('#testp');
//将标签插入到指定标签之内 在前 prependTo 在后 appendTo
$('<a href="http://baidu.com" target="_blank">百度一下，你就知道！</a>').prependTo('#testp');
//$('<a href="http://baidu.com" target="_blank">百度一下，你就知道！</a>').appendTo('#testp');
}
}
)
//标签显示内容改变
$('h1').text('456');
//标签显示html
$('h1').html('<a href="###"> 1123</a>');
});
function change(){
//先删除原有样式再改变
$('#tb tbody tr:even').removeClass();
$('#tb tbody tr:even').addClass('t1');
$('#tb tbody tr:odd').addClass('t2');
}
</script>
</head>
<body>
<h1>123</h1>
<span id="testspan">span</span>
<p id="testp">jquery test p</p>
<span id="showHiddenSpan">show/hidden</span>
<br>
<table id="tb">
<thead>
<tr><th>姓名</th><th>年龄</th></tr>
</thead>
<tbody>
<tr><td>a</td><td>24</td></tr>
<tr><td>b</td><td>22</td></tr>
<tr><td>c</td><td>21</td></tr>
<tr><td>d</td><td>20</td></tr>
<tr><td>e</td><td>24</td></tr>
<tr><td>f</td><td>23</td></tr>
<tbody>
<tfoot>
</tfoot>
</table>
<input type="button" onclick="change()" value="改变" />
<input type="button" id="showHidden" value="隐藏" />
</body>
</html>