<!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>

JS练习题 显示登入者相关好友的更多相关文章

  1. Linux显示登入系统的帐号名称和总人数

    Linux显示登入系统的帐号名称和总人数 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ who -q youhaidong youhaidong # 用户数= ...

  2. JS练习题（左侧菜单下拉+好友选中）

    题一.左侧菜单下拉 做题思路:先做菜单和子菜单,把子菜单默认隐藏.再用JS调样式. <style type="text/css"> *{ margin:0px auto ...

  3. last 列出登入系统的用户相关信息

    Linux last 命令介绍 功能说明:列出目前与过去登入系统的用户相关信息. 语法:    last [-adRx][-f <记录文件>][-n <显示列数>][帐号名称. ...

  4. Python socket编程 (2)--实现文件验证登入

    可以实现从客户端输入账号和密码然后发送到服务器进行验证,实现用户登入校正操作. 服务器: import socket import json server = socket.socket() serv ...

  5. Linux显示目前与过去登入系统的用户相关信息

    Linux显示目前与过去登入系统的用户相关信息 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ last youhaido pts/0 :0 Sat Jan 2 ...

  6. Linux显示目前登入系统的用户信息

    Linux显示目前登入系统的用户信息 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ who youhaidong :0 2015-01-26 22:43 (: ...

  7. 自制“低奢内”CSS3登入表单，包含JS验证，请别嫌弃哦。

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到 ...

  8. 零元学Expression Blend 4 - Chapter 25 以Text相关功能就能简单做出具有设计感的登入画面

    原文:零元学Expression Blend 4 - Chapter 25 以Text相关功能就能简单做出具有设计感的登入画面 本章将交大家如何运用Blend 4 内的Text相关功能做出有设计感的登 ...

  9. Node.js+Express+MongoDB数据库实现网页注册登入功能

    通过 Node.js + Express + MongoDB 实现网页注册账号 和 登入账号的功能 项目准备: 1: 事先准备好项目的页面 (首页页面 index.html)(登入页面 login.h ...

随机推荐

  1. android studio 出错

    http://blog.csdn.net/dhx20022889/article/details/44919905

  2. [收藏]Asp.net MVC生命周期

    一个HTTP请求从IIS移交到Asp.net运行时,Asp.net MVC是在什么时机获得了控制权并对请求进行处理呢?处理过程又是怎样的? 以IIS7中asp.net应用程序生命周期为例,下图是来自M ...

  3. 蓝牙BLE LINK LAYER剖析（二） -- PDU

    DATA FORMAT The Link Layer has only one packet format used for both advertising channel packets and ...

  4. 《黑客大曝光》实践部分——sql注入（7/8）

    SQL注入实践 由于<黑客大曝光>中涉及到形形色色的攻击方式,从软件到硬件,甚至还有物理锁的开锁教程,当中的很多教程很有趣,但是我没有相关的环境,实践起来不好操作,比如说,查点扫描我还可以 ...

  5. SQL Server存储机制

    1.区段 区段(extent)是用来为表和索引分配空间的基本存储单元.它由8个连续的64KB数据页组成. 基于区段(而不是实际使用空间)分配空间的概念的要点: 一旦区段已满,那么下一记录将要占据的空间 ...

  6. windows SVN搭建

    Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建SVN服务器. 现在Subversion已经迁移到apache网站上了,下载地址: http:// ...

  7. 完美解决 .txt文件在Mac上不能打开的问题

  8. Selenium2学习-021-WebUI自动化实战实例-019-设置浏览器窗口位置大小

    前文简略讲述了如何获取浏览器窗口的位置和大小,此文讲述如何通过 webdriver 设置浏览器窗口的位置和大小. 直接上码了...... /** * Set browser size for expe ...

  9. 修改phpmyadmin文件的最大上传大小

    修改php.ini 1.file_uploads on 是否允许通过HTTP上传文件的开关 2.upload_tmp_dir 文件上传至服务器上存储临时文件的地方,如果没指定就会用系统默认的临时文件夹 ...

  10. Linux系统中缺少GUI设备引起的HeadlessException

    缺少X11显示设置 Exception in thread "AWT-EventQueue-0" java.awt.HeadlessException: No X11 DISPLA ...