jQuery练习一好友列表变色
2016-06-23 15:15
309 查看
多选
选中变色
单选变色
选中变色
<!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 日常应用技巧
- jQuery Ajax无刷新操作
- jQuery和DOM对象使用说明
- jquery学习笔记2
- jQuery全屏滚动插件fullPage.js使用中遇到的问题(滑动轮播效果无效)
- jquery实现两列表数据跳换
- Jquery如何获取select选中项 自定义属性的值?
- jquery.form.js关于$("form").ajaxSubmit is not a function原因 .
- jquery禁用a标签,jquery禁用按钮click点击
- JQuery日历插件My97DatePicker日期范围限制
- JUQERY 获取同名称的所有CHECKBOX ,获取已经选择的,并且jquery进行勾选!
- jquery插件网址
- 基于jQuery上传文件插件
- jQuery学习笔记--$.post(),val(),html()
- jquery中live()方法和bind()方法区别分析
- js jquery json ajax区别
- js日历,使用datepicker.js,ui.core.js,jquery-1.7.1.js
- JQuery中的eq()方法
- jQuery根据name属性进行查找的用法分析
- jQuery对象与DOM节点转换