多选

选中变色

<!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="../../popwindow/jquery-1.11.2.min.js"></script>

<style type="text/css">

.a

{

    width:100px;

    height:50px;

    border:#000 solid ;

}

.list

{

    width:100px;

    top:50px;

}

.op

{

    width:100px;

    height:50px;

    margin-top:4px;

    background: #CCC;

}

</style>

</head>

<body>

 <div class="a">好友列表</div>

 <div class="list"></div>

 <?php

 $dsn="mysql:host=localhost;dbname=1";//数据源

 $db=new PDO($dsn,"root","");//造对象建连接

 $sql1="select * from qq ";

 $re1=$db->query($sql1);

 $attr1=$re1->fetchALl();

 foreach($attr1 as $u)

 {

     echo"<div class='op'>{$u[1]}</div>";

 }

 ?>

<script type="text/javascript">

$(document).ready(function(e) {

    //初始化加标识便于操作

    $(".op").css("background","#CCC")

    $(".op").attr("cz","0")//加入标识

    //鼠标一入一出变色

    $(".op").mouseover(function(e) {

        //判断是否被选中非选中运行

        if($(this).attr("cz")=="0")

        {

        $(this).css("background","#CF0")

        }

    });

    $(".op").mouseout(function(e) {

        //判断是否被选中非选中运行

        if ($(this).attr("cz")=="0")

        {

        $(this).css("background","#CCC")

        }

    });

    // 选中

    $(".op").click(function(e) {

      if  ($(this).attr("cz")=="0")

      {

           $(this).attr("cz","1")

        $(this).css("background","#C66" )

      }

      else if( $(this).attr("cz")=="1")

      {

           $(this).attr("cz","0")

        $(this).css("background","#CF0")

      }

    });

});

</script>

单选变色

<!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="../../popwindow/jquery-1.11.2.min.js"></script>

<style type="text/css">

.a

{

    width:100px;

    height:50px;

    border:#000 solid ;

}

.list

{

    width:100px;

    top:50px;

}

.op

{

    width:100px;

    height:50px;

    margin-top:4px;

    background: #CCC;

}

</style>

</head>

<body>

 <div class="a">好友列表</div>

 <div class="list"></div>

 <?php

 $dsn="mysql:host=localhost;dbname=1";//数据源

 $db=new PDO($dsn,"root","");//造对象建连接

 $sql1="select * from qq ";

 $re1=$db->query($sql1);

 $attr1=$re1->fetchALl();

 foreach($attr1 as $u)

 {

     echo"<div class='op'>{$u[1]}</div>";

 }

 ?>

<script type="text/javascript">

$(document).ready(function(e) {

    //初始化加标识便于操作

    $(".op").css("background","#CCC")

    $(".op").attr("cz","0")//加入标识

    //鼠标一入一出变色

    $(".op").mouseover(function(e) {

        //判断是否被选中非选中运行

        if($(this).attr("cz")=="0")

        {

        $(this).css("background","#CF0")

        }

    });

    $(".op").mouseout(function(e) {

        //判断是否被选中非选中运行

        if ($(this).attr("cz")=="0")

        {

        $(this).css("background","#CCC")

        }

    });

    // 选中

    $(".op").click(function(e) {

      //清除选中项

        $(".op").css("background-color","#CCC");

        $(".op").attr("cz","0");

        //选中

      if  ($(this).attr("cz")=="0")

      {

           $(this).attr("cz","1")

        $(this).css("background","#C66" )

      } //取消

      else if( $(this).attr("cz")=="1")

      {

           $(this).attr("cz","0")

        $(this).css("background","#CF0")

      }

    });

});

</script>

