<!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. 统计学习方法笔记 -- Boosting方法

    AdaBoost算法 基本思想是,对于一个复杂的问题,单独用一个分类算法判断比较困难,那么我们就用一组分类器来进行综合判断,得到结果,"三个臭皮匠顶一个诸葛亮" 专业的说法, 强可 ...

  2. epoll 应用

    /*  * test_bittube.cpp  *  *  Created on: 2015年7月13日  *      Author: ting.guit  */ #include <bind ...

  3. 如何在html中插入视频

    如何在html中插入视频 1,插入优酷视频: 在优酷分享界面有个html代码,直接复制放入body中,定义div的align居中即可 2.插入本地视频:用video属性  用mp4格式 <vid ...

  4. 关于FireMonkey TGrid赋值的一点小研究

    FireMoneky的TStringGrid用法和VCL里面的差不多, 但是另一个TGrid实在是奇葩, 几乎找不到给单元格赋值的方法(除了使用LiveBind) 看了其源码, 发现只要给某个Colu ...

  5. Mschat控件示例升级错误处理方法

    将具有 3.5 版图表控件的 ASP.NET 3.5 网站升级到 ASP.NET 4 需要更改 web.config 和注册指令 将具有 3.5 版图表控件的 ASP.NET 3.5 网站升级到 AS ...

  6. 【Android开发学习笔记】【随笔】UI线程

    概念 UI线程 是Android中的主线程,涉及到UI方面的一些操作都需要在ui线程中进行操作 在非ui线程中想操作ui,就会报错 android.view.ViewRoot$CalledFromWr ...

  7. 通过IP获得IP所在地的三个接口

    http://ip.qq.com/cgi-bin/searchip?searchip1=180.168.144.211 http://ip.taobao.com/service/getIpInfo.p ...

  8. 针对JD-GUI

    switch(0){ case 1001: JSONObject jsoObj; String data = null; boolean isclose = false; try{ jsoObj = ...

  9. Selenium2学习-035-WebUI自动化实战实例-033-页面快照截图应用之三 -- 区域截图（专业版）

    之前有写过两篇博文讲述了 WebUI 自动化测试脚本中常用的截图方法,敬请参阅如下所示链接: 浏览器显示区域截图 浏览器指定区域截图 那么当需要截取的区域不在浏览器显示窗口范围之内时,之前的方法显然无 ...

  10. Java学习-019-Properties 文件读取实例源代码

    在这几天的学习过程中,有开发的朋友告知我,每个编程语言基本都有相应的配置文件支持类,像 Python 编程语言中支持的 ini 文件及其对应的配置文件读取类 ConfigParse,通过这个类,用户可 ...