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>
