用JQuery编写textarea,input,checkbox,select

昵称10504424 2015-09-02

展开全文

今天学习怎样用JQuery编写一些小的代码,小小的试了一下编写一个textarea,代码如下:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css" media="screen">
    *{
        margin :0;
        padding :0;
        font : normal 12px/17px Arial;
    }
    .msg{
        width :300px;
        margin : 100px;
    }
    .msg_caption{
        width :100%;
        overflow : hidden;
        margin-botton : 1px;
    }
    .msg_caption span{
        display : block;
        float : left;
        margin :0 2px;
        padding :4px 10px;
        background :#898989;
        cursor : pointer;
        color : white;
    }
    .msg textarea{
        width :300px;
        height : 80px 100%;
        border :1px solid #000;
    }
    </style>

    <script type="text/javascript" src="../jquery1.11.js"></script>
    <script type="text/javascript" charset="utf-8">
    $(function(){
            var $comment = $("#comment");
            $('.bigger').click(function(){//绑定扩大按钮
                if(!$comment.is(":animated")){//判断对象是否处于动画状态,不是才执行里面代码
                    if($comment.height()<500){
                        $comment.animate({
                            height : "+=50"
                        },1000);//重新设置高度,在原来的基础上+50
                    }
                }
                });
            $('.smaller').click(function(){//绑定缩小按钮
                if(!$comment.is(":animated")){//判断对象是否处于动画状态,不是才执行里面代码
                    if($comment.height()>50){
                        $comment.animate({
                            height : "-=50"
                        },1000);//重新设置高度,在原来的基础上-50
                    }
                }
                });
            })
    </script>
</head>
<body>
    <form action="" method="post">
    <div class="msg">
        <div class="msg_caption">
            <span class="bigger" >放大</span>
            <span class="smaller" >缩小</span>
        </div>
        <div>
            <textarea id="comment" rows="8" cols="20">C/S之间通过任意的协议通信，一般要求有特定的客户端。比如QQ就是C/S模式，你的桌面上的QQ就是腾讯公司的特定的客户端，而服务器就是腾讯的服务器。再比如你看的网络电视也是如此，比如你的桌面上的iqiyi、视频软件等，这些软件都是C/S模式的，他们要求在用户有特定的客户端(Socket)。而B/S模式是靠应用层的http协议进行通信的（当然也要靠底层的好多协议支持），一般不需要特定的客户端，而是需要有统一规范的客户端，那就是你的浏览器！Web页就是B/S 模式，也就是说咱们说的网站就是B/S模式。 </textarea>
        </div>
    </div>
</form>
</body>
</html>

效果图如下:

可以流畅的放大缩小,这就是JQuery特效的优点.

再来一个input标签,代码:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css" media="screen">
    body{
        font : normal 12px/17px Arial;
    }
    div{
        padding :2px;
    }
    input,textarea{
        width : 12em;
        border :1px solid #888;
    }
    .focus{
        border : 1px solid #f00;
        background : #fcc;
    }
    </style>
    <script type="text/javascript" src="../jquery1.11.js"></script>
    <script type="text/javascript" charset="utf-8">
$(function(){
        $(":input").focus(function(){
            $(this).addClass("focus");
            if($(this).val() == this.defaultValue){
                $(this).val("");
                    };
            }).blur(function(){
                $(this).removeClass("focus");
                if($(this).val() == ''){
                    $(this).val(this.defaultValue);
                    };
                });
        //addClass:为每个匹配的元素添加指定的类名，一个或多个用空格分开，添加属性
        //val():获得或者更改value属性对应的值
        //defaultValue():获取默认值的value
        //removeClass():删除对应的class属性
        });
    </script>
</head>
<body>
    <form action="" method="post" id="regForm">
        <fieldset>
            <legend>个人基本信息</legend>
            <div>
                <label  for="username">名称:</label>
                <input id="username" type="text" value="名称" />
            </div>
            <div>
                <label for="pass">密码:</label>
                <input id="pass" type="password" value="密码" />
            </div>
            <div>
                <label for="msg">详细信息:</label>
                <textarea id="msg" rows="2" cols="20">详细信息</textarea>
            </div>
        </fieldset>
    </form>
</body>
</html>

效果图如下:

添加一个焦点和失去焦点,默认值,再设置一个得到焦点时的背景颜色

第三个呢,写了一个select,这个东西一般在QQ空间和淘宝中使用比较广泛,所以也比较有兴趣,代码如下:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
* { margin:0; padding:0; }
div.centent {
   float:left;
   text-align: center;
   margin: 10px;
}
span { 
    display:block; 
    margin:2px 2px;
    padding:4px 10px; 
    background:#898989;
    cursor:pointer;
    font-size:12px;
    color:white;
}
</style>
    <script type="text/javascript" src="../jquery1.11.js"></script>
    <script type="text/javascript" charset="utf-8">
    $(function(){
            //移动到右边
            $("#add").click(function(){
                //获取选中的项,删除然后再移动到右边,这里是选择移动;
                $('#select1 option:selected').appendTo('#select2');
                });
            //移动到左边
            $("#remove").click(function(){
                $('#select2 option:selected').appendTo('#select1');
                })
            //全部到右边
            $("#add_all").click(function(){
                $('#select1 option').appendTo('#select2');
                })
            //全部到左边
            $("#remove_all").click(function(){
                $('#select2 option').appendTo('#select1');
                })
            //双击选项
            $('#select1').dblclick(function(){
                //这里先定位#select1这个大的选择框,然后定位到里面的被选择的元素组陈的集合
                    //this就是表示这个集合,当我们按Ctrl或者shift的时候,我们操作的就是这个集合
                    //$("option:selected",this).appendTo("#select2");
                $("option:selected",this).appendTo("#select2");
                })
            //双击选项
            $('#select2').dblclick(function(){
                $("option:selected",this).appendTo("#select1");
                })
            });
    </script>
</head>
<body>
    <div class="centent">
        <select multiple="multiple" id="select1" style="width:100px;height:160px;">
            <option value="1">选项1</option>
            <option value="2">选项2</option>
            <option value="3">选项3</option>
            <option value="4">选项4</option>
            <option value="5">选项5</option>
            <option value="6">选项6</option>
            <option value="7">选项7</option>
        </select>
        <div>
            <span id="add" >选中添加到右边>></span>
            <span id="add_all" >全部添加到右边>></span>
        </div>
    </div>

    <div class="centent">
        <select multiple="multiple" id="select2" style="width: 100px;height:160px;">
            <option value="8">选项8</option>
        </select>
        <div>
            <span id="remove"><<选中删除到左边</span>
            <span id="remove_all"><<全部删除到左边</span>
        </div>
    </div>
</body>
</html>