练习题
留言板
<!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>
<script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="nr"></div>
<div>
内容：<textarea id="txt"></textarea>
<br />
<input type="button" value="提交" id="btn" />
</div>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
$("#btn").click(function(){
var nr=$("#txt").val();
var str=nr+"<br>";
$("#nr").append(str);//append追加内容
})
});
</script>
</html>
好友列表
<!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>
<script src="jquery-1.11.2.min.js"></script>
<style type="text/css">
*{ margin:0px auto; padding:0px}
#list{ width:150px; height:100px}
.user{ width:150px; height:26px; background-color:#999; margin-top:2px; color:white; text-align:center; line-height:26px; vertical-align:middle}
.user:hover{ cursor:pointer}
</style>
</head>
<body>
<h1>好友</h1>
<?php
$uid="zhangsan";
include("DBDA.class.php");
$db=new DBDA();
$sql="select Friend from friend where Me='{$uid}'";
$attr=$db->Query($sql);
?>
<div id="list">
<?php
foreach($attr as $v)
{
$fuid=$v[0];//好友用户名
$sqlname="select name from user where Uid='{$v[0]}'";
$aname=$db->Query($sqlname);
$fname=$aname[0][0];//好友的姓名
echo"<div class='user' bs='{$fuid}'>{$fname}</div>";
}
?>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
//点击选中的事件
$(".user").click(function(){
//清除选中项
$(".user").css("background-color","#999");
$(".user").attr("xz","0");
//让该项选中
$(this).css("background-color","#6CF");
//加一个选中属性
$(this).attr("xz","1");
alert($(this).attr("bs"));
})
//鼠标放上的事件
$(".user").mouseenter(function(){
$(this).css("background-color","#6CF");
})
//鼠标离开事件
$(".user").mouseout(function(){
if($(this).attr("xz")!="1")
$(this).css("background-color","#999");
})
});
</script>
</body>
</html>
文本框
<!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>
<script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<div>
<input type="text" class="txt" />
<input type="text" class="txt" />
<input type="text" class="txt" />
<input type="text" class="txt" />
</div>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
$(".txt").blur(function(){//blur失去焦点是触发
if($(this).val().trim()!="")
{
$(this).css("background-color","white");
}
else
{
$(this).css("background-color","#6CF");
}
})
});
</script>
</html>
球队列表
<!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>
<script src="jquery-1.11.2.min.js"></script>
<style type="text/css">
*{ margin:0px auto; padding:0px}
#wai{ width:100%; height:20px; margin-top:50px}
#left{ width:45%; height:300px; float:left; background-color:#9CF}
#middle{ width:10%; height:300px; float:left; background-color:#F9C}
#right{ width:45%; height:300px; float:left;background-color:#9CF}
.llist{ width:150px; height:26px; background-color:#999; margin-top:2px; color:white; text-align:center; line-height:26px; vertical-align:middle}
#one{ width:105px; height:26px; margin:100px 0px 0px 0px; background-color:#999; text-align:center; line-height:26px; vertical-align:middle; font-weight:bold}
#all{ width:105px; height:26px; margin:80px 0px 0px 0px; background-color:#999; text-align:center; line-height:26px; vertical-align:middle; font-weight:bold}
.rlist{ width:150px; height:26px; background-color:#999; margin-top:2px; color:white; text-align:center; line-height:26px; vertical-align:middle}
</style>
</head>
<body>
<div id="wai">
<div id="left">
<div class="llist">皇马</div>
<div class="llist">曼联</div>
<div class="llist">曼城</div>
<div class="llist">巴萨</div>
<div class="llist">米兰</div>
</div>
<div id="middle">
<div id="one">></div>
<div id="all">>></div>
</div>
<div id="right"></div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
//点击选中
$(".llist").click(function(){
//清除所有的选中
$(".llist").css("background-color","#999");
$(".llist").attr("xz",0);
//设置该项选中
$(this).css("background-color","#39F");
$(this).attr("xz",1);
})
//移动一项
$("#one").click(function(){
var list=$(".llist");
for(var i=0;i<list.length;i++)
{
//判断哪项选中
if(list.eq(i).attr("xz")==1)
{
//判断该值是否存在
var zhi=list.eq(i).text();
if(Has(zhi))
{
var str="<div class='rlist'>"+zhi+"</div>";
$("#right").append(str);
}
}
}
})
//移动所有的
$("#all").click(function(){
var llist=$(".llist");
for(var i=0;i<llist.length;i++)
{
var zhi=llist.eq(i).text();
if(Has(zhi))
{
var str="<div class='rlist'>"+zhi+"</div>";
$("#right").append(str);
}
}
})
});
function Has(zhi)
{
var list=$(".rlist");
var iscunzai=true;
for(var i=0;i<list.length;i++)
{
if(list.eq(i).text()==zhi)
{
iscunzai=false;
break;
}
}
return iscunzai;
}
</script>
</html>
浙公网安备 33010602011771号