用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/ ...
随机推荐
- A Tour of Go Exercise: Fibonacci closure
Let's have some fun with functions. Implement a fibonacci function that returns a function (a closur ...
- [OC Foundation框架 - 3] 指向指针的指针
使用函数改变NSString void changeStr2(NSString **str3) { *str3 = "; } int main(int argc, const char * ...
- 转载Linq中GroupBy方法的使用总结
Group在SQL经常使用,通常是对一个字段或者多个字段分组,求其总和,均值等. Linq中的Groupby方法也有这种功能.具体实现看代码: 假设有如下的一个数据集: public class St ...
- 【Away3D代码解读】（五）：动画模块及骨骼动画
动画模块核心存放在away3d.animators包里: Away3D支持下面几种动画格式: VertexAnimator:顶点动画 SkeletonAnimator:骨骼动画 UVAnimator: ...
- 《MEF程序设计指南》博文汇总
<MEF程序设计指南>博文汇总 在MEF之前,人们已经提出了许多依赖注入框架来解决应用的扩展性问题,比如OSGI 实现以Spring 等等.在 Microsoft 的平台上,.NET Fr ...
- MySQL 索引、视图、DML
1.索引 索引是存放在模式(schema)中的一个数据库对象,索引的作用就是提高对表的检索查询速度, 索引是通过快速访问的方法来进行快速定位数据,从而减少了对磁盘的读写操作. 索引是数据库的一个对象, ...
- webService 接口调用配置
1.配置XML文件,如果新建一个XML文件需要在applicationContext.xm里面配置一下 <import resource="cxf-client.xml" / ...
- JNI-使用RegisterNatives注册本地方法
转自: http://blog.chinaunix.net/uid-26009923-id-3410141.html 1. 以前在jni中写本地方法时,都会写成 Java_com_example_he ...
- MyBatis简介与配置MyBatis+Spring+MySql
MyBatis学习 之 一.MyBatis简介与配置MyBatis+Spring+MySql MyBatis学习 之 二.SQL语句映射文件(1)resultMap MyBatis学习 之 二.SQL ...
- Postfix配置Q&A
原文地址:http://space.doit.com.cn/51460/viewspace-4943.html 在配置Postfix中遇到的一些问题及相关的解决方法,希望在遇到相同的问题时能起参考的作 ...