JQ 练习题

1.留言板

<!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="jquery-1.11.2.min.js"></script>

</head>

<body>

    <div id="nr">

    </div>

    <div>

        内容<textarea id="txt"></textarea><br />

        <input type="button" value="提交" id="btn" />

    </div>

</body>

<script type="text/javascript">

$(document).ready(function(e) {

    $("#btn").click(function(){

        var nr=$("#txt").val();

        var str=nr+"<br>";

        $("#nr").append(str);

        })

});

</script>

</html>

2.好友信息

<!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="jquery-1.11.2.min.js"></script>

<style type="text/css">

/*auto 随机*/

*{ margin:0px auto; padding:0px}

#list{ width:150px; height:100px;}

.user{ width:150px; height:26; background-color:#3FC; margin-top:2px; color:#F00; text-align:center; line-height:26px; vertical-align:middle;}

.user:hover{ cursor:pointer;}

</style>

</head>

<body>

<h1>好友信息</h1>

<?php

$uid="zhaoyi";

include("dbda.class.php");

$db=new dbda();

$sql="select firend from firend where me='{$uid}'";

$attr=$db->Query($sql);

?>

<div id="list">

    <?php

    foreach($attr as $v)

    {

        $fuid=$v[0];//好友用户名

        $sqlname="select name from users where uid='{$v[0]}'";

        $aname=$db->Query($sqlname);

        $fname=$aname[0][0];//好友的姓名

        echo"<div class='user' bs='{$fuid}'>{$fname}</div>";

    }

    ?>

</div>

<script type="text/javascript">

$(document).ready(function(e) {

    //点击选中的事件

    $(".user").click(function(){

        //清除选中项

        $(".user").css("background-color","#3FC");

        $(".user").attr("xz","0");

        //让该项选中

        $(this).css("background-color","#CF3");

        //加一个选中属性

        $(this).attr("xz","1");

        alert($(this).attr("bs"));

        })

        //鼠标放上事件

    $(".user").mouseenter(function(){

        $(this).css("background-color","#CF3");

        })

        //鼠标离开事件

    $(".user").mouseout(function(){

        if($(this).attr("xz")!="1")

        {

            $(this).css("background-color","#3FC");

        }

        })

});

</script>

</body>

</html>

3.通过输入信息使数据框变色

<!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="jquery-1.11.2.min.js"></script>

</head>

<body>

    <div>

        <input type="text" class="txt" />

        <input type="text" class="txt" />

        <input type="text" class="txt" />

        <input type="text" class="txt" />

    </div>

</body>

<script type="text/javascript">

$(document).ready(function(e) {

    //.blur()  失去焦点时触发   .focus()  获得焦点时触发

    $(".txt").blur(function(){

        //.trim()  去空格

        if($(this).val().trim())

        {

            $(this).css("background-color","#FFF");

        }else

        {

            $(this).css("background-color","red");

        }

        })

});

</script>

</html>

4.通过单项添加和全部添加实现信息转移

<!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="jquery-1.11.2.min.js"></script>

<style type="text/css">

/*auto  随机*/

*{ margin:0px auto; padding:0px}

#wai{ width:100%; height:200px; margin-top:50px}

#left{ width:45%; height:200px; float:left; background-color:#0FF}

#middle{ width:10%; height:200px; float:left; background-color:#0F0}

#right{ width:45%; height:200px; float:left; background-color:#0FF}

.llist{ width:150px; height:26; background-color:#3FC; margin-top:2px; color:#F00; text-align:center; line-height:26px; vertical-align:middle;}

#one{ width:80px; height:23px; margin-top:70px; background-color:#9F9; text-align:center; line-height:26px; vertical-align:middle;}

#all{ width:80px; height:23px; margin-top:30px; background-color:#9F9; text-align:center; line-height:26px; vertical-align:middle;}

.rlist{ width:150px; height:26; background-color:#3FC; margin-top:2px; color:#F00; text-align:center; line-height:26px; vertical-align:middle;}

</style>

</head>

<body>

    <div id="wai">

        <div id="left">

            <div class="llist">巴萨</div>

            <div class="llist">米兰</div>

            <div class="llist">国米</div>

            <div class="llist">皇马</div>

            <div class="llist">曼联</div>

        </div>

        <div id="middle">

        <div id="one">></div>

        <div id="all">>></div>

        </div>

        <div id="right">

        </div>

    </div>

</body>

<script type="text/javascript">

$(document).ready(function(e) {

    //点击选中

    $(".llist").click(function(){

        //清除所有选中

        $(".llist").css("background-color","#3FC")

        $(".llist").attr("xz",0);

        //设置该项选中

        $(this).css("background-color","#666");

        $(this).attr("xz",1);

        })

    //移动一项

    $("#one").click(function(){

        var list=$(".llist");

        for(var i=0;i<list.length;i++)

        {

            //判断哪项选中

            if(list.eq(i).attr("xz")==1)

            {

                //判断该值是否已经存在

                var zhi=list.eq(i).text();

                if(has(zhi))

                {

                    var str="<div class='rlist'>"+zhi+"</div>";

                    $("#right").append(str);

                }

            }

        }

        })    

    //移动所有

    $("#all").click(function(){

        var llist=$(".llist");

        for(var i=0;i<llist.length;i++)

        {

            var zhi=llist.eq(i).text();

            if(has(zhi))

            {

                var str="<div class='rlist'>"+zhi+"</div>";

                $("#right").append(str);

            }

        }

        })

});

function has(zhi)

{

    var list=$(".rlist");

    //定义一个bool值  默认为true

    var cunzai=true;

    for(var i=0;i<list.length;i++)

    {

        if(list.eq(i).text()==zhi)

        {

            cunzai=false;

            break;

        }

    }

    return cunzai;

}

</script>

</html>

相关文章