表单应用
一个表单有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 = "您选中的是:
";
$("[name = items]:checkbox:checked").each(function() {
str += $(this).val() + "
";
});
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>