用JQuery编写textarea,input,checkbox,select

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

<!DOCTYPE HTML>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css" media="screen">

    *{

        margin :;

        padding :;

        font : normal 12px/17px Arial;

    }

    .msg{

        width :300px;

        margin : 100px;

    }

    .msg_caption{

        width :%;

        overflow : hidden;

        margin-botton : 1px;

    }

    .msg_caption span{

        display : block;

        float : left;

        margin : 2px;

        padding :4px 10px;

        background :#;

        cursor : pointer;

        color : white;

    }

    .msg textarea{

        width :300px;

        height : 80px %;

        border :1px solid #;

    }

    </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()<){

                        $comment.animate({

                            height : "+=50"

                        },);//重新设置高度,在原来的基础上+50

                    }

                }

                });

            $('.smaller').click(function(){//绑定缩小按钮

                if(!$comment.is(":animated")){//判断对象是否处于动画状态,不是才执行里面代码

                    if($comment.height()>){

                        $comment.animate({

                            height : "-=50"

                        },);//重新设置高度,在原来的基础上-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="" cols="">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 #;

    }

    .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="" cols="">详细信息</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:; padding:; }

div.centent {

   float:left;

   text-align: center;

   margin: 10px;

}

span {

    display:block;

    margin:2px 2px;

    padding:4px 10px;

    background:#;

    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</option>

            <option value="">选项2</option>

            <option value="">选项3</option>

            <option value="">选项4</option>

            <option value="">选项5</option>

            <option value="">选项6</option>

            <option value="">选项7</option>

        </select>

        <div>

            <span id="add" >选中添加到右边&gt;&gt;</span>

            <span id="add_all" >全部添加到右边&gt;&gt;</span>

        </div>

    </div>

    <div class="centent">

        <select multiple="multiple" id="select2" style="width: 100px;height:160px;">

            <option value="">选项8</option>

        </select>

        <div>

            <span id="remove">&lt;&lt;选中删除到左边</span>

            <span id="remove_all">&lt;&lt;全部删除到左边</span>

        </div>

    </div>

</body>

</html>

效果图如下:

将左边的选项移到右边,且可双击,可多选添加,哈哈,写代码的时候很有意思,

感谢,望斧正!

用JQuery编写textarea,input,checkbox,select的更多相关文章

jQuery 如何设置input checkbox 更有效 prop()
问题:经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法获取其真实值,下面介绍这两种方法的区别: 1.通过prop方法获取checked属性 ...
一个实例 ---灵活使用jquery选择器实现input一个key，多个value 。用ajax传递对象到后台控制器
标题可能不是很清晰,我们看实例: 简单来说就是需要实现sku的功能...一件商品可以有多个属性, 一个属性可以有多个值 . 最后以json格式存到数据库难点一: 如何实现input输入框的弹性使用 ...
【jQuery获取下拉框select、单选框radio、input普通框的值和checkbox选中的个数】
radio单选框:name属性相同 <input type="radio" id="sp_type" name="p_type" va ...
jquery 获取和设置 checkbox radio 和 select option的值?
============== 获取和设置 checkbox radio 和 select的值? === val()函数, 其名字就表达了它的意思: 他就是＝ value 的简写! val就是valu ...
[转]jQuery操作radio、checkbox、select 集合.
1.radio:单选框 html代码 <input type="radio" name="radio" id="radio1" val ...
Jquery操作radio,checkbox,select表单操作实现代码
一 .Select jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); / ...
jQuery操作radio、checkbox、select 集合
1.radio:单选框 HTML代码: <input type="radio" name="radio" id="radio1" va ...
jQuery操作radio、checkbox、select总结
1.radio:单选框 HTML代码: <input type="radio" name="radio" id="radio1" va ...
jquery 取指定class下的input checkbox选中的值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

Java深度遍历文件夹(递归实现)
package FileDemo; import java.io.File; public class DeepSearchDir { /** * @param args */ public stat ...
nyoj 218 Dinner
Dinner 时间限制:100 ms | 内存限制:65535 KB 难度:1 描述 Little A is one member of ACM team. He had just won t ...
UI基础获取当前屏幕显示的viewcontroller
#pragma mark - 获取当前屏幕显示的viewcontroller - (UIViewController *)getCurrentVC { UIViewController *result ...
Pivot运算符用于在列和行之间
本文导读:T-SQL语句中,Pivot运算符用于在列和行之间对数据进行旋转或透视转换,PIVOT命令可以实现数据表的列转行,同时执行聚合运算,UNPIVOT则与其相反,实现数据的行转列. PIVOT通 ...
自定义滚动条CSS样式
首先,给个默认css,清除掉以前的样式,给默认背景 .scrollbar { margin-left: 30px; float: left; height: 300px; width: 65px; b ...
-join 和 -split 用法
具体可参考 PowerShell_ISE的帮助文件: -Join(一元联接运算符): 一元联接运算符 (-join <string[]>) 的优先级高于逗号.因此,如果向一元联接运算符提交 ...
ArrowDrawable
https://github.com/wly2014/ArrowDrawable https://github.com/ChrisRenke/DrawerArrowDrawable
[Practical Git] Show who changed a line last with git blame
When working on a file, we often want to know who made certain changes last; we can use git blame to ...
form表单普通提交预览显示，读取显示tmp文件
<html> <head> <meta http-equiv="content-type" content="text/html; char ...
eclipse安装android sdk后工具栏没有图标的设置
如果没有出现这android图标,选择'Window>Customize Perspective...>Commands',并在'Available command groups'中勾选' ...

用JQuery编写textarea,input,checkbox,select

用JQuery编写textarea,input,checkbox,select的更多相关文章

随机推荐

热门专题