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

随机推荐

转载MSDN 在ASP.NET 中执行 URL 重写
转载文章原网址 http://msdn.microsoft.com/zh-cn/library/ms972974.aspx 摘要:介绍如何使用 Microsoft ASP.NET 执行动态 URL 重 ...
Extjs4---Cannot read property 'addCls' of null
用MVC做后台管理系统时遇到的问题,关于tab关闭后再打开不显示,或者报错我在新的tabpanel中加入了一个grid,当我关闭再次打开就会报错Cannot read property 'addCl ...
cocos2d-x 3.0 开发（一） Hello_New_World
1.Previous On 2dx 2dx 的3.0版本是个与以往不同的版本.变化比2dx从1.x 到2.x的变化还要大不少.具体的新功能可以参见:CocoaChina大会见闻——cocos2 ...
C#操作sql通用类 SQLHelper
Codeusing System; using System.Data; using System.Configuration; using System.Web; using System.Web. ...
Visual Studio动态代码生成的实现基础
这篇文章讨论以下3个问题: 1.代码生成器应该做什么 2.大多数代码生成器的缺点 3.动态代码生成实现的基础代码生成器应该做什么? 我认为,目标是加快项目开发,方式是减少重复代码手工操作,实现是用过 ...
Unity3d 网络编程（一）（Unity3d内建网络Network介绍）
首先个人说说题外话,Unity3d使用的网络库核心是用C++实现的一款商业网络游戏引擎库. RakNet.所以对于移动设备来说,用Unity3d来写server是全然能够的,而且内建网络库的各项功能封 ...
c# 调用 c++写的DLL
http://www.cnblogs.com/MarsPanda/archive/2012/09/03/2668522.html 解决办法安装 vcredist 运行库或者用VC6.0编写DLL ...
PAT 1010
1010. Radix (25) Given a pair of positive integers, for example, 6 and 110, can this equation 6 = 11 ...
java_jdbc_batch处理_主键id获取
//create1 速度较慢,create2较快,但是要根据数据库不同来决定 //ps = conn.prepareStatement(sql, Statement.RETURN_GENERATED_ ...
内网架设SVN服务器相关设置
环境说明: 外网IP为静态IP,工作室内有多台电脑,公用一台路由器.想要在某台电脑上架设SVN服务器,方便团队开. 解决方案: 一.准备工作1.获取 Subversion 服务器程序到官 ...

用JQuery编写textarea,input,checkbox,select

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

随机推荐

热门专题