多选

选中变色

<!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. 使用WatchService监控指定目录内的文件的改动

    package coin; import java.io.IOException; import java.nio.file.FileSystems; import java.nio.file.Pat ...

  2. Codeforces Round #FF (Div. 1) A. DZY Loves Sequences

    题目链接: http://www.codeforces.com/contest/446/problem/A 题解: dp1[x]表示以x结尾的最大严格升序连续串,dp2[x]表示以x开头的最大严格升序 ...

  3. ASP.NET MVC 4 插件化架构简单实现-思路篇

    用过和做过插件的都会了解插件的好处,园子里也有很多和讨论,但大都只些简单的加载程序集什么的,这里主要讨论的就是使用 ASP.NET MVC 4 来实现每个插件都可以完全从主站点剥离出来,即使只是一个插 ...

  4. 请实现一个函数用来判断字符串是否表示数值（包括整数和小数）。例如，字符串"+100","5e2","-123","3.1416"和"-1E-16"都表示数值。 但是"12e","1a3.14","1.2.3","+-5"和"12e+4.3"都不是。

    // test20.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> #include< ...

  5. swipejs的使用

    <div id='slider' class='swipe'> <div class="swipe-wrap"> <div><img sr ...

  6. Notes on the Dirichlet Distribution and Dirichlet Process

    Notes on the Dirichlet Distribution and Dirichlet Process In [3]: %matplotlib inline   Note: I wrote ...

  7. vitrualbox虚拟机64位安装报错解决

    1 NtCreateFile(\Device\VBoxDrvStub) failed: 0xc0000034 STATUS_OBJECT_NAME_NOT_FOUND (0 retries) 解决办法 ...

  8. ASP.NET - 演练：创建网页以显示 XML 数据

    数据通常是以 XML 格式提供给 Web 应用程序的.但是,XML 数据本质上是分层的,因此您可能希望能够在基于列表的控件中使用 XML 数据,如 GridView 或 DropDownList 控件 ...

  9. FM算法

    1.FM背景 在计算广告中,CTR预估(click-through rate)是非常重要的一个环节,因为DSP后面的出价要依赖于CTR预估的结果.在前面的相关博文中,我们已经提到了CTR中相关特征工程 ...

  10. Manacher算法 O(n) 求最长回文子串

    转自:http://bbs.dlut.edu.cn/bbstcon.php?board=Competition&gid=23474 其实原文说得是比较清楚的,只是英文的,我这里写一份中文的吧. ...