<!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. laravel 取sql语句

    \DB::connection()->enableQueryLog(); some sql action... $query = \DB::getQueryLog(); $lastQuery = ...

  2. Machine Learning in Action -- Logistic regression

    这个系列,重点关注如何实现,至于算法基础,参考Andrew的公开课 相较于线性回归,logistic回归更适合用于分类 因为他使用Sigmoid函数,因为分类的取值是0,1 对于分类,最完美和自然的函 ...

  3. 如何离线安装chrome插件【转】

    http://blog.csdn.net/shuideyidi/article/details/45674601 原文链接 前言------可以不看: 实习做web,要弄单点登录SSO和验证Contr ...

  4. Python之 for循环\while循环

    list或tuple可以表示一个有序集合.如果我们想依次访问一个list中的每一个元素呢?比如 list: L = ['Adam', 'Lisa', 'Bart'] print L[0] print ...

  5. MyBatis代码自动生成

    MyBatis的代码自动生成的功能,由于MyBatis属于一种半自动的ORM框架,所以主要的工作就是配置Mapping映射文件,但是由于手写映射文件很容易出错,所以可利用MyBatis生成器自动生成实 ...

  6. js解析Json字符串的方法

      要把一个xml字符串转(“1,2,3,4,5,6,7,8,1,2”)换成数组的形式,每个值都应该是number类型的,想当然的就用了split方法,结果...问题来了,服务器要求数组的值是数字,而 ...

  7. 【Java IO】FileInputStream 和 FileOutputStream

    class FileInputStream extends  InputStream implements Closeable

  8. Java Socket Option

    选项 public final static int TCP_NODELAY = 0x0001; public final static int SO_REUSEADDR = 0x04; public ...

  9. 20145211 《Java程序设计》第九周学习总结——垂死病中惊坐起

    教材学习内容总结 JDBC简介 JDBC是用于执行SQL的解决方案,开发人员使用JDBC的标准接口,数据库厂商则对接口进行操作,开发人员无须接触底层数据库驱动程序的差异性 JDBC标准分为两个部分:J ...

  10. 采用CSS3设计的登陆界面

    body部分内容: <body> <form id="form_id" name="form_id" method="get&quo ...