<!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. 图解SQL多表关联查询

      图解SQL多表关联查询     网上看了篇文章关于多表连接的,感觉很好,记录下来,以便日后自己学习  内连接     左连接     右连接       全外连接   1. 查两表关联列相等的数据 ...

  2. 运行EFDC出现这样的错误：forrt1:severe<157>:Program Exception-access violation

    经过检查是由于TQSER出现读写错误,原来我的数据输入文件的时间是427天,后来延长到639,但其中有一个点的时间仍然维持在427.故此出现这个错误.EFDC是用Fortran编译的,通过debug才 ...

  3. PHP5 mysqli 教程

    mysqli提供了面向对象和面向过程两种方式来与数据库交互,分别看一下这两种方式. 1．面向对象 在面向对象的方式中,mysqli被封装成一个类,它的构造方法如下: __construct ([ st ...

  4. sql CRUD 增删改查复习汇总

    1.创建数据库create database 数据库名称删除数据库drop database 数据库名称2.创建表create table 表名(    列名 类型(长度) 自增长 主键 非空,)自增 ...

  5. GCD的简单介绍

    一)GCD 的使用方式 dispatch_async(dispatch_queue_t queue, dispatch_block_t block); async表明运行方式 queue则是你把任务交 ...

  6. eclipse Maven -->web project

    http://blog.chinaunix.net/uid-26959955-id-3248053.html http://blog.csdn.net/wilsonke/article/details ...

  7. Python之集合(set)

    一种语言它越便捷,开发效率越高,初学阶段就会越困难.因为语言的设计者帮你造了大量的轮子,你就要掌握如何使用这些轮子.所以,对初学Python来说,记忆的东西很多. 进入正题. 集合就像是抛弃了值(va ...

  8. importSTV的使用

    一:由HDFS将数据直接导入到HBase中 1.生成TSV文件 2.内容 3.上传到HDFS 4.运行 export HBASE_HOME=/etc/opt/modules/hbase-0.98.6- ...

  9. Windows下Memcache的安装与在php中使用

    memcache dll插件和测试例子下载地址: http://pecl.php.net/package/memcache Windows下Memcache的安装方法 Memcached官方:http ...

  10. C# 字符串的截取和替换

    1.取字符串的前n个字符 (1)string str1=str.Substring(0,n); (2)string str1=str.Remove(i,str.Length-n); 2.去掉字符串的前 ...