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>
时间： 2024-08-04 02:05:33