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

首頁

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:41 PM

input jquery select textarea

今天學習怎麼用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特效的優點.

再來一個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>

登入後複製

效果圖如下:

增加一個焦點和失去焦點,預設值,再設定一個得到焦點時的背景顏色

第三個呢,寫了一個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>

登入後複製

效果圖如下:

將左邊的選項移到右邊,且可雙擊,可多選添加,哈哈,寫代碼的時候很有意思,

操作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;
 }
 }
}

登入後複製

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7677

CakePHP 教程

1393

C# 教程

1207

steam的賬戶名稱是什麼格式

win11激活密鑰永久

Related knowledge

jQuery引用方法詳解：快速上手指南 Feb 27, 2024 pm 06:45 PM

jQuery引用方法詳解：快速上手指南jQuery是一個受歡迎的JavaScript庫，被廣泛用於網站開發中，它簡化了JavaScript編程，並為開發者提供了豐富的功能和特性。本文將詳細介紹jQuery的引用方法，並提供具體的程式碼範例，幫助讀者快速上手。引入jQuery首先，我們需要在HTML檔案中引入jQuery函式庫。可以透過CDN連結的方式引入，也可以下載

jQuery中如何使用PUT請求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u

jQuery如何移除元素的height屬性？ Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height屬性？在前端開發中，經常會遇到需要操作元素的高度屬性的需求。有時候，我們可能需要動態改變元素的高度，而有時候又需要移除元素的高度屬性。本文將介紹如何使用jQuery來移除元素的高度屬性，並提供具體的程式碼範例。在使用jQuery操作高度屬性之前，我們首先需要了解CSS中的height屬性。 height屬性用於設定元素的高度

jQuery小技巧：快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：&lt

使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：

如何判斷jQuery元素是否具有特定屬性？ Feb 29, 2024 am 09:03 AM

如何判斷jQuery元素是否具有特定屬性？在使用jQuery操作DOM元素時，常會遇到需要判斷元素是否具有某個特定屬性的情況。在這種情況下，我們可以藉助jQuery提供的方法來輕鬆實現這項功能。以下將介紹兩種常用的方法來判斷一個jQuery元素是否具有特定屬性，並附上具體的程式碼範例。方法一：使用attr()方法和typeof運算子//判斷元素是否具有特定屬

了解jQuery中eq的作用及應用場景 Feb 28, 2024 pm 01:15 PM

jQuery是一種流行的JavaScript庫，被廣泛用於處理網頁中的DOM操作和事件處理。在jQuery中，eq()方法是用來選擇指定索引位置的元素的方法，具體使用方法和應用場景如下。在jQuery中，eq()方法選擇指定索引位置的元素。索引位置從0開始計數，即第一個元素的索引是0，第二個元素的索引是1，依此類推。 eq()方法的語法如下：$("s

使用jQuery為表格新增一行的方法介紹 Feb 29, 2024 am 08:12 AM

jQuery是一個受歡迎的JavaScript函式庫，廣泛用於網頁開發。在網頁開發過程中，經常需要透過JavaScript動態地在表格中新增一行。本文將介紹如何使用jQuery為表格新增一行，並提供具體的程式碼範例。首先，我們需要在HTML頁面中引入jQuery函式庫。可以透過以下程式碼在標籤中引入jQuery庫：

See all articles

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

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題