练习题

留言板

<!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{ 150px; height:100px}
.user{ 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{ 100%; height:20px; margin-top:50px}
#left{ 45%; height:300px; float:left; background-color:#9CF}
#middle{ 10%; height:300px; float:left; background-color:#F9C}
#right{ 45%; height:300px; float:left;background-color:#9CF}
.llist{ 150px; height:26px; background-color:#999; margin-top:2px; color:white; text-align:center; line-height:26px; vertical-align:middle}
#one{ 105px; height:26px; margin:100px 0px 0px 0px; background-color:#999; text-align:center; line-height:26px; vertical-align:middle; font-weight:bold}
#all{ 105px; height:26px; margin:80px 0px 0px 0px; background-color:#999; text-align:center; line-height:26px; vertical-align:middle; font-weight:bold}
.rlist{ 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>

相关阅读:
阿里云服务器绑定微信公众号服务器配置问题记录
 Junit 报错： Failed to load ApplicationContext
ERROR 1819 (HY000): Your password does not satisfy the current policy requirements
idea 多项目部署JRebel
sql优化1
sql优化
 IntelliJ IDEA 2017版 spring-boot使用Spring Data JPA搭建基础版的三层架构
 IntelliJ IDEA 2017版 spring-boot 报错Consider defining a bean of type 'xxx' in your configuration问题解决方案
 IntelliJ IDEA 2017版 spring-boot 实现jpa基本部署,通过实体类自动建立数据库
 Nginx的两种负载均衡搭建（Tomcat版）
原文地址：https://www.cnblogs.com/hamilton/p/5616928.html