jQuery练习一好友列表变色的更多相关文章

  1. JTree实现好友列表

    最近学习了一下JTree的使用方法: 先来看一下树的实例: 构建一个树, DefaultMutableTreeNode root = new DefaultMutableTreeNode(" ...

  2. OS开发UI篇—使用UItableview完成一个简单的QQ好友列表

    本文转自:http://www.cnblogs.com/wendingding/p/3763330.html 一.项目结构和plist文件 二.实现代码 1.说明: 主控制器直接继承UITableVi ...

  3. XMPP框架下微信项目总结（5）花名册获取(好友列表)

    ---->概念 ---->添加花名册 ps:添加花名册,启动: 客户端发送请求到服务器获取好友列表信息,同时在项目中创建数据表,并保存好友列表到数据表中. ---->获取服务器保存好 ...

  4. 一步一步来做WebQQ机器人-(四)(获取好友列表和群列表)

    × 本篇主要是: 获取好友列表,群列表 我会尽量详细一点,尽我所知的分享一些可能大家已经掌握的或者还不清楚的经验 利于大家阅读,文章样式不再复杂化,根据内容取固定色 目前总进度大概65% 全系列预计会 ...

  5. iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表（一）

    iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一) 一.项目结构和plist文件 二.实现代码 1.说明: 主控制器直接继承UITableViewController // ...

  6. iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表（二）

    一.实现效果             二.实现代码 1.数据模型部分 YYQQGroupModel.h文件 // // YYQQGroupModel.h // 02-QQ好友列表(基本数据的加载) / ...

  7. WPF如何用TreeView制作好友列表、播放列表

    WPF如何用TreeView制作好友列表.播放列表 前言 TreeView这个控件对于我来说是用得比较多的,以前做的小聊天软件(好友列表).音乐播放器(播放列表).类库展示器(树形类结构)等都用的是T ...

  8. [iOS基础控件 - 6.9.3] QQ好友列表Demo TableView

    A.需求 1.使用plist数据,展示类似QQ好友列表的分组.组内成员显示缩进功能 2.组名使用Header,展示箭头图标.组名.组内人数和上线人数 3.点击组名,伸展.缩回好友组   code so ...

  9. webqq 获得好友列表hash算法 获得最新hash的方法

    webqq获得好友列表的hash算法,大约每一个月中旬会变动一次.知道怎么获得他就能够了. js文件路径 http://web.qstatic.com/webqqpic/pubapps/0/50/eq ...

随机推荐

  1. Careercup - Google面试题 - 5661939564806144

    2014-05-06 01:40 题目链接 原题: Give a N*N matrix, print it out diagonally. Follow up, if it is a M*N matr ...

  2. git删除远程分支和本地分支

    问题描述:       当我们集体进行项目时,将自定义分支push到主分支master之后,如何删除远程的自定义分支呢 问题解决:        (1)使用命令git branch -a 查看所有分支 ...

  3. 【BZOJ】【1050】【HAOI2006】旅行comf

    枚举/暴力/Kruskal orz……我sb了……其实是sb题<_< 有一道题问的是最小极差生成树……(不记得是什么名字了,就是求最大边权与最小边权差最小的生成树)做法是枚举最小边,然后k ...

  4. 剑指offer-17题

    题目要求:输入一个表示整数的字符串,把该字符串转换成整数并输出.例如输入字符串"345",则输出整数345. 分析:这道题能够很好地反应出程序员的思维和编程习惯. 的确,自己编写的 ...

  5. lua与 object-C 通信

    IOS中如何调用LUA,以及LUA如何调用IOS中的功能 下面将讲解一下如何在iOS里调用Lua函数,以及Lua函数如何调用iOS本地函数. 转载请注明出处.原文出处 http://www.cnblo ...

  6. 亚马逊 在线测试题目 amazon （变种的）三叉树的最近公共祖先问题

    题目意思就是找一棵按上面链接所示的树对应的上面的两个点的最小公共祖先(LCP,Least Common Father),按照比较大小来依次返回自己的父亲节点就行了.具体看代码:getfather(a) ...

  7. Linuxshell脚本之if条件判断

    IF条件判断 .基本语法: if [ command ]; then 符合该条件执行的语句 fi .扩展语法: if [ command ];then 符合该条件执行的语句 elif [ comman ...

  8. Google Chrome 浏览器禁用缓存

    在使用 Google Chrome 浏览器调试 js 时,会发现修改完 js 不会立即生效,这是由于 chrome 浏览器缓存的原因,而在火狐下没有这个问题.经常使用 chrome 浏览器调试 js ...

  9. 7 天玩转 ASP.NET MVC — 第 7 天

    目录 第 1 天 第 2 天 第 3 天 第 4 天 第 5 天 第 6 天 第 7 天 0. 前言 今天是开心的一天.因为我们终于来到了系列学习的最后一节.我相信你喜欢之前的课程,并从中学到了许多. ...

  10. 7 天玩转 ASP.NET MVC — 第 5 天

    目录 第 1 天 第 2 天 第 3 天 第 4 天 第 5 天 第 6 天 第 7 天 0. 前言 欢迎来到第五天的学习.希望第一天到第四天的学习,你都是开心的. 1. Lab 22 - 增加 Fo ...