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 ...
随机推荐
- Android安卓开发环境搭建详细教程
安装目录:步骤1 安装JDK步骤2 安装 Android SDK ----http://www.androiddevtools.cn/ 步骤3 安装Tomcat步骤4 安装Ant步骤5 安装Eclip ...
- Linux下查看进程和线程
在linux中查看线程数的三种方法 1.top -H 手册中说:-H : Threads toggle 加上这个选项启动top,top一行显示一个线程.否则,它一行显示一个进程. 2.ps xH 手册 ...
- 超级内存NVDIMM：下一代数据中心存储关键技术
1.背景介绍 连接到互联网的设备数量不断增长,到2015年,将达到150亿之多.而数据中心的压力也随之增加,唯有采用新的技术才能进一步提升其效率和性能. 相比于HDD传统硬盘,固态硬盘大大增加了I/O ...
- linux 如何让程序后台执行
$ (./test.sh &) $ setsid ./test.sh & $ nohup ./test.sh & 具体的转自:http://digdeeply.or ...
- QT 读取文件夹下所有文件（超级简单的方法，不需要QDirIterator）
之前,用标准C++写过读取文件夹.现在用QT重写代码,顺便看了下QT如何实现,还是相当简单的.主要用到QDir,详细文档可见这里 A program that lists all the files ...
- Struts2笔记——Action校验器
在struts2中,我们可以实现对action的所有方法进行校验或者对action的指定方法进行校验. 对于输入校验struts2提供了两种实现方法: 1.采用手工编写代码实现. 2.基于XML配置 ...
- c++ 在客户端的GCC使用
c++ 在客户端的GCC使用 翻译自: GCC是GNU工具箱的一个功能,GNU还包括如下功能: GNU compiler collection (GCC) GNU make GNU Debugger ...
- thrift 安装介绍
一.About thrift thrift是一种可伸缩的跨语言服务的发展软件框架.它结合了功能强大的软件堆栈的代码生成引擎,以建设服务,工作效率和无缝地与C + +,C#,Ja ...
- C# winform窗体假死
C# winform窗体假死 我们经常会遇到当执行一个比较大的函数时,窗体会出现假死的现象,给用户的体验不是很好,于是我们遇到了问题,那么就必须解决,我们该如何解决呢,首先在自己的脑里画个问号,接下 ...
- [HDOJ2196]Computer （树直径, 树DP）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2196 给一棵树,求树上各点到某点的距离中最长的距离.注意每个点都要求. 和普通求树的直径不一样,要求每 ...