jQuery练习一好友列表变色
多选
选中变色
<!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练习一好友列表变色的更多相关文章
- JTree实现好友列表
最近学习了一下JTree的使用方法: 先来看一下树的实例: 构建一个树, DefaultMutableTreeNode root = new DefaultMutableTreeNode(" ...
- OS开发UI篇—使用UItableview完成一个简单的QQ好友列表
本文转自:http://www.cnblogs.com/wendingding/p/3763330.html 一.项目结构和plist文件 二.实现代码 1.说明: 主控制器直接继承UITableVi ...
- XMPP框架下微信项目总结（5）花名册获取(好友列表)
---->概念 ---->添加花名册 ps:添加花名册,启动: 客户端发送请求到服务器获取好友列表信息,同时在项目中创建数据表,并保存好友列表到数据表中. ---->获取服务器保存好 ...
- 一步一步来做WebQQ机器人-(四)(获取好友列表和群列表)
× 本篇主要是: 获取好友列表,群列表 我会尽量详细一点,尽我所知的分享一些可能大家已经掌握的或者还不清楚的经验 利于大家阅读,文章样式不再复杂化,根据内容取固定色 目前总进度大概65% 全系列预计会 ...
- iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表（一）
iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一) 一.项目结构和plist文件 二.实现代码 1.说明: 主控制器直接继承UITableViewController // ...
- iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表（二）
一.实现效果 二.实现代码 1.数据模型部分 YYQQGroupModel.h文件 // // YYQQGroupModel.h // 02-QQ好友列表(基本数据的加载) / ...
- WPF如何用TreeView制作好友列表、播放列表
WPF如何用TreeView制作好友列表.播放列表 前言 TreeView这个控件对于我来说是用得比较多的,以前做的小聊天软件(好友列表).音乐播放器(播放列表).类库展示器(树形类结构)等都用的是T ...
- [iOS基础控件 - 6.9.3] QQ好友列表Demo TableView
A.需求 1.使用plist数据,展示类似QQ好友列表的分组.组内成员显示缩进功能 2.组名使用Header,展示箭头图标.组名.组内人数和上线人数 3.点击组名,伸展.缩回好友组 code so ...
- webqq 获得好友列表hash算法 获得最新hash的方法
webqq获得好友列表的hash算法,大约每一个月中旬会变动一次.知道怎么获得他就能够了. js文件路径 http://web.qstatic.com/webqqpic/pubapps/0/50/eq ...
随机推荐
- C#加密解密算法汇总（转）
方法一: //须添加对System.Web的引用 using System.Web.Security; ... /// <summary& ...
- 【Search a 2D Matrix】cpp
题目: Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the f ...
- 看我是一只IT小小鸟有感
当我看了<我是一只IT小小鸟>后,有许多的感想.就像许多作者一样,在接触计算机这个专业时都有许多的抱怨,对这个专业的不了解,对这个专业不知道从何学起有深深的无助感,对这个专业在未来的发展有 ...
- 设计模式之代理模式(Proxy)
只能指针是代理模式的一种: 智能指针实现需要注意的问题: 1.构造函数指明显示构造. 2.拷贝构造函数,先断开前一个指针,然后用之前指针的值初始化现在的指针. 3.赋值函数需要先断开之前的指针,然后释 ...
- Leetcode#137 Single Number II
原题地址 遍历所有数字,统计每一位出现的次数,模3即为只出现一次的数字在那一位的情况. 代码: int singleNumber(int A[], int n) { ] = {}; ; i < ...
- 较复杂js的书写格式
我们看较复杂的js程序最怕结构混乱,一个好的js书写结构,在很大程度上可以减缓阅读的障碍性. 我感觉一个良好的结构要有两点:一是要有一个统一的入口,这样就保证了程序的可阅读性:二是要能够灵活的设置参数 ...
- c#比较器 排序
原地址:http://blog.csdn.net/xutao_ustc/article/details/6314057 class Program { static void Main(string[ ...
- Unity3D 运营商支付 安卓打包的陷阱 libunicomsdk.jar
原地址:http://blog.csdn.net/alking_sun/article/details/36624491 想想做Unity3D SDK集成已经快2年了,遇到过不少很棘手的SDK,其中以 ...
- laravel笔记
向视图中传递变量 使用with()方法 return view('articles.lists')->with('title',$title); 直接给view()传参数 return view ...
- iOS-xib(自定义UITableViewCell)
1.创建一个自定义的xib