JQuery 练习题解析
Posted 江南渔雾
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于JQuery 练习题解析的主要内容，如果未能解决你的问题，请参考以下文章
Visual Studio 2012-2019的130多个jQuery代码片段。
markdown 在WordPress中使用jQuery代码片段