JS练习题 显示登入者相关好友
2016-06-23 20:13
330 查看
<!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>
相关文章推荐
- arcgis api for javascript 4.0 安装部署
- js 获取浏览器版本信息(全)
- 性能之js位置
- JS实现手机振动
- j2ee项目中jsp第一行报错
- (数据类型-Number的浮点型)JavaScript权威指南笔记4.1
- Codewars简单使用和 其中一道题,用JavaScript实现一个函数,求一个正数的次大数字,拿自己的解法和大神相比,简直对不起JavaScript给我提供的 那么多便利
- javascript中正则表达式的基础语法
- JS eval()函数
- js基本数据类型引用类型深复制浅复制
- angular.js通过URL获取json并显示代码
- sessionstorage,localstorage和cookie之间的区别
- jsp输出九九乘法表
- js限制显示字数,其他由三个点表示
- jstree的demo
- 将form中的值转换为键值对函数,Json.parse和json.stringify()用法
- js设置获取删除cookie
- js-sdk分享
- Javascript中函数相关知识点3(面试必备)
- gulp配置实现修改js、css、html自动刷新