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>
posted @ 2016-06-23 20:13 孤独夜莺阅读(256) 评论(0) 编辑收藏举报
刷新页面返回顶部
JS练习题 显示登入者相关好友

JS练习题显示登入者相关好友
