JQuery 练习题解析
1.制作简单的留言显示
<title>无标题文档</title>
<!--因为制作这个留言显示，我们是用JQuery代码，
因此，我们在这里引入JQuery包，这个JQuery包可以从网上下载-->
<script src="../jquery-1.11.2.min.js"></script>
</head>
<body>
<!--显示留言内容,在这里id的作用不是用来在CSS表中设置样式，
而是方便用JQuery取值的-->
<div id="nr">
</div>
<!--用于输入留言内容-->
<div>
<!--在这里我们用input,当然要留言的内容较多，也可以考虑使用textarea-->
内容：<textarea id="txt"></textarea>
<br />
<input type="button" value="提交" id="btn" />
</div>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
//在有的代码中，前面没有ready这一部分，
//在这里我们为了代码在运行过程中不出错，也使得整个代码更严谨，
//因此，我们在这里加上ready
$("#btn").click(function(){
//因此根据之前设置好的id,给这个提交按钮添加一个点击事件
//当点击提交的时候，文本框里的内容机会被提交上去
var nr = $("#txt").val();
//我们需要把取得留言内容放到最上边的div里，添加一个换行，清晰地展现出每条留言内容
var str = nr+"<br>";
//根据id取值，然后追加，append() 方法在被选元素的结尾（仍然在内部）插入指定内容。
$("#nr").append(str);
})
});
</script>
2.定义变量里面存登录者用户名，显示好友列表，鼠标放上换背景色，点击选中并弹出选中的用户名
根据用户名查询好友
<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:#63F;
margin-top:2px;
color:white;
text-align:center;
line-height:26px;
vertical-align:middle
}
.user:hover{ cursor:pointer;}<!--在这里设置背影颜色，鼠标放上去的时候变色，在下面用js代码后，会失灵，因此不在此设置颜色变化-->
</style>
</head>
<body>
<h1>好友信息</h1>
<?php //先写好登陆者
$uid = "zhangsan";
//因为本体连接了数据库，因此我们在这里引入DBDA
include("../DBDA.php");
$db = new DBDA();
//根据用户名查询好友，在friend表中登陆者的栏名为me
$sql = "select firend from firend where me='{$uid}'";
$attr = $db->Query($sql);
?>
<!--做一个div，用来显示好友，加一个id，控制样式-->
<div id="list">
<?php
//之前已经取到好友信息，因此在这里需要循环出来
foreach($attr as $v)//v代表好友名
{
$fuid = $v[0]; //好友用户名
//根据好友的用户名来查询好友名
$sqlname = "select name from users where uid = '{$v[0]}'";
$aname = $db->Query($sqlname);
$fname = $aname[0][0]; //好友的姓名
//显示好友的名称，bs存的用户名
echo "<div class='user' bs='{$fuid}'>{$fname}</div>";
}
?>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
//点击选中的事件
$(".user").click(function(){
//清除选中项，以后点击哪个哪个就变色
$(".user").css("background-color","#63F");
$(".user").attr("xz","0");
//让该项选中
$(this).css("background-color","#F30");
//加一个选中属性
$(this).attr("xz","1");
alert($(this).attr("bs"));
})
//鼠标放上的事件，鼠标放上后背景颜色改变
$(".user").mouseenter(function(){
$(this).css("background-color","#F30");
})
//鼠标离开的事件
$(".user").mouseout(function(){
if($(this).attr("xz")!="1")
{
$(this).css("background-color","#63F");
}
})
});
</script>
</body>
</html>
3.创建若干个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色
<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(){
if($(this).val().trim() != "")
{
$(this).css("background-color","white");
}
else
{
$(this).css("background-color","red");
}
})
});
</script>
</html>
4.选择球队,两个ul。被悬浮行高亮显示（背景是红色），点击球队将它放到另一个的球队列表
<title>无标题文档</title>
<script src="../jquery-1.11.2.min.js"></script>
<style type="text/css">
*{ margin:0px auto; padding:0px}
#wai{ width:100%;
height:300px;
margin-top:50px
}
#left{ width:45%;
height:300px;
float:left;
background-color:#0CF;
}
#middle{
width:10%;
height:300px;
float:left;
background-color:#FC3;
}
#right{
width:45%;
height:300px;
float:left;
background-color:#0CF;
}
.llist{
width:150px;
height:26px;
background-color:#63F;
margin-top:2px;
color:white;
text-align:center;
line-height:26px;
vertical-align:middle;
}
#one{ width:80px;
height:23px;
margin:100px 0px 0px 0px;
background-color:#0F3;
text-align:center;
line-height:23px;
vertical-align:middle;
font-weight:bold;
}
#all{
width:80px;
height:23px;
margin:10px 0px 0px 0px;
background-color:#0F3;
text-align:center;
line-height:23px;
vertical-align:middle;
font-weight:bold;}
.rlist{
width:150px;
height:26px;
background-color:#63F;
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","#63F")
$(".llist").attr("xz",0);
//设置该项选中
$(this).css("background-color","red");
$(this).attr("xz",1);
})
//移动一项
$("#one").click(function(){
//找到所有的，存到一个变量里，然后循环遍历
var list = $(".llist");
for(var i=0; i<list.length;i++)
{
//判断哪像选中
//eq()选择器选取带有指定 index 值的元素。index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。
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号