首页
所有分类
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 相关文章推荐
基于jQuery的左右滚动实现代码
Dec 03 Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
理解JS绑定事件
Jan 19 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
react-native android状态栏的实现
Jun 15 Javascript
js实现下拉框二级联动
Dec 04 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 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) 鉴频器(1) 实习报告(1) 频率(1) AM(1) 灵敏度(1) 高放电路(1) 电路(15) 发烧友(1) 频偏(1)
You might like
Re：从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
PHP字符串函数系列之nl2br()，在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
php swoft框架实例用法
2020/12/22 PHP
DEFER怎么用？
2006/07/01 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
JavaScript 题型问答有答案参考
2010/02/17 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
Python装饰器用法示例小结
2018/02/11 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
Python 定义只读属性的实现方式
2020/03/05 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
成人大专生实习期的自我评价
2013/10/02 职场文书
商务会议邀请函
2014/01/09 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
使用Pytorch训练two-head网络的操作
2021/05/28 Python
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技