首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JQuery操作textarea,input,select,checkbox方法

Posted in Javascript onSeptember 02, 2015

今天学习怎样用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操作textarea,input,select,checkbox方法

可以流畅的放大缩小,这就是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>

效果图如下:

JQuery操作textarea,input,select,checkbox方法

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

第三个呢,写了一个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>

效果图如下:

JQuery操作textarea,input,select,checkbox方法

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

操作checkbox

html

<a href="javascript:;" id="all">全部选择</a><br>
 <a href="javascript:;" id="delAll">取消选择</a><br>
 <a href="javascript:;" id="antiAll">反向选择</a>   
 <p><input type="checkbox" name="checkbox1">A
 <input type="checkbox" name="checkbox1"> B
 <input type="checkbox" name="checkbox1">C</p>
 <p><input type="checkbox" name="checkbox1">D
 <input type="checkbox" name="checkbox1">E
 <input type="checkbox" name="checkbox1">F</p>

 Jquery部分 

//全部选择
 $("#all").click(function(){ 
 $("input[name='checkbox1']").each(function(){
  $(this).attr("checked",true);
 }); 
 });

普通javascirpt部分：

function checkAll(){
 for(i=0;i<newTask.length;i++){
 e=newTask.elements[i];
 if(e.type=='checkbox'){
  if(e.checked=false){
  e.checked=true;
  }else{
  e.checked=true;
  }
 }
 } 
}

取消选择代码:

Jquery部分：

//取消选择
 $("#delAll").click(function(){ 
 $("input[name='checkbox1']").each(function(){
  $(this).attr("checked",false);
 }); 
 });

普通javascript部分：

function delAll(){
 for(i=0;i<newTask.length;i++){
 e=newTask.elements[i];
 if(e.type=='checkbox'){
  if(e.checked=true){
  e.checked=false;
  }
  else{
  e.checked=false;
  }
 }
 }
}

反向选择代码：

Jquery部分： 

//反向选择
 $("#antiAll").click(function(){
 $("input[name='checkbox1']").each(function(){
  $(this).attr("checked",!this.checked);       
   });

普通javascript部分：

function antiAll(){
 for(i=0;i<newTask.length;i++){
 e=newTask.elements[i];
 if(e.type=='checkbox'){
  e.checked=!e.checked;
 }
 }
}

JQuery操作textarea,input,select,checkbox方法

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript - HTML的request类
Jul 15 Javascript
JavaScript使用cookie
Feb 02 Javascript
JS URL传中文参数引发的乱码问题
Sep 02 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
一个不错的仿携程自定义数据下拉选择select
Sep 01 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 Javascript
微信小程序实现留言功能
Oct 31 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
JS实现简易留言板（节点操作）
Mar 16 Javascript
javascript中for/in循环及使用技巧
Sep 01 #Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 #Javascript
JavaScript中this详解
Sep 01 #Javascript
JS实现的自定义右键菜单实例二则
Sep 01 #Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 #Javascript
jquery常用函数与方法汇总
Sep 01 #Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 #Javascript
匹配(1) postcss-px2rem(1) lua(3) 索引树扫描(1) 全表扫描(1) 绝对定位(1) ref(1) sql模式(1) geoserver(1) 相对定位(1)
You might like
PHP 的 __FILE__ 常量
2007/01/15 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
List the Codec Files on a Computer
2007/06/11 Javascript
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
[09:23]国际邀请赛采访专栏：iG战队VK，Tongfu战队Cu
2013/08/05 DOTA
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
python 多线程应用介绍
2012/12/19 Python
在Python下进行UDP网络编程的教程
2015/04/29 Python
python select.select模块通信全过程解析
2017/09/20 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
python的等深分箱实例
2019/11/22 Python
台湾演唱会订票网站：StubHub台湾
2019/06/11 全球购物
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
酒店总经理欢迎词
2014/01/08 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
3的组成教学反思
2014/04/30 职场文书
给公司的建议书范文
2014/05/13 职场文书
李敖北大演讲稿
2014/05/24 职场文书
店铺转让协议书
2015/01/29 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
经典人生语录分享：不畏将来，不念过去，笑对当下
2019/12/12 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
JavaScript异步操作中串行和并行
2021/11/20 Javascript
javascript之Object.assign()的痛点分析
2022/03/03 Javascript