<!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"> *
{
margin:0px auto;
padding:0px;
}
#list
{
width:150px;
height:100px;
} .user
{
width:150px; /*宽*/
height:26px; /*高*/
background-color:#0FF; /*背景色*/
margin-top:2px;
color:#CCC; /*div内部文字的颜色*/
text-align:center; /*对齐方式*/
line-height:26px; /*垂直对齐方式*/
vertical-align:middle;
}
</style>
</head> <body>
<h1>好友信息</h1>
<!--要求从数据库里面的users表里面查到登入人员的相关好友-->
<?php
$uid = "zhangsan";
$db = new MySQLi("localhost","root","","aaaaa");
!mysqli_connect_error() or die("连接失败！");
//根据登入者的姓名（me='{$uid}'）在firend表中firend这一列中查找登入者好友的用户名
$sql = "select firend from firend where me='{$uid}'";
$r = $db->query($sql);//调用SQL语句
$attr = $r->fetch_all();
?>
<!--要根据$attr数组里面的内容来显示-->
<!--第一个div用来显示好友信息，需要用样式表来控制div的大小-->
<div id="list">
<!--根据登入者的好友来创造内层的div-->
<?php
foreach($attr as $v)//$v是一个一维数组，因为我们只查询了firend列，所以$v里面就只有一个值（用户名）
{
$fuid = $v[0]; //取到好友的用户名,定义一个变量（$fuid）进行接收 $sqlname = "select name from users where uid = '{$v[0]}'";//根据好友的用户名去查询users中的name //执行SQL语句
$aname = $db->query($sqlname);//返回一个二维数组，定义一个变量($aname)进行接收
$w = $aname->fetch_row();
$fname = $w[0]; //好友的姓名取出来放到一个变量里面（$fname）
//查询出来的是一个name值，因为查询出来就只有一个值所以查询的时候用两个[0][0]来查询
echo "<div class='user' bs='{$fuid}'>{$fname}</div>";//中间显示的是好友的名称，好友姓名是在$fname里面存着的
//要统一设置样式需要加class，自定义一个属性来存储用户名的属性（bs） }
?>
</div>
<script type="text/javascript">
$(document).ready(function(e) { //点击选中的事件
$(".user").click(function() {//给class为user的所有div加上click点击事件 $(".user").css("background-color","#0FF")//清除掉选中项的背景色换成原来的背景色
//给多个元素添加同一个事件要用关键字this来找，修改背景色等属性的关键字是css
$(".user").attr("xz","0");//选中属性，非选中时xz=0
$(this).css("background-color","#F0F");//让该项选中，选中时div的时候背景色要改变 $(this).attr("xz","1");//加一条选中属性，选中时xz=1
alert($(this).attr("bs"));//输出登入者好友的用户名 }) //鼠标放上的事件
$(".user").mouseenter(function(){
$(this).css("background-color","#F0F");
})
//鼠标离开的事件
$(".user").mouseout(function() {
if($(this).attr("xz")!="1")
{
$(this).css("background-color","#0FF");
}
});
}); </script>
</body>
</html>
