JQuery操作textarea,input,select,checkbox方法
更新時(shí)間：2015年09月02日 08:50:12 投稿：hebedich
本文給大家匯總介紹了一些JQuery操作textarea,input,select,checkbox的方法和技巧，十分的簡(jiǎn)單實(shí)用，都是小編項(xiàng)目中使用過(guò)的，這里推薦給大家。
今天學(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")){//判斷對(duì)象是否處于動(dòng)畫狀態(tài),不是才執(zhí)行里面代碼
if($comment.height()<500){
$comment.animate({
height : "+=50"
},1000);//重新設(shè)置高度,在原來(lái)的基礎(chǔ)上+50
}
}
});
$('.smaller').click(function(){//綁定縮小按鈕
if(!$comment.is(":animated")){//判斷對(duì)象是否處于動(dòng)畫狀態(tài),不是才執(zhí)行里面代碼
if($comment.height()>50){
$comment.animate({
height : "-=50"
},1000);//重新設(shè)置高度,在原來(lái)的基礎(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之間通過(guò)任意的協(xié)議通信，一般要求有特定的客戶端。比如QQ就是C/S模式，你的桌面上的QQ就是騰訊公司的特定的客戶端，而服務(wù)器就是騰訊的服務(wù)器。再比如你看的網(wǎng)絡(luò)電視也是如此，比如你的桌面上的iqiyi、視頻軟件等，這些軟件都是C/S模式的，他們要求在用戶有特定的客戶端(Socket)。而B(niǎo)/S模式是靠應(yīng)用層的http協(xié)議進(jìn)行通信的（當(dāng)然也要靠底層的好多協(xié)議支持），一般不需要特定的客戶端，而是需要有統(tǒng)一規(guī)范的客戶端，那就是你的瀏覽器！Web頁(yè)就是B/S 模式，也就是說(shuō)咱們說(shuō)的網(wǎng)站就是B/S模式。 </textarea>
</div>
</div>
</form>
</body>
</html>
效果圖如下:
可以流暢的放大縮小,這就是JQuery特效的優(yōu)點(diǎn).
再來(lái)一個(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è)用空格分開(kāi)，添加屬性
//val():獲得或者更改value屬性對(duì)應(yīng)的值
//defaultValue():獲取默認(rèn)值的value
//removeClass():刪除對(duì)應(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(){
//移動(dòng)到右邊
$("#add").click(function(){
//獲取選中的項(xiàng),刪除然后再移動(dòng)到右邊,這里是選擇移動(dòng);
$('#select1 option:selected').appendTo('#select2');
});
//移動(dòng)到左邊
$("#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)文章
這篇文章主要介紹了8款超贊的jQuery評(píng)分插件，推薦給大家，有需要的小伙伴可以參考下2015-08-08
修改checkbox時(shí)..jquery在取checked值時(shí)總是出這樣那樣的問(wèn)題....各個(gè)版本之間還有少許的差異....當(dāng)向后臺(tái)發(fā)送數(shù)據(jù)后,,再返回到當(dāng)前頁(yè)時(shí)..checked的狀態(tài)始終不對(duì)2012-08-08
這篇文章主要介紹了jquery實(shí)現(xiàn)聚光燈效果的方法,可實(shí)現(xiàn)鼠標(biāo)滑過(guò)圖片時(shí)顯示當(dāng)前圖片高亮,其他圖片變暗的聚光燈效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
在某些特殊的情況下是需要?jiǎng)討B(tài)生成表格的，下面為大家詳細(xì)介紹下使用jquery是如何做到的，感興趣的朋友不要錯(cuò)過(guò)2013-12-12
JQuery實(shí)現(xiàn)表格中相同單元格合并示例代碼
一定要注意如果從list的開(kāi)始元素循環(huán)下去，remove掉一個(gè)元素后，有些元素就找不到了或者說(shuō)不是要找的那個(gè)元素，感興趣的各位可以研究下哈2013-06-06
JQuery通過(guò)鍵盤控制鍵盤按下與松開(kāi)觸發(fā)事件
這篇文章主要介紹了JQuery通過(guò)鍵盤控制鍵盤按下與松開(kāi)觸發(fā)事件，文章通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
下面小編就為大家?guī)?lái)一篇基于hover的用法實(shí)例(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
JQuery里面的幾種選擇器 查找滿足條件的元素$("#控件ID")
JQuery里面的幾種選擇器 查找滿足條件的元素$("#控件ID"),使用jquery的朋友可以參考下。2011-08-08
JQuery AJAX 中文亂碼問(wèn)題解決，需要的朋友可以參考一下2013-06-06
jquery實(shí)現(xiàn)兩個(gè)div中的元素相互拖動(dòng)的方法分析
這篇文章主要介紹了jquery實(shí)現(xiàn)兩個(gè)div中的元素相互拖動(dòng)的方法,結(jié)合實(shí)例形式分析了jQuery基于鼠標(biāo)事件響應(yīng)的頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-04-04