JS练习题 显示登入者相关好友
Posted o0孤独夜莺0o
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS练习题 显示登入者相关好友相关的知识,希望对你有一定的参考价值。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>相关好友练习题</title> 6 <script src="jquery-1.11.2.min.js"></script> 7 <style type="text/css"> 8 9 * 10 { 11 margin:0px auto; 12 padding:0px; 13 } 14 #list 15 { 16 width:150px; 17 height:100px; 18 } 19 20 .user 21 { 22 width:150px; /*宽*/ 23 height:26px; /*高*/ 24 background-color:#0FF; /*背景色*/ 25 margin-top:2px; 26 color:#CCC; /*div内部文字的颜色*/ 27 text-align:center; /*对齐方式*/ 28 line-height:26px; /*垂直对齐方式*/ 29 vertical-align:middle; 30 } 31 </style> 32 </head> 33 34 <body> 35 <h1>好友信息</h1> 36 <!--要求从数据库里面的users表里面查到登入人员的相关好友--> 37 <?php 38 $uid = "zhangsan"; 39 $db = new mysqli("localhost","root","","aaaaa"); 40 !mysqli_connect_error() or die("连接失败!"); 41 //根据登入者的姓名(me=\'{$uid}\')在firend表中firend这一列中查找登入者好友的用户名 42 $sql = "select firend from firend where me=\'{$uid}\'"; 43 $r = $db->query($sql);//调用SQL语句 44 $attr = $r->fetch_all(); 45 ?> 46 <!--要根据$attr数组里面的内容来显示--> 47 <!--第一个div用来显示好友信息,需要用样式表来控制div的大小--> 48 <div id="list"> 49 <!--根据登入者的好友来创造内层的div--> 50 <?php 51 foreach($attr as $v)//$v是一个一维数组,因为我们只查询了firend列,所以$v里面就只有一个值(用户名) 52 { 53 $fuid = $v[0]; //取到好友的用户名,定义一个变量($fuid)进行接收 54 55 $sqlname = "select name from users where uid = \'{$v[0]}\'";//根据好友的用户名去查询users中的name 56 57 //执行SQL语句 58 $aname = $db->query($sqlname);//返回一个二维数组,定义一个变量($aname)进行接收 59 $w = $aname->fetch_row(); 60 $fname = $w[0]; //好友的姓名取出来放到一个变量里面($fname) 61 //查询出来的是一个name值,因为查询出来就只有一个值所以查询的时候用两个[0][0]来查询 62 echo "<div class=\'user\' bs=\'{$fuid}\'>{$fname}</div>";//中间显示的是好友的名称,好友姓名是在$fname里面存着的 63 //要统一设置样式需要加class,自定义一个属性来存储用户名的属性(bs) 64 65 } 66 ?> 67 </div> 68 <script type="text/javascript"> 69 $(document).ready(function(e) { 70 71 72 //点击选中的事件 73 $(".user").click(function() {//给class为user的所有div加上click点击事件 74 75 76 $(".user").css("background-color","#0FF")//清除掉选中项的背景色换成原来的背景色 77 //给多个元素添加同一个事件要用关键字this来找,修改背景色等属性的关键字是css 78 $(".user").attr("xz","0");//选中属性,非选中时xz=0 79 $(this).css("background-color","#F0F");//让该项选中,选中时div的时候背景色要改变 80 81 $(this).attr("xz","1");//加一条选中属性,选中时xz=1 82 alert($(this).attr("bs"));//输出登入者好友的用户名 83 84 }) 85 86 87 //鼠标放上的事件 88 $(".user").mouseenter(function(){ 89 $(this).css("background-color","#F0F"); 90 }) 91 //鼠标离开的事件 92 $(".user").mouseout(function() { 93 if($(this).attr("xz")!="1") 94 { 95 $(this).css("background-color","#0FF"); 96 } 97 }); 98 }); 99 100 </script> 101 </body> 102 </html>
以上是关于JS练习题 显示登入者相关好友的主要内容,如果未能解决你的问题,请参考以下文章
spring练习,在Eclipse搭建的Spring开发环境中,使用set注入方式,实现对象的依赖关系,通过ClassPathXmlApplicationContext实体类获取Bean对象(代码片段