JQ 练习题
Posted 哔哩哔哩干杯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQ 练习题相关的知识，希望对你有一定的参考价值。
1.留言板
<!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); }) }); </script> </html>
2.好友信息
<!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"> /*auto 随机*/ *{ margin:0px auto; padding:0px} #list{ width:150px; height:100px;} .user{ width:150px; height:26; background-color:#3FC; margin-top:2px; color:#F00; text-align:center; line-height:26px; vertical-align:middle;} .user:hover{ cursor:pointer;} </style> </head> <body> <h1>好友信息</h1> <?php $uid="zhaoyi"; include("dbda.class.php"); $db=new dbda(); $sql="select firend from firend where me=\'{$uid}\'"; $attr=$db->Query($sql); ?> <div id="list"> <?php foreach($attr as $v) { $fuid=$v[0];//好友用户名 $sqlname="select name from users 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","#3FC"); $(".user").attr("xz","0"); //让该项选中 $(this).css("background-color","#CF3"); //加一个选中属性 $(this).attr("xz","1"); alert($(this).attr("bs")); }) //鼠标放上事件 $(".user").mouseenter(function(){ $(this).css("background-color","#CF3"); }) //鼠标离开事件 $(".user").mouseout(function(){ if($(this).attr("xz")!="1") { $(this).css("background-color","#3FC"); } }) }); </script> </body> </html>
3.通过输入信息使数据框变色
<!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) {
//.blur() 失去焦点时触发 .focus() 获得焦点时触发
$(".txt").blur(function(){
//.trim() 去空格
if($(this).val().trim())
{
$(this).css("background-color","#FFF");
}else
{
$(this).css("background-color","red");
}
})
});
</script>
</html>
4.通过单项添加和全部添加实现信息转移
<!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"> /*auto 随机*/ *{ margin:0px auto; padding:0px} #wai{ width:100%; height:200px; margin-top:50px} #left{ width:45%; height:200px; float:left; background-color:#0FF} #middle{ width:10%; height:200px; float:left; background-color:#0F0} #right{ width:45%; height:200px; float:left; background-color:#0FF} .llist{ width:150px; height:26; background-color:#3FC; margin-top:2px; color:#F00; text-align:center; line-height:26px; vertical-align:middle;} #one{ width:80px; height:23px; margin-top:70px; background-color:#9F9; text-align:center; line-height:26px; vertical-align:middle;} #all{ width:80px; height:23px; margin-top:30px; background-color:#9F9; text-align:center; line-height:26px; vertical-align:middle;} .rlist{ width:150px; height:26; background-color:#3FC; margin-top:2px; color:#F00; 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","#3FC") $(".llist").attr("xz",0); //设置该项选中 $(this).css("background-color","#666"); $(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"); //定义一个bool值 默认为true var cunzai=true; for(var i=0;i<list.length;i++) { if(list.eq(i).text()==zhi) { cunzai=false; break; } } return cunzai; } </script> </html>
以上是关于JQ 练习题的主要内容，如果未能解决你的问题，请参考以下文章