JQ 练习题

最新推荐文章于 2024-07-28 14:55:40 发布

weixin_33853794

最新推荐文章于 2024-07-28 14:55:40 发布

阅读量87

点赞数

文章标签： xhtml php javascript ViewUI

原文链接：http://www.cnblogs.com/bilibiliganbei/p/5611999.html

版权

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>

View Code

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>

View Code

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>

View Code

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>

View Code

转载于:https://www.cnblogs.com/bilibiliganbei/p/5611999.html

weixin_33853794

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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&...
复制链接

扫一扫