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 150px; 17 height:100px; 18 } 19 20 .user 21 { 22 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>
