HTML 学习笔记 JQuery（表单,表格 操作）
表单应用
一个表单有3个基本组成部分
(1)表单标签:包含处理表单数据所用的服务器端程序URL 以及数据提交到服务器的方法
(2)表单域:包含文本框 密码框 隐藏框 多行文本框 复选框 单选框 下拉选择框和文件上传框。
(3)表单按钮:包括提交按钮 复位按钮和一般按钮 用于将数据传送到服务器上或者取消传送，还可以用来控制其他定义了脚本的处理器处理工作。
为不支持伪类的浏览器上的文本框添加获取焦点 失去焦点的样式变化
代码如下:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*input:focus,textarea:focus {
border: 1px solid #FF0000;
background: #ffcccc;
}*/
.focus {
border: 1px solid#FF0000;
background: #FFCCCC;
}
</style>
<script src="../js/jquery-2.1.1.min.js"></script>
</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>
<script>
$(function() {
$(":input").focus(function() {
$(this).addClass("focus");
}).blur(function() {
$(this).removeClass("focus");
});
});
</script>
</body>
</html>
多行文本框应用
(1)高度变化
代码如下：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-2.1.1.min.js"></script>
</head>
<body>
<form>
<div class="msg">
<div class="msg_caption">
<span class="bigger">放大</span>
<span class="smaller">缩小</span>
</div>
<div>
<textarea id="comment" rows="8" cols="20">
多行文本框高度变化 多行文本框高度变化
多行文本框高度变化 多行文本框高度变化
多行文本框高度变化 多行文本框高度变化
多行文本框高度变化 多行文本框高度变化
</textarea>
</div>
</div>
</form>
<script>
$(function() {
var $comment = $("#comment");
$(".bigger").click(function() {
if ($comment.height() < 500) {
$comment.animate({"height":"+=50"},400);
}
});
$(".smaller").click(function() {
if (!$comment.is(":animated")) {
if ($comment.height() > 50) {
$comment.animate({"height":"-=50"},400);
}
}
});
});
</script>
</body>
</html>
(2)滚动条高度变化
在多行文本框中，还有另外一个应用，就是通过控制多行文本框的滚动条的变化，使文本框里面的内容滚动。
与控制高度的方法相同，只不过此处需要控制的是另外一个属性，即scrollTop。将以上代码修改如下
$(function() {
var $comment = $("#comment");
$(".bigger").click(function() {
$comment.animate({"scrollTop":"+=50"},400);
});
$(".smaller").click(function() {
if (!$comment.is(":animated")) {
$comment.animate({"scrollTop":"-=50"},400);
}
});
});
复选框应用
对复选框的最基本的应用就是对复选框进行全选 反选 和全不选等操作。复杂的操作需要与选项挂钩，来达到各种级联的反应效果。
首先在空白网页中创建一个表单 其中放入一组复选框 HTML代码如下
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-2.1.1.min.js"></script>
</head>
<body>
<form action="#" method="post">
你最喜欢的运动是?
<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="checkeAll" value="全选" />
<input type="button" id="checkeNo" value="全bu选" />
<input type="button" id="checkerev" value="反选" />
<input type="button" id="send" value="提交" /> </form>
</body>
</html>
如果需要复选框处于选中状态或者不选状态，必须通过控制元素的checked属性来达到目的，如果属性为true，说明被选中，如果值为false则说明没被选中。
全选操作就是当用户点击全选按钮的时候，需要讲复选框全部选中，此时需要为全选按钮绑定单击事件，然后使用选择器寻找符合要求的复选框。通过attr()方法来设置属性checked的值，使之选中。代码如下
$("#checkeAll").click(function() {
$("[name = items]:checkbox").attr("checked",true);
});
全不选操作
$("#checkeNo").click(function() {
$("[name = items]:checkbox").attr("checked",false);
});
反选操作
$("#checkerev").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);
});
表格应用
HTML代码
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table thead th{
width: 80px;
text-align: left;
margin: 0px;
border-style: none;
border-bottom: 1px solid darkgray;
}
table {
border-collapse:collapse;
}
table tbody td {
border-style: none;
}
.even{
background: #fff38f;
}
.odd {
background: #ffffee;
}
</style>
<script src="../js/jquery-2.1.1.min.js"></script>
</head>
<body>
<table border="1px solid blue">
<thead>
<tr><th>姓名</th><th>性别</th><th>曾驻地</th></tr>
</thead>
<tbody>
<tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>
</tbody>
</table>
<script>
//隔行变色
$(function() {
//偶数行
$("tr:odd").addClass("odd");
//奇数行
$("tr:even").addClass("even");
});
</script>
</body>
</html>
上面的变色 表头也会算进去 现在去除标头
// 选择器"tbody>tr"选取tbody中的tr
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
如果需要选中某一行进行高亮显示
//选中某一行进行高亮显示
// $("tbody>tr:contains('张三')").addClass("selected");
//点击某一行显示高亮
$("tbody>tr").click(function() {
$(this).addClass("selected");
//周边的变成普通颜色
$(this).siblings().removeClass("selected");
})
可以展开隐藏的表格
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js" ></script>
<style type="text/css">
.selected {
background: aqua;
}
</style>
</head>
<body>
<table>
<thead>
<tr><td>姓名</td><td>性别</td><td>暂住地</td></tr>
</thead>
<tbody>
<tr class="parent" id="row_01"><td colspan="3">前台组合设计</td></tr>
<tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr> <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>
<tr class="child_row_02"><td>王五</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_02"><td>王五</td><td>男</td><td>浙江宁波</td></tr> <tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr>
<tr class="child_row_03"><td>赵六</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_03"><td>赵六</td><td>男</td><td>浙江宁波</td></tr>
</tbody>
<script>
$(function() {
$("tr.parent").click(function() {
$(this).toggleClass("selected");
$(this).siblings(".child_"+this.id).toggle();//控制显示隐藏
});
});
</script>
</table>
</body>
</html>
制作选项卡
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
.table {
width: 250px;
height: 180px;
border: 1px solid brown;
padding: 0px; }
div.tab_menu {
width: 200px;
height: 30px;
margin:10px 25px 0px 25px;
}
ul li {
display: inline-block;
background: darkcyan;
width: 50px;
height: 30px;
margin: 0px 5px;
text-align: center;
line-height: 30px;
}
div.tab_box {
width: 200px;
height: 120px;
border: 1px solid darkgray;
margin: 5px 25px 10px 25px;
}
.hide {
display: none;
}
.selected {
background: aqua;
}
</style>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js" ></script>
</head>
<body>
<div class="table">
<div class="tab_menu">
<ul>
<li class="selected">时事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div class="tab_box">
<div>时事</div>
<div class="hide">体育</div>
<div class="hide">娱乐</div>
</div>
</div>
<script>
$(function() {
var $div_li = $("div.tab_menu ul li");
$div_li.click(function() {
$(this).addClass("selected").siblings().removeClass("selected");
var index = $div_li.index(this);
$("div.tab_box > div").eq(index).show().siblings().hide();
});
})
</script>
</body>
</html>
HTML 学习笔记 JQuery（表单,表格 操作）的更多相关文章
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- [学习笔记]--Jfinal 表单提交附件
近期.项目里面用到了Jfinal 里面的上传附件. Jfinal 的Controller 里面提供了一个 getFile系列方法提供文件上传. 我这里呢,是文件上传和表单參数一起提交. 页面类似下图: ...
- jQuery学习笔记2——表单操作
一.获取和设置表单的值:val()和text() 1. 获取表单的值: $("#username").val(); 2. 设置表单的值: $("#username&quo ...
- AngularJS 1.2.x 学习笔记（表单校验篇）
https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...
- vue学习笔记(六)表单输入绑定
前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...
- Symfony2学习笔记之表单
对于一个Web开发者来说,处理HTML表单是一个最为普通又具挑战的任务.Symfony2集成了一个Form组件,让处理表单变的容易起来.在这一节里,我们将从基础开始创建一个复杂的表单,学习表单类库中最 ...
- 20151223jquery学习笔记--Ajax表单提交
传统的表单提交, 需要多次跳转页面, 极大的消耗资源也缺乏良好的用户体验. 而这款form.js 表单的 Ajax 提交插件将解决这个问题.一． 核心方法官方网站: http://malsup.com ...
- angular2 学习笔记 ( Form 表单 )
refer : https://angular.cn/docs/ts/latest/guide/forms.html https://angular.cn/docs/ts/latest/cookboo ...
- [知了堂学习笔记]_Jquery_Validate 表单校验的使用
一.效果图: 二.JqueryValidate的好处 在做注册.或者类似以上的表单提交的时候,大家是不是都很烦那种,把数据拿到后台去判断, 可能经过了正则表达式之类的复杂判断,然后发现数据错误.接着通 ...
随机推荐
- 编译hadoop2.4
摘自 http://www.aboutyun.com/thread-8130-1-1.html.http://www.dataguru.cn/forum.php?mod=viewthread& ...
- elasticsearch使用jetty进行简单的权限控制
默认elasticsearch是使用netty作为http的容器,由于netty并没有权限模块,所以默认es没有任何的权限控制,直接通过http就可以进行任何操作,除非把http禁用.但如果你使用el ...
- thinkPHP16---伪静态
url伪静态通常是为了 满足更好的SEO效果,thinkPHP支持伪静态url设置,可以通过设置URL_HTML_SUFFIX的参数 随意在URL的最后添加你想要的静态后缀,而不会影响当前操作的正常执 ...
- 转：LoadRunner中参数化技术详解
LoadRunner中参数化技术详解 LoadRunner在录制脚本的时候,只是忠实的记录了所有从客户端发送到服务器的数据,而在进行性能测试的时候,为了更接近真实的模拟现实应用,对于某些信息需要每次提 ...
- Git 分支 - 分支的衍合
分支的衍合 把一个分支中的修改整合到另一个分支的办法有两种:merge 和 rebase(译注:rebase 的翻译暂定为“衍合”,大家知道就可以了.).在本章我们会学习什么是衍合,如何使用衍合,为什 ...
- 项目中常用js方法整理common.js
抽空把项目中常用js方法整理成了common.js,都是网上搜集而来的,大家一起分享吧. var h = {}; h.get = function (url, data, ok, error) { $ ...
- 表单提交中记得form表单放到table外面
帝国后台按栏目搜索文章时怎么都不生效 控制台查看原来是 栏目的select的值没有提交过去,原来由于form标签在table标签里面,导致js生成的<select>标签提交失败. 解决办 ...
- Ubuntu安装完后设置root密码
安装完Ubuntu 14.04后默认是没有主动设置root密码的,也就无法进入根用户. 相关阅读: Ubuntu 14.04 下载.安装.配置 整理汇总 页面 http://www.linuxidc. ...
- zf-关于分页的行数如何配置
公司的项目分页显示行数是在web.xml里配置的 对应的java 文件是 BaseAction 这个文件里面写的就是分页的代码
- 转:Windows下用sftp自动下载文件
远程服务器是Linux操作系统,没有ftp服务,可以ssh,数据库每天2:00会自动创建一个备份文件,本地计算机是windows操作系统,希望用sftp每天3:00下载远程服务器上的备份文件.本地系统 ...