多选

选中变色

<!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. 【First Missing Positive】cpp

    题目: Given an unsorted integer array, find the first missing positive integer. For example,Given [1,2 ...

  2. winform - BackgroundWorker

    http://www.cnblogs.com/happy555/archive/2007/11/07/952315.html 在VS2005中添加了BackgroundWorker组件,该组件在多线程 ...

  3. 使用javac命令编译java文件。

    今天想学习一下web services的知识,在网上找了一个教程,里面写了一个web services客户端调用,在cmd下执行的,但是没有给出用javac编译的细节.所以自己就借着这个机会学了一下: ...

  4. sencha Touch 2.4 学习之 XTemplate模板

    XTemplate模板 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...

  5. JavaScript之工厂方式 构造函数方式 原型方式讲解

    一.工厂方式可以为一个对象,创建多个实例. var oCar = new Object; oCar.color = "red"; oCar.doors=4; oCar.mpg=23 ...

  6. Linux中yum和apt-get用法及区别

    Linux中yum和apt-get用法及区别   一般来说著名的linux系统基本上分两大类:   1.RedHat系列:Redhat.Centos.Fedora等   2.Debian系列:Debi ...

  7. 2016年度 JavaScript 展望（上）

    [编者按]本文作者为资深 Web 开发者 TJ VanToll, TJ 专注于移动端 Web 应用及其性能,是<jQuery UI 实践> 一书的作者. 本文系 OneAPM 工程师编译呈 ...

  8. HDU4831&&4832&&4834

    好久没打代码啦,今天lu一发百度之星,感觉还是学到不少东西的,写点收获. 第一题就是现在的HDU4831啦,题意很清楚,我一开始以为休息区也可以变为风景区,所以就不敢敲了,后来才得知数据里只会改风景区 ...

  9. Quant面试准备5本书

    Heard on The Street: Quantitative Questions from Wall Street Job Interviews - Timothy Falcon Crack F ...

  10. Vi的使用

    Vi的使用: 范例一: 使用Vi进入一般模式: [root@dsetl lp]# vi test1.txt 范例二:按下i键进入编辑模式,开始编辑文字 -- INSERT – 范例三:按下[ESC]键 ...