JQuery操作textarea,input,select,checkbox方法
更新時(shí)間：2015年09月02日 08:50:12 投稿：hebedich
本文給大家匯總介紹了一些JQuery操作textarea,input,select,checkbox的方法和技巧，十分的簡單實(shí)用，都是小編項(xiàng)目中使用過的，這里推薦給大家。
今天學(xué)習(xí)怎樣用JQuery編寫一些小的代碼,小小的試了一下編寫一個(gè)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(){//綁定擴(kuò)大按鈕
if(!$comment.is(":animated")){//判斷對象是否處于動畫狀態(tài),不是才執(zhí)行里面代碼
if($comment.height()<500){
$comment.animate({
height : "+=50"
},1000);//重新設(shè)置高度,在原來的基礎(chǔ)上+50
}
}
});
$('.smaller').click(function(){//綁定縮小按鈕
if(!$comment.is(":animated")){//判斷對象是否處于動畫狀態(tài),不是才執(zhí)行里面代碼
if($comment.height()>50){
$comment.animate({
height : "-=50"
},1000);//重新設(shè)置高度,在原來的基礎(chǔ)上-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之間通過任意的協(xié)議通信，一般要求有特定的客戶端。比如QQ就是C/S模式，你的桌面上的QQ就是騰訊公司的特定的客戶端，而服務(wù)器就是騰訊的服務(wù)器。再比如你看的網(wǎng)絡(luò)電視也是如此，比如你的桌面上的iqiyi、視頻軟件等，這些軟件都是C/S模式的，他們要求在用戶有特定的客戶端(Socket)。而B/S模式是靠應(yīng)用層的http協(xié)議進(jìn)行通信的（當(dāng)然也要靠底層的好多協(xié)議支持），一般不需要特定的客戶端，而是需要有統(tǒng)一規(guī)范的客戶端，那就是你的瀏覽器！Web頁就是B/S 模式，也就是說咱們說的網(wǎng)站就是B/S模式。 </textarea>
</div>
</div>
</form>
</body>
</html>
效果圖如下:
可以流暢的放大縮小,這就是JQuery特效的優(yōu)點(diǎn).
再來一個(gè)input標(biāo)簽,代碼:
<!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:為每個(gè)匹配的元素添加指定的類名，一個(gè)或多個(gè)用空格分開，添加屬性
//val():獲得或者更改value屬性對應(yīng)的值
//defaultValue():獲取默認(rèn)值的value
//removeClass():刪除對應(yīng)的class屬性
});
</script>
</head>
<body>
<form action="" method="post" id="regForm">
<fieldset>
<legend>個(gè)人基本信息</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">詳細(xì)信息:</label>
<textarea id="msg" rows="2" cols="20">詳細(xì)信息</textarea>
</div>
</fieldset>
</form>
</body>
</html>
效果圖如下:
添加一個(gè)焦點(diǎn)和失去焦點(diǎn),默認(rèn)值,再設(shè)置一個(gè)得到焦點(diǎn)時(shí)的背景顏色
第三個(gè)呢,寫了一個(gè)select,這個(gè)東西一般在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(){
//獲取選中的項(xiàng),刪除然后再移動到右邊,這里是選擇移動;
$('#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');
})
//雙擊選項(xiàng)
$('#select1').dblclick(function(){
//這里先定位#select1這個(gè)大的選擇框,然后定位到里面的被選擇的元素組陳的集合
//this就是表示這個(gè)集合,當(dāng)我們按Ctrl或者shift的時(shí)候,我們操作的就是這個(gè)集合
//$("option:selected",this).appendTo("#select2");
$("option:selected",this).appendTo("#select2");
})
//雙擊選項(xiàng)
$('#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">選項(xiàng)1</option>
<option value="2">選項(xiàng)2</option>
<option value="3">選項(xiàng)3</option>
<option value="4">選項(xiàng)4</option>
<option value="5">選項(xiàng)5</option>
<option value="6">選項(xiàng)6</option>
<option value="7">選項(xiàng)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">選項(xiàng)8</option>
</select>
<div>
<span id="remove"><<選中刪除到左邊</span>
<span id="remove_all"><<全部刪除到左邊</span>
</div>
</div>
</body>
</html>
效果圖如下:
將左邊的選項(xiàng)移到右邊,且可雙擊,可多選添加,哈哈,寫代碼的時(shí)候很有意思,
操作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;
}
}
}
相關(guān)文章
Jquery 表單驗(yàn)證類介紹與實(shí)例，需要的朋友可以參考一下2013-06-06
下面就日常最常用的，在Form表單中如何獲取被中選的Radio值做一小小的示例，感興趣的朋友可以參考下2013-08-08
jQuery.parseJSON(json)將JSON字符串轉(zhuǎn)換成js對象
本節(jié)主要介紹了使用jQuery.parseJSON(json)將JSON字符串轉(zhuǎn)換成js對象,需要的朋友可以參考下2014-07-07
萬年歷，想必大家對它都不陌生吧，下面是使用jquery寫的一個(gè)萬年歷示例，喜歡的朋友可以參考下2014-01-01
這篇文章主要介紹了jquery使用jxl插件導(dǎo)出excel的具體實(shí)現(xiàn)步驟,需要的朋友可以參考下2014-04-04
jquery實(shí)現(xiàn)可自動判斷位置的彈出層效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)可自動判斷位置的彈出層效果代碼,可實(shí)現(xiàn)根據(jù)鼠標(biāo)位置進(jìn)行合理的判斷并顯示彈出層的功能,涉及jQuery鼠標(biāo)事件及頁面元素位置屬性的相關(guān)判定技巧,需要的朋友可以參考下2015-10-10
jQuery實(shí)現(xiàn)鼠標(biāo)響應(yīng)式淘寶動畫效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)響應(yīng)式淘寶動畫效果,涉及jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下2018-02-02
這篇文章主要為大家詳細(xì)介紹了zTree節(jié)點(diǎn)文字過多的處理方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了jQuery Ajax使用實(shí)例,本文講解了$.ajax的一般格式、$.ajax的參數(shù)描述、$.ajax需要注意的一些地方、$.ajax我的實(shí)際應(yīng)用例子,需要的朋友可以參考下2015-04-04
jQuery監(jiān)控文本框事件并作相應(yīng)處理的方法
這篇文章主要介紹了jQuery監(jiān)控文本框事件并作相應(yīng)處理的方法,涉及jQuery操作文本框的技巧,需要的朋友可以參考下2015-04-04