用JQuery编写textarea,input,checkbox,select
今天学习怎样用JQuery编写一些小的代码,小小的试了一下编写一个textarea,代码如下:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css" media="screen">
*{
margin :;
padding :;
font : normal 12px/17px Arial;
}
.msg{
width :300px;
margin : 100px;
}
.msg_caption{
width :%;
overflow : hidden;
margin-botton : 1px;
}
.msg_caption span{
display : block;
float : left;
margin : 2px;
padding :4px 10px;
background :#;
cursor : pointer;
color : white;
}
.msg textarea{
width :300px;
height : 80px %;
border :1px solid #;
}
</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()<){
$comment.animate({
height : "+=50"
},);//重新设置高度,在原来的基础上+50
}
}
});
$('.smaller').click(function(){//绑定缩小按钮
if(!$comment.is(":animated")){//判断对象是否处于动画状态,不是才执行里面代码
if($comment.height()>){
$comment.animate({
height : "-=50"
},);//重新设置高度,在原来的基础上-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="" cols="">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 #;
}
.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="" cols="">详细信息</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:; padding:; }
div.centent {
float:left;
text-align: center;
margin: 10px;
}
span {
display:block;
margin:2px 2px;
padding:4px 10px;
background:#;
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</option>
<option value="">选项2</option>
<option value="">选项3</option>
<option value="">选项4</option>
<option value="">选项5</option>
<option value="">选项6</option>
<option value="">选项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</option>
</select>
<div>
<span id="remove"><<选中删除到左边</span>
<span id="remove_all"><<全部删除到左边</span>
</div>
</div>
</body>
</html>
效果图如下:
将左边的选项移到右边,且可双击,可多选添加,哈哈,写代码的时候很有意思,
感谢,望斧正!
用JQuery编写textarea,input,checkbox,select的更多相关文章
- jQuery 如何设置input checkbox 更有效 prop()
问题:经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法获取其真实值,下面介绍这两种方法的区别: 1.通过prop方法获取checked属性 ...
- 一个实例 ---灵活使用jquery选择器实现input一个key，多个value 。 用ajax传递对象到后台控制器
标题可能不是很清晰,我们看实例: 简单来说就是需要实现sku的功能...一件商品可以有多个属性, 一个属性可以有多个值 . 最后以json格式存到数据库 难点一: 如何实现input输入框的弹性使用 ...
- 【jQuery获取下拉框select、单选框radio、input普通框的值和checkbox选中的个数】
radio单选框:name属性相同 <input type="radio" id="sp_type" name="p_type" va ...
- jquery 获取和设置 checkbox radio 和 select option的值?
============== 获取和设置 checkbox radio 和 select的值? === val()函数, 其名字就表达了 它的意思: 他就是＝ value 的简写! val就是valu ...
- [转]jQuery操作radio、checkbox、select 集合.
1.radio:单选框 html代码 <input type="radio" name="radio" id="radio1" val ...
- Jquery操作radio,checkbox,select表单操作实现代码
一 .Select jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); / ...
- jQuery操作radio、checkbox、select 集合
1.radio:单选框 HTML代码: <input type="radio" name="radio" id="radio1" va ...
- jQuery操作radio、checkbox、select总结
1.radio:单选框 HTML代码: <input type="radio" name="radio" id="radio1" va ...
- jquery 取指定class下的input checkbox选中的值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- PC问题-使用BAT方法清理Delphi临时文件
@echo offdel /S *.~*del /S *.dcudel /S *.dskdel /S *.hppdel /S *.ddpdel /S *.mpsdel /S *.mptdel /S * ...
- 新浪新闻API接口
头条 http://api.sina.cn/sinago/list.json?channel=news_toutiao推荐 http://api.sina.cn/sinago/list.json?ch ...
- 转载LINQ TO Entity 在数据库发生更改时更新实体数据模型 .edmx 文件
转载原出处:http://blog.csdn.net/litao2/article/details/8629335 在“模型浏览器”中,右击 .edmx 文件,然后选择“从数据库更新模型”. 模型更新 ...
- 【STL源码学习】STL算法学习之三
第一章:前言 数量不多,用到的时候会很爽. 第二章:明细 STL算法中的又一个分类:分割:将已有元素按照既定规则分割成两部分. is_partitioned 函数原型: template <c ...
- iOS 9 学习系列：UIStack View （转载）
作者:Nathan_Bao 地址:http://www.jianshu.com/p/1991e6c2881a 在 iOS9 中,Apple 引入了 UIStackView,他让你的应用可以通过简单的方 ...
- android应用程序fps meter[帧数显示]的分析 —— 浅谈root的风险 (3)
上节已经详细说了下注入过程,最后寄生进程在宿主进程中下了个蛋,这下完的蛋有什么作用呢?接下来再具体分析一下. lib0的感染过程分析 对于本例注入的so动态库,首先看一下so的符号: $ readel ...
- 经常使用的webservice接口
Web Service 一些对外公开的网络服务接口 2011-10-29 14:12 商业和贸易: 1.股票行情数据 WEB 服务(支持香港.深圳.上海基金.债券和股票:支持多股票同一时候查询) En ...
- 笔记本禁用自带键盘攻略-------针对shift默认按下的解决方案
长期以来楼主一直被一个问题困扰,就是win8进入界面,输密码时开大写其实是小写,开小写是大写.进入系统以后shift键是默认按下的.一直以为是电脑中毒了.上网查了一些东西,发现可能是因为键盘硬件方面的 ...
- java基础复习之对于String对象，能够使用“=”赋值，也能够使用newkeyword赋值，两种方式有什么差别？
String类型是实际工作中经经常使用到的类型,从数据类型上划分,String是一个引用类型,是API中定义的一个类.所以String类型的对象能够用new创建,比如String name=new S ...
- DOS 命令 attrib：修改文件属性
有时候系统中病毒之后会把自己的所有文件的属性改为隐藏只读格式,如果手动修改的话太麻烦并且浪费时间,不如用 Attrib 命令试试. 步骤: 1:开始->运行,在里面输入 cmd,打开命令行界面: ...