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;
 }
 }
}
Javascript 相关文章推荐
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
JavaScript中ES6 Babel正确安装过程
Jul 18 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
详解jquery选择器的原理
Aug 01 jQuery
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
webpack常用配置总览(小结)
Nov 18 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
You might like
php中time()和mktime()方法的区别
2013/09/28 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
2019/03/18 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
js 内存释放问题
2010/04/25 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
vue+django实现下载文件的示例
2021/03/24 Vue.js
后勤园长自我鉴定
2013/10/17 职场文书
分厂厂长岗位职责
2013/12/29 职场文书
踏青活动策划方案
2014/08/19 职场文书
幼儿园开学通知
2015/04/24 职场文书
国家助学金受助感言
2015/08/01 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript