首页
所有分类
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 相关文章推荐
关于跨站脚本攻击问题
Dec 22 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
小白谈谈对JS原型链的理解
May 03 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
JS数组交集、并集、差集的示例代码
Aug 23 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 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
mp3Play(1) 数据处理(2) Pool(1) apply(1) 音频(1) pandas(7) WebSockets(3) GUI(2) agg(1) Tkinter(4)
You might like
十天学会php之第六天
2006/10/09 PHP
php 验证码实例代码
2010/06/01 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
pyv8学习python和javascript变量进行交互
2013/12/04 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
Lulu & Georgia官方网站：购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
猫咪家具：CatsPlay
2018/11/03 全球购物
小学生秋游活动方案
2014/02/23 职场文书
一句话工作感言
2014/03/01 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
小学生作文评语
2014/04/18 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
金陵十三钗观后感
2015/06/04 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js