jQuery 表单事件和表单样式

表单有2个基本组成部分

表单域：包含处理表单数据所用的服务器端程序URL以及数据提交到服务器端的方法。

 表单元素：包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。

表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上或者取消传送，还可以用来控制其他定义了处理脚本的处理工作。

单行文本框应用

文本框是表单域中最基本的元素，基于文本框的应用有很多。设置添加和失去焦点事件：

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

复选框应用

 当使用全选功能时可以使用prop（）方法设置属性checked的值使复选框选中：

$("#checkedAll“).click(function(){
    $('[name=items]:checkbox").prop('checked",true);
});

如果是不选操作设置为false就可以了。

反选操作稍微复杂一些，可以使用非运算符！

$("#checkedRev").click(fucntion(){
$('[name=items]:checkbox').each(function(){
$(this).attr("checked",$!(this).prop("checked"));
});
});
 

表格样式应用

表格奇数行和偶数行变色效果

$("tr :odd").addClass("odd");//给奇数行添加样式
$("tr:even").addClass("even");//给偶数行添加样式

odd和even选择器索引是从0开始的所以第1行是偶数。

以上代码将表头也算进去，因此需要排除表格头部<thead>中的<tr>

$("tbody>tr:odd").addClass("odd");

如果还需要将某一行变为高亮显示状态，那么可以是哦你contains选择器来实现。

例如：“123”这行，代码如下：
$("tr:contains('123')").addClass("selected");

为表格内单击行进行操作

$('tbody>tr').click(funcition(){
$(this).addClass('selected')
.siblings().removeClass('selected')
.find(':radio').prop('checked',true);
});