jQuery对表单、表格的操作

表单应用

单行文本框应用

文本框获取获取和失去焦点改变样式。 首先在CSS中添加一个类名为focus的样式：

.focus{ border:1px solid #f00; background:#fcc; }

然后为文本框添加获取和失去焦点的事件

$(function(){ $("input").focus(function(){ $(this).addClass("focus"); }).blur(function(){ $(this).removeClass("focus"); }); });

多行文本框应用

高度变化：jQuery代码

$(function(){ var $comment = $("#comment"); $(".bigger").click(function(){ if(!$comment.is(":animated")){ 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); } } }); });

滚动条变化：jQuery代码：

$(function(){ var $comment = $("#comment"); $(".up").click(function(){ if(!$comment.is(":animated")){ $comment.animate({scrollTop:"-=50"},400); } }); $(".down").click(function(){ if(!$comment.is(":animated")){ $comment.animate({scrollTop:"+=50"},400); } }); });

复选框应用

全选：

$("#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 = "你选中的是："； $("[name=items]:checkbox:checked").each(function(){ str = str + $(this).val(); }); alert(str); });

表格应用

表格变色

普通的隔行变色： CSS代码：

.even{background:#fff38f}; .odd{background:#ffffee};

jQuery代码：

$(function(){ $("tr:odd").addClass("odd"); $("tr:even").addClass("even"); });