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 ...

随机推荐

解决mvc部署在IIS上以后出现404错误
首先:aspnet_regiis -i 如果还不行,更改web.config文件,添加红色的部分 <system.webServer> <modules runAllManagedM ...
leetcode 124. Binary Tree Maximum Path Sum
Given a binary tree, find the maximum path sum. For this problem, a path is defined as any sequence ...
《lucene原理与代码分析》笔记
1.全文索引相对于顺序扫描的优势:一次索引,多次使用 2.创建索引的步骤:(1)要索引的原文档 (2)将原文档传给分词组件(Tokenizer)分词组件会做如下事情:(此过程称为Tokenize)a. ...
Codeforces Gym 101138 G. LCM-er
Description 在 $[a,b]$ 之间选择 $n$ 个数 (可以重复) ,使这 $n$ 个数的最小公倍数能被 $x$ 整除,对 $10^9+7$ 取膜. \(1\leqs ...
python wraps
用代码说明问题: def d(f): def _d(*args, **kwargs): print f.__name__, ' is called' f(*args, **kwargs) return ...
[转］mysql分布式方案-分库拆表
来源:http://kissthink.com/archive/mysql-distributed-programs---and-warehouses-split-table.html 分库& ...
VQuery高级特性
VQuery高级特性 css方法同时设置多个--for in 链式操作链式操作函数,链式操作 css 方法链式操作 json的使用阻止冒泡,默认事件 VQuery插件插件机制可以扩展库的功 ...
Django CRM __contains与__icontains区别
http://www.yihaomen.com/article/python/199.htm operators = { 'exact': '= %s', 'iexact': 'LIKE %s', ' ...
Android自定义图形shape
在Android开发过程中,经常需要改变控件的默认样式, 那么通常会使用多个图片来解决.不过这种方式可能需要多个图片,比如一个按钮,需要点击时的式样图片,默认的式样图片. 这样就容易使apk变大.另一 ...
iOS 8 WKWebView
首先看看这篇文章,写得很好:http://nshipster.cn/wkwebkit/ 再推荐去看看 iOS_8_by_Tutorials 这本书里的 WKWebView相关章节! 我这里说下自己的简 ...

JQ 练习题

JQ 练习题的更多相关文章

随机推荐

热门专题