多选

选中变色

<!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. 常用EXE文件反编译工具

    PE Explorer V1.99 R5 绿色汉化特别版_强大的可视化汉化集成工具 功能极为强大的可视化汉化集成工具,可直接浏览.修改软件资源,包括菜单.对话框.字符串表等: 另外,还具备有 W32D ...

  2. [转载]linux sed命令详解

    简介 sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后,把缓冲区的 ...

  3. Javascript中常用事件的命名

    OnClick :单击事件 OnChange:改变事件 OnSelect:选中事件 OnFocus:获得焦点事件 OnBlur:失去焦点事件 Onload:载入文件 OnUnload:卸载文件 anc ...

  4. 01.Apache FtpServer配置

    1.解压Apache FTPServer 将下载下来的压缩包(ftpserver-1.0.6.zip)解压到本地,其目录结构如下图: 2.修改users.properties 修改 \apache-f ...

  5. 【ContestHunter】【弱省胡策】【Round3】（C）

    容斥原理+Fib Orz HE的神犇们 蒟蒻只能改出来第三题……实在太弱 官方题解:http://pan.baidu.com/s/1o6MdtQq fib的神奇性质……还有解密a[i]的过程……这里就 ...

  6. 堆(heap)和栈(stack)的区别

    转: 一.预备知识―程序的内存分配 一个由c/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)― 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操作方式类似于数据结构中 ...

  7. java中byte和blob互转

    1. btye[]转blob byte[] bs = ... Blob blob = conn.createBlob(); blob.setBytes(1, bs); ps.setBlob(2, bl ...

  8. [工作积累] 32bit to 64bit: array index underflow

    先贴一段C++标准(ISO/IEC 14882:2003): 5.2.1 Subscripting: 1 A postfix expression followed by an expression ...

  9. LUCAS 定理

    原来一张图就就能证明:C(N,M)%P,p是素数. 简直太炫酷 先膜拜会 #include<iostream>#include<cstdio>#include<ctime ...

  10. Codeforces Round #259 (Div. 2)-D. Little Pony and Harmony Chest

    题目范围给的很小,所以有状压的方向. 我们是构造出一个数列,且数列中每两个数的最大公约数为1; 给的A[I]<=30,这是一个突破点. 可以发现B[I]中的数不会很大,要不然就不满足,所以B[I ...