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

随机推荐

教程-DelphiXE7如何调用Java Class，JAR等文件？
源文地址:http://jingyan.baidu.com/article/e4d08ffdb61b040fd3f60d44.html 第一步,我们先在互联网上把java2pas这个工具下载下来. 下 ...
stm32 时钟配置——外部时钟倍频、内部时钟倍频【worldsing笔记】
stm32可选的时钟源在STM32中,可以用内部时钟,也可以用外部时钟,在要求进度高的应用场合最好用外部晶体震荡器,内部时钟存在一定的精度误差. 准确的来说有4个时钟源可以选分别是HSI.LSI.H ...
【Stage3D学习笔记续】山寨Starling（一）：从事件说起
我在GitHub上新开了一个项目:https://github.com/hammerc/hammerc-study-Stage3D 山寨的Starling版本我取名叫做Scorpio2D,以后的笔记中 ...
CDOJ 1157 数列(seq) 分块+线段树
数列(seq) Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/1157 Desc ...
FloatingWindow
https://github.com/dev0x10/android-bubble https://github.com/dev0x10/FloatingView https://github.com ...
解决安装包在win7,win8系统下安装后运行没有管理员权限
今天打包一个程序在客户机上安装运行:一直报没有管理员权限:客户机是win8系统:直接右键管理员身份运行则都可以:为了避免不让用户每次都这么麻烦:只有问哈群友和百度,终于找到解决方法: 第一步:项目属性 ...
Linux 服务器相关的一下链接
Apache 虚拟主机 VirtualHost 配置以下是各操作系统的配置方法. Redhat Enterprise Linux Ubuntu Linux Windows Mac OS http:/ ...
php开发环境以及插件的配置安装
目前网上提供的常用的PHP集成环境主要有AppServ.phpStudy.WAMP和XAMPP等软件
使用TortoiseGit对Git版本进行分支操作
版本克隆分支问题 TortoiseGit在克隆分支的时候,默认克隆master分支,克隆后本地工作目录为中心器的Master分支. 克隆后本地分支中心库分支 Push分支到中心服务器(Pushing ...
maven系列之二maven项目的创建和maven项目的结构
maven系列之一简单介绍了maven的基本信息,安装和配置,大家对maven有一个大概的了解,但是在maven项目开发中远远不够,为了进一步了解maven,现在我们介绍maven项目的创建和mave ...

用JQuery编写textarea,input,checkbox,select

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

随机推荐

热门专题