jQuery练习一好友列表变色

时间：2023-03-10 06:26:49
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>

相关文章