<!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></title>
<style type="text/css">
.class1{ background-color:Red}
.class2{ background-color:Blue}
.class3{ font-size:50px} /*也可以写成下面的值,安娜,安娜别把把我丢在这里*/
.class3{ font-size::xx-large}
.class4{ counter-reset:inherit}
</style>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
/*
//JQuery计算器
$(function () {
$("#bnt1").click(function () {
var $t1 = $("#txt1").val();
var $t2 = $("#txt2").val();
var t1 = parseInt($t1,10);
var t2 = parseInt($t2,10);
$("#txt3").val(t1 + t2);
})
})
//注册倒计时。
var dateTime = 5;
var intervalID;
$(function () {
$("#bnt2").attr("disabled", true).siblings("#bnt3").attr("disabled", true);
$("#bnt3").hide();//hide()是隐藏元素
intervalID = setInterval("countDown()", 1000);
})
function countDown() {
if (dateTime <= 0) {
$("#bnt2").attr("disabled", false).siblings("#bnt3").attr("disabled", false);
$("#bnt3").show();//show()是显示元素
$("#bnt2").val("同意");
clearInterval(intervalID);
return;
}
dateTime--;
$("#bnt2").val("请仔细阅读,还剩下【" + dateTime + "】秒");
}
//论坛的无刷新评论
$(function () {
$("#bnt5").click(function () {
var txt = $("#txt5").val();
var txtarea = $("#txtarea").val();
//if (txt == "" || txtarea == "") {
if ($("#txt5").val().length <= 0 || $("#txtarea").val().length<=0) {
alert("标题或者内容不能为空");
return;
}
var tr = $("<tr><td>标题:" + txt + "</td></tr><tr><td>" + txtarea + "</td></tr>");
$("#tab1").append(tr);
$("#txt5").val("");
$("#txtarea").val("");
})
})
//点击<ol>下的某个<li>内容,将其移除添加到另外一个<ol>下的<li>里去
$(function () {
$("#ol1 li").mouseover(function () {
$(this).css("color", "red").siblings().css("color", "black").click(function () {
$(this).css("color", "black").appendTo($("#ol2"))
})
});
})
//节点替换
$(function () {
$("#bnt6").click(function () {
$("br").replaceWith("<hr/>");
})
})
//式样操作
//《样式的添加》
$(function () {
$("#bnt7").click(function () {
$("#div1").addClass("class3")
});
})
//《样式的切换》
$(function () {
$("#bnt8").click(function () {
$("#div1").toggleClass("class1");
});
})
//《样式的删除》
$(function () {
$("#bnt9").click(function () {
$("#div1").removeClass("class1");
});
})
*/
</script>
</head>
<body>
<input type="text" id="txt1" />+<input type="text" id ="txt2" /><input type="button" id ="bnt1" value="=" /><input type="text" id="txt3" /><br />
<textarea cols="20" rows="5">注册</textarea><br />
<input type="button" id="bnt2" value="同意"/> <input type="button" id="bnt3" value="不同意"/>
<table id="tab1">
<tr><td>匿名 沙发</td></tr>
</table>
<input type="text" id="txt5" /><br />
<textarea rows="5" cols="16" id="txtarea"></textarea><br />
<input type="button" value="发表评论" id="bnt5" /><br />
<ol id="ol1" ><!--style="float:left;width:30%"-->
<li>湖南</li>
<li>广东</li>
<li>上海</li>
<li>北京</li>
</ol>
<ul id="ol2"> <!--style="float:left;width:30%"--> </ul>
<br />
<input type="button" value="替换" id="bnt6" />
<div id="div1">地方大幅度的</div>
<input type="button" id="bnt7" value="addClass"/>
<input type="button" id="bnt8" value="toggleClass" />
<input type="button" id="bnt9" value="removeClass" />
</body>
</html>