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>

JQ 练习题的更多相关文章

jq选择器基础
Jquery $代表选择器使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu ...
JQ实现判断iPhone、Android设备
最近做了一版微信宣传页,通过JQ来判断设备,并进行下载微信内置浏览器对下载链接进行了屏蔽,所以先进行判断,如果是微信内置浏览器,则跳转应用宝链接,如果不是,则判断是iPhone/Adroid/PC ...
Linux基础练习题(二)
Linux基础练习题(二) 1.复制/etc/skel目录为/home/tuer1,要求/home/tuser1及其内部文件的属组和其它用户均没有任何访问权限. [root@www ~]# cp -r ...
shell 脚本之 shell 练习题汇总
整理了一些 shell 相关的练习题,记录到这里. 1. 请按照这样的日期格式 xxxx-xx-xx 每日生成一个文件,例如:今天生成的文件为 2013-09-23.log, 并且把磁盘的使用情况写到 ...
jq.validate隐藏元素忽略验证
jq.validate隐藏元素忽略验证现在有这样一个需求,当触发某类事件时候,需要在页面中显示input框,但是当不需要加载页面中的元素时候,进行隐藏.在这个需求的前提下,程序中对于input中的输 ...
jq.validate 自定义验证两个日期
jq.validate 自定义验证两个日期首先定义有一个表单,date1和date2是属于表单的元素,若date1大于date2,返回false:若date1<date2,返回true.使用j ...
MySQL练习题
MySQL练习题一.表关系请创建如下表,并创建相关约束二.操作表 1.自行创建测试数据 2.查询“生物”课程比“物理”课程成绩高的所有学生的学号: 3.查询平均成绩大于60分的同学的学号和平均成 ...
MySQL练习题参考答案
MySQL练习题参考答案 2.查询“生物”课程比“物理”课程成绩高的所有学生的学号: 思路: 获取所有有生物课程的人(学号,成绩) - 临时表获取所有有物理课程的人(学号,成绩) - 临时表根据[ ...
jq方法中 $(window).load() 与 $(document).ready() 的区别
通过自学进入了前端的行列,只知道在js中,一开头就写一个: window.onload = function(){ //doing sth} 然后所有的乱七八糟的代码全塞里面,大概知道window.o ...

随机推荐

Web项目,F12调试的说明
sessionstorage,localstorage和cookie之间的区别区别:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递.而sess ...
js ajax简单使用
文章部分资源来源:(http://blog.csdn.net/lzkkevin/article/details/6777474)以及(http://www.cnblogs.com/hwx0807/ar ...
log4j配置日志文件log4j.appender.R.File相对路径方法
方法一. 解决的办法自然是用相对路径代替绝对路径,其实log4j的FileAppender本身就有这样的机制,如:log4j.appender.logfile.File=${WORKDIR}/logs ...
Codeforces 519 E. A and B and Lecture Rooms
Description 询问一个树上与两点距离相等的点的个数. Sol 倍增求LCA. 一棵树上距离两点相等,要么就只有两点的中点,要么就是与中点相连的所有点. 有些结论很容易证明,如果距离是偶数,那 ...
4.了解AngularJS模块和依赖注入
1.模块和依赖注入概述 1.了解模块 AngularJS模块是一种容器,把代码隔离并组织成简洁,整齐,可复用的块. 模块本身不提供直接的功能:包含其他提供功能的对象的实例:控制器,过滤器,服务,动画 ...
表单验证神器——jquery.validate插件
jquery.validate.js插件应用举例,ajax方式提交数据. html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...
linux下合并两个文件夹
一.我想把自己自定义的软件统一放到man手册路径里.如何和现有的/usr/local/share文件夹合并起来,原来的文件还在? (1)下面是解压出的自定义的bashdb调试软件==>
【IDEA】IDEA 如何设置编辑器字体大小
intellij idea 如何更改编辑器文本字体和大小换上了intellij idea之后,第一件事就是想要改变下文字字体,因为在我这个27寸的2k分辨率的屏幕上,文字显然太小了. intel ...
[转]servlet的执行原理与生命周期
一.先从servlet容器说起:大家最为熟悉的servlet容器就是Tomcat ,Servlet 容器是如何管理 Servlet? 先看一下tomcat的容器模型: 从上图可以看出 Tomcat 的 ...
Strobogrammatic Number
Strobogrammatic Number I A strobogrammatic number is a number that looks the same when rotated 180 d ...

JQ 练习题

JQ 练习题的更多相关文章

随机推荐

热门专题