<!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. 11号了,还有三天上线-改bug

    +(NSDictionary *)replacedKeyFromPropertyName { return  @{ @"doctorId": @"id" }; ...

  2. Open Sourcing Kafka Monitor

    https://engineering.linkedin.com/blog/2016/05/open-sourcing-kafka-monitor     https://github.com/lin ...

  3. json一些特点

    1:mina框架中客户端信息到服务端信息的输出格式为json, 原因:json通过key-value对的集合,和xml相比,json数据的体积更加小,传输效率高,容易解析 缺点:可读性不高 2:

  4. AndEngine

    AndEngine http://www.oschina.net/question/54100_16765

  5. NRF51822之GPIOTE使用

    ---恢复内容开始--- 在上篇介绍nrf51822的GPIOTE http://www.cnblogs.com/libra13179/p/5336580.html 我们现在开始下水游泳. /** @ ...

  6. 我的第一个chrome扩展（0）——目标

    当前有两个方向: 一.实现一个自动解码的地址栏监视器 扩展程序在后台不断监视地址栏输入,地址栏输入并回车后检查输入,若输入符合解码条件则调用网站信息进行解码,并将结果输出到地址栏,否则不改变: 初始阶 ...

  7. express 查看版本号

    新安装了express,但是当查看版本号输入: express -v 时出现如下错误: 网上查找了相关资料才发现express查看版本 的命令是 express -V (即V大写) 再次尝试: 发现同 ...

  8. Selenium2学习-030-WebUI自动化实战实例-028-获取元素位置及大小

    自动化测试过程中,有时需要获取元素的位置.大小,以获取元素的位置,通过 Actions 模拟鼠标,进行相对坐标操作.例如,有些元素定位不方便,或者需要对某一元素相对区域范围进行暴力点击测试,此时就需要 ...

  9. Windows-006-映射网络驱动器图文详解

    此文主要讲述 Win7 中,如何映射网络驱动器,一般用于网络共享时.敬请亲们参阅,若有不足之处,敬请大神指正,不胜感激! 打开计算机,选择工具栏中的 映射网络驱动器,依据下图中的操作进行映射网络驱动器 ...

  10. 【转】(转)【Android】Paint的效果研究

    转自:http://wpf814533631.iteye.com/blog/1847661 (转)[Android]Paint的效果研究 博客分类: android   在Paint中有很多的属性可以 ...