jQuery基础知识--Form基础
form中的单行文本获取和失去焦点
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
<title></title>
<style type="text/css">
input:focus, textarea:focus {
border: 1px solid#f00;
background: #fcc;
}
.focus {
border: 1px solid#f00;
background: #fcc;
} </style>
</head>
<body> <form action="#" method="post" id="regForm">
<fieldset>
<legend>个人基本信息</legend>
<div>
<label for="username">名称:</label>
<input id="username" type="text">
</div>
<div>
<label for="pass">密码:</label>
<input id="pass" type="password">
</div>
<div>
<label for="msg">详细信息:</label>
<textarea id="msg"></textarea>
</div>
</fieldset>
</form> </body> <script type="text/javascript"> /**
* 1.单行文本框---得到焦点和失去焦点
* */ $(function () {
$(":input").focus(function () {
$(this).addClass("focus");
}).blur(function () {
$(this).removeClass("focus");
})
})
</script> </html>
更改多行文本的高度
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
<title></title>
<style type="text/css">
* { margin:0; padding:0;font:normal 12px/17px Arial; }
.msg {width:300px; margin:100px; }
.msg_caption { width:100%; overflow:hidden; margin-bottom: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;height:100px;border:1px solid #000;}
</style>
</head>
<body> <form>
<div class="msg">
<div class="msg_caption">
<span class="bigger">放大</span>
<span class="smaller">缩小</span>
</div>
<textarea id="comment" rows="8" cols="20">多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
</textarea>
</div>
</form> </body> <script type="text/javascript"> /**
* 多行文本框的高度调整
* */ $(function () {
var $comment = $('#comment');
$('.bigger').click(function () {
if(!$comment.is(":animated")) {
if($comment.height() < 500) {
//$comment.height($comment.height() + 50);//版本1
$comment.animate({height: "+=50"}, 400); }
} });
$('.smaller').click(function () {
if(!$comment.is(":animated")) {
if($comment.height() > 50) {
//$comment.height($comment.height() - 50);
$comment.animate({height: "-=50"}, 400);
}
}
});
});
</script> </html>
更改多行文本的滚动条高度
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
<title></title>
<style type="text/css">
* { margin:0; padding:0;font:normal 12px/17px Arial; }
.msg {width:300px; margin:100px; }
.msg_caption { width:100%; overflow:hidden; margin-bottom: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;height:100px;border:1px solid #000;}
</style>
</head>
<body> <form>
<div class="msg">
<div class="msg_caption">
<span class="up">向上</span>
<span class="down">向下</span>
</div>
<textarea id="comment" rows="8" cols="20">多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
</textarea>
</div>
</form> </body> <script type="text/javascript"> /**
* 多行文本框的滚动条高度调整
* */ $(function () {
var $comment = $('#comment');
$('.up').click(function () {
if(!$comment.is(":animated")) {
if($comment.height() < 500) {
$comment.animate({scrollTop: "+=50"}, 400); }
} });
$('.down').click(function () {
if(!$comment.is(":animated")) {
if($comment.height() > 50) {
$comment.animate({scrollTop: "-=50"}, 400);
}
}
});
});
</script> </html>
复选框应用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
<title></title>
<style type="text/css">
input:focus, textarea:focus {
border: 1px solid#f00;
background: #fcc;
}
.focus {
border: 1px solid#f00;
background: #fcc;
} </style>
</head>
<body> <form>
你爱好的运动是?<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球 <input type="button" id="checkedAll" value="全 选"/>
<input type="button" id="checkedNo" value="全不选"/>
<input type="button" id="checkedRev" value="反 选"/>
<input type="button" id="send" value="提交"/> </form> </body> <script type="text/javascript"> /**
* 复选框应用
* */ $(function () {
$("#checkedAll").click(function () {
$('[name=items]:checkbox').attr('checked', true);
}); $("#checkedNo").click(function () {
$('[name=items]:checkbox').attr('checked', false);
}); $("#checkedRev").click(function () {
$('[name=items]:checkbox').each(function () {
this.checked = !this.checked;
});
}); $("#send").click(function () {
var str = "你选中的是: \r\n";
$('[name=items]:checkbox:checked').each(function () {
str += $(this).val() + "\r\n";
});
alert(str);
});
})
</script> </html>
jQuery基础知识--Form基础的更多相关文章
- jQuery基础知识--Form基础(续)
下拉框应用 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...
- Linux基础知识与基础命令
Linux基础知识与基础命令 系统目录 Linux只有一个根目录,没有盘符的概念,文件目录是一个倒立的树形结构. 常用的目录功能 bin 与程序相关的文件 boot 与系统启动相关 cdrom 与Li ...
- java线程基础知识----线程基础知识
不知道从什么时候开始,学习知识变成了一个短期记忆的过程,总是容易忘记自己当初学懂的知识(fuck!),不知道是自己没有经常使用还是当初理解的不够深入.今天准备再对java的线程进行一下系统的学习,希望 ...
- day63:Linux:nginx基础知识&nginx基础模块
目录 1.nginx基础知识 1.1 什么是nginx 1.2 nginx应用场景 1.3 nginx组成结构 1.4 nginx安装部署 1.5 nginx目录结构 1.6 nginx配置文件 1. ...
- 这些C++基础知识的基础知识你都学会了吗？
一.C++基础知识 新的数据类型 C语言中的数据类型 C++中新的数据类型 思考:新的数据类型有什么好处?请看下面的代码: 可以见得:新的类型使整个程序更加简洁,程序变得易读易懂!这个就是bool ...
- Ceph基础知识和基础架构认识
1 Ceph基础介绍 Ceph是一个可靠地.自动重均衡.自动恢复的分布式存储系统,根据场景划分可以将Ceph分为三大块,分别是对象存储.块设备存储和文件系统服务.在虚拟化领域里,比较常用到的是Cep ...
- Ceph 基础知识和基础架构认识
1 Ceph基础介绍 Ceph是一个可靠地.自动重均衡.自动恢复的分布式存储系统,根据场景划分可以将Ceph分为三大块,分别是对象存储.块设备存储和文件系统服务.在虚拟化领域里,比较常用到的是Cep ...
- 算法导论 - 基础知识 - 算法基础（插入排序&归并排序）
在<算法导论>一书中,插入排序作为一个例子是第一个出现在该书中的算法. 插入排序: 对于少量元素的排序,它是一个有效的算法. 插入排序的工作方式像许多人排序一手扑克牌.开始时,我们手中牌为 ...
- web前端基础知识- Django基础
上面我们已经知道Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Sessi ...
随机推荐
- Install wxWidgets-3.0.2 on GNU/Linux Debian
转载自 http://www.binarytides.com/install-wxwidgets-ubuntu/ wxWidgets wxWidgets is an application devel ...
- EasyBCD 硬盘安装Pear OS
Pear OS是一个界面很像mac的Linux distro,基于Ubuntu,免费.可惜的是pear被一个大公司匿名收购,所以现在不更新啦,最后的版本是pear 8.有个pear的替代者elemen ...
- C和C++中结构体(struct)、联合体(union)、枚举(enum)的区别
C++对C语言的结构.联合.枚举 这3种数据类型进行了扩展. 1.C++定义的结构名.联合名.枚举名 都是 类型名,可以直接用于变量的声明或定义.即在C++中定义变量时不必在结构名.联合名.枚举名 前 ...
- Winsock IOCP模型（四篇）
http://blog.csdn.net/visualeleven/article/details/6041893 http://blog.csdn.net/visualeleven/article/ ...
- 【总结】java命令解析以及编译器，虚拟机如何定位类
学Java有些日子了,一直都使用IDE来写程序.这样的好处就是能让我连如何用命令行编译,解释执行Java源代码都不知道,就更不清楚JDK中的编译器和虚拟机(包含字节码解释器)是如何定位到类文件的.悲哀 ...
- swift：入门知识之协议与扩展
swift中使用protocol声明一个协议接口 swift中类.枚举和结构体都可以实现协议接口 swift中类中的方法都可以修改成员变量的值 swift中结构体中的方法默认是不能修改成员变量的,添加 ...
- JSP下载txt 和 Excel两种文件
JSP下载txt 和 Excel两种文件 jsp 下载txt文件和excel文件 jsp 下载txt文件和excel文件 最近做了个用jsp下载的页面 将代码贴出来 权作记录吧 1 下载txt文件 ...
- Model的绑定
ReflectedControllerDescriptor:ControllerDescriptor Controller的 public override ActionDescriptor Find ...
- 文章投稿 latex 生成 pdf的字体Embeded问题解决（转自兵马俑BBS)
此法可以把所有字体转为Embedded,先生成*.ps文件,下载ghostscrip8.51和GSView4.7 安装,用gsview4.7转换*.ps->*.pdf,在gsview中File- ...
- jquery ajax json简单的分页，模拟数据，没有封装，只显示原理
简单的分页,模拟数据,没有封装,显示原理,大家有兴趣可以自己封装,这里只是个原理过程,真正的分页也差不多是这个原理,只是请求数据不太一样,html部分: <!TOCTYPE HTML> & ...