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 练习题的更多相关文章

  1. jq选择器基础

    Jquery $代表选择器 使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu ...

  2. JQ实现判断iPhone、Android设备

    最近做了一版微信宣传页,通过JQ来判断设备,并进行下载 微信内置浏览器对下载链接进行了屏蔽,所以先进行判断,如果是微信内置浏览器,则跳转应用宝链接,如果不是,则判断是iPhone/Adroid/PC ...

  3. Linux基础练习题(二)

    Linux基础练习题(二) 1.复制/etc/skel目录为/home/tuer1,要求/home/tuser1及其内部文件的属组和其它用户均没有任何访问权限. [root@www ~]# cp -r ...

  4. shell 脚本之 shell 练习题汇总

    整理了一些 shell 相关的练习题,记录到这里. 1. 请按照这样的日期格式 xxxx-xx-xx 每日生成一个文件,例如:今天生成的文件为 2013-09-23.log, 并且把磁盘的使用情况写到 ...

  5. jq.validate隐藏元素忽略验证

    jq.validate隐藏元素忽略验证 现在有这样一个需求,当触发某类事件时候,需要在页面中显示input框,但是当不需要加载页面中的元素时候,进行隐藏.在这个需求的前提下,程序中对于input中的输 ...

  6. jq.validate 自定义验证两个日期

    jq.validate 自定义验证两个日期 首先定义有一个表单,date1和date2是属于表单的元素,若date1大于date2,返回false:若date1<date2,返回true.使用j ...

  7. MySQL练习题

    MySQL练习题 一.表关系 请创建如下表,并创建相关约束 二.操作表 1.自行创建测试数据 2.查询“生物”课程比“物理”课程成绩高的所有学生的学号: 3.查询平均成绩大于60分的同学的学号和平均成 ...

  8. MySQL练习题参考答案

    MySQL练习题参考答案 2.查询“生物”课程比“物理”课程成绩高的所有学生的学号: 思路: 获取所有有生物课程的人(学号,成绩) - 临时表 获取所有有物理课程的人(学号,成绩) - 临时表 根据[ ...

  9. jq方法中 $(window).load() 与 $(document).ready() 的区别

    通过自学进入了前端的行列,只知道在js中,一开头就写一个: window.onload = function(){ //doing sth} 然后所有的乱七八糟的代码全塞里面,大概知道window.o ...

随机推荐

  1. 第五章第二例题关于Vector（LRJ）

    vector(动态数组)(粘) 一.概述 vector是C++标准模板库中的部分内容,它是一个多功能的,能够操作多种数据结构和算法的模板类和函数库.vector是一个容器,它能够存放各种类型的对象,简 ...

  2. leetcode 153. Find Minimum in Rotated Sorted Array

    Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...

  3. GZIP压缩

     (这些文章都是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com)         zip压缩文件听说过,GZIP对我可是新鲜词儿,这个世界好复杂,压缩是无处不 ...

  4. homework160809207刘兆轩

    # include <stdio.h> int main() { float a,b,c,m,n,l,k,j,i; printf("请输入三个数:\n"); scanf ...

  5. spring mvc 传参数

    1.页面:(1)js传参数:location.href="${ctx }/forum/changeCtm.html?ctmId="+id; (2)将内容写在form表单里面,然后用 ...

  6. 三. 动态添加option选项

  7. python list 的+、+=和extend操作

    据说后者在list很大的时候性能稍好. 于是测试了一把: import time def time_cost(func): def _time_cost(*args,**kw): t1=time.ti ...

  8. igbinary vs serialize vs json_encode

    igbinary vs serialize vs json_encode 2010-04-18 @ 23:01:58 · 作者 Volcano · 归类于 php 你可能会感兴趣的内容 关于" ...

  9. Apache和PHP的安装

    最近看了一些教科书,可能是印刷的缘故,只是一个空格没有打印,再加上网上的很多博客文章只是顺手转载,并没有仔细的检查,还有php和apache之间的版本问题,害得我花了4,5小时的时间才搞定环境的搭配. ...

  10. 【System】shell 实现 bat 的pause功能

    read -rsp $'Press enter to continue...\n' 参考资料: http://stackoverflow.com/questions/92802/what-is-the ...