javascript之表单操作

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

//全选
$("#CheckedAll").click(function(){
        //所有checkbox跟着全选的checkbox走。
        $('[name=items]:checkbox').attr("checked", this.checked );
        });
$('[name=items]:checkbox').click(function(){
        //定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提升程序效率。
        var $tmp=$('[name=items]:checkbox');
        //用filter方法筛选出选中的复选框。并直接给CheckedAll赋值。
        $('#CheckedAll').attr('checked',$tmp.length==$tmp.filter(':checked').length);

        /*
        //一行做过多的事情需要写更多注释。复杂选择器还可能影响效率。因此不推荐如下写法。
        $('#CheckedAll').attr('checked',!$('[name=items]:checkbox').filter(':not(:checked)').length);
         */
        });
//输出值
$("#send").click(function(){
        var str="你选中的是：\r\n";
        $('[name=items]:checkbox:checked').each(function(){
            str+=$(this).val()+"\r\n";
            })
        alert(str);
        });
//全选
$("#CheckedAll").click(function(){
        if(this.checked){				 //如果当前点击的多选框被选中
        $('input[type=checkbox][name=items]').attr("checked", true );
        }else{								
        $('input[type=checkbox][name=items]').attr("checked", false );
        }
        });
$('input[type=checkbox][name=items]').click(function(){
        var flag=true;
        $('input[type=checkbox][name=items]').each(function(){
            if(!this.checked){
            flag = false;
            }
            });

        if( flag ){
        $('#CheckedAll').attr('checked', true );
        }else{
        $('#CheckedAll').attr('checked', false );
        }
        });
//输出值
$("#send").click(function(){
        var str="你选中的是：\r\n";
        $('input[type=checkbox][name=items]:checked').each(function(){
            str+=$(this).val()+"\r\n";
            })
        alert(str);
        });
//全选
$("#CheckedAll").click(function(){
        $('[name=items]:checkbox').attr('checked', true);
        });
//全不选
$("#CheckedNo").click(function(){
        $('[type=checkbox]:checkbox').attr('checked', false);
        });
//反选
$("#CheckedRev").click(function(){
        $('[name=items]:checkbox').each(function(){
            //此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。
            //$(this).attr("checked", !$(this).attr("checked"));
            //$(this).prop("checked", !$(this).prop("checked"));

            //直接使用JS原生代码，简单实用
            this.checked=!this.checked;
            });
        });
//输出值
$("#send").click(function(){
        var str="你选中的是：\r\n";
        $('[name=items]:checkbox:checked').each(function(){
            str+=$(this).val()+"\r\n";
            })
        alert(str);
        });
})

jQuery之前的版本都是使用attr()来访问对象的属性,但是有些时候,比如访问input的disable属性的时候,会有些问题,在有些浏览器只要写diable属性就可以,有些要写diable="disabled",从jQuery 1.6开始,jQuery提供了prop()来获取这些属性,只会返回true/false,

只添加属性名称该属性就会生效应该使用prop(),只存在true/false的属性应该使用prop(),例如disabled和check,应该使用prop()方法,而不是使用attr()方法。

添加星号:

//<![CDATA[
	$(function(){
		//如果是必填的，则加红星标识.
		$("form :input.required").each(function(){
			var $required = $("<strong class='high'> *</strong>"); //创建元素
			$(this).parent().append($required); //然后将它追加到文档中
		});
	});
//]]>

CDATA的意义

CDATA 内部的所有东西都会被解析器忽略。

假如文本中包含了大量的 "<" 和 "&" 字符 - 就像编程代码中经常出现的情况一样 - 那么这个 XML 元素就可以被定义为一个 CDATA 部分。

CDATA 区段开始于 "<![CDATA["，结束于 "]]>"：

<script type="text/javascript">
<![CDATA[
function compare(a,b)
{
if (a < b)
   {alert("a小于b");}
else if (a>b)
   {alert("a大于b");}
else
   {alert("a等于b");}
}
]]>
</script>

在上面的例子中，在 CDATA 区段中的所有东西都会被解析器忽略。


关于 CDATA 区段的注释:

CDATA 区段不能包含字符串 "]]>"，所以，CDATA 区段的嵌套是不被允许的。

同时也需要确保在 "]]>" 字符串中没有空格或折行。

为什么要使用CDATA:

       XHTML的第二个改变是使用CDATA段。XML中的CDATA段用于声明不应被解析为标签的文本（XHTML也是如此），这样就可以使用特殊字符，如小于（<）、大于（>）、和号（&）和双引号（"），而不必使用它们的字符实体。考虑下面的代码：

<script type="text/javascript">
function compare(a,b)
{
if (a < b)
   {alert("a小于b");}
else if (a>b)
   {alert("a大于b");}
else
   {alert("a等于b");}
}
</script>

这个函数相当简单，它比较数字a和b，然后显示消息说明它们的关系。但是，在XHTML中，这段代码是无效的，因为它使用了三个特殊符号，即小于、大于和双引号。要修正这个问题，必须分别用这三个字符的XML实体<、>和"替换它们：

<script type="text/javascript">
function compare(a,b)
{
if (a <b)
   {alert("a小于b");}  
else if (a>b)
   {alert("a大于b");}
else
   {alert("a等于b");}
}
</script>

这段代码存在两个问题。首先，开发者不习惯用XML实体编写代码。这使代码很难读懂。其次，在JavaScript中，这种代码实际上将视为有语法错，因为解释程序不知道XML实体的意思。用CDATA段即可以以常规形式（即易读的语法）编写JavaScript代码。正式加入CDATA段的方法如下：

<script type="text/javascript">
<![CDATA[
function compare(a,b)
{
if (a < b)
   {alert("a小于b");}
else if (a>b)
   {alert("a大于b");}
else
   {alert("a等于b");}
}
]]>
</script>

虽然这是正式方式，但还要记住，大多数浏览器都不完全支持XHTML，这就带来主要问题，即这在JavaScript中是个语法错误，因为大多数浏览器还不认识CDATA段。

<script type="text/javascript">
//<![CDATA[                                            
function compare(a,b)
{
if (a < b)
   {alert("a小于b");}
else if (a>b)
   {alert("a大于b");}
else
   {alert("a等于b");}
}
//]]>                                      
</script>

当前使用的解决方案模仿了“对旧浏览器隐藏”代码的方法。使用单行的JavaScript注释"//"，可在不影响代码语法的情况下嵌入CDATA段：

现在，这段代码在不支持XHTML的浏览器中也可运行。

但是，为避免CDATA的问题，最好还是用外部文件引入JavaScript代码。

表单验证

//<![CDATA[
$(function(){
        //如果是必填的，则加红星标识.
        $("form :input.required").each(function(){
            var $required = $("<strong class='high'> *</strong>"); //创建元素
            $(this).parent().append($required); //然后将它追加到文档中
        });
         //文本框失去焦点后
        $('form :input').blur(function(){
             var $parent = $(this).parent();
             $parent.find(".formtips").remove();
             //验证用户名
             if( $(this).is('#username') ){
                    if( this.value=="" || this.value.length < 6 ){
                        var errorMsg = '请输入至少6位的用户名.';
                        $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
                    }else{
                        var okMsg = '输入正确.';
                        $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
                    }
             }
             //验证邮件
             if( $(this).is('#email') ){
                if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
                      var errorMsg = '请输入正确的E-Mail地址.';
                      $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
                }else{
                      var okMsg = '输入正确.';
                      $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
                }
             }
        }).keyup(function(){
           $(this).triggerHandler("blur");
        }).focus(function(){
             $(this).triggerHandler("blur");
        });//end blur

        
        //提交，最终验证。
         $('#send').click(function(){
                $("form :input.required").trigger('blur');
                var numError = $('form .onError').length;
                if(numError){
                    return false;
                } 
                alert("注册成功,密码已发到你的邮箱,请查收.");
         });

        //重置
         $('#res').click(function(){
                $(".formtips").remove(); 
         });
})
//]]>

客户端的验证仅用于提升用户操作体验,对于禁用了脚本的用户和用户自制的网页提交操作,必须在服务器端验证.

表格变色

  $(function(){
		$("tbody>tr:odd").addClass("odd");
		$("tbody>tr:even").addClass("even");
		$('tbody>tr').click(function() {
			//判断当前是否选中
			var hasSelected=$(this).hasClass('selected');
			//如果选中，则移出selected类，否则就加上selected类
			$(this)[hasSelected?"removeClass":"addClass"]('selected')
				//查找内部的checkbox,设置对应的属性。
				.find(':checkbox').attr('checked',!hasSelected);
		});
		// 如果复选框默认情况下是选择的，则高色.
		$('tbody>tr:has(:checked)').addClass('selected');
  })

表格展开关闭

$(function(){
	$('tr.parent').click(function(){   // 获取所谓的父行
			$(this)
				.toggleClass("selected")   // 添加/删除高亮
				.siblings('.child_'+this.id).toggle();  // 隐藏/显示所谓的子行
	}).click();
})

表格过滤

  $(function(){
       $("#filterName").keyup(function(){
	      $("table tbody tr")
					.hide()
					.filter(":contains('"+( $(this).val() )+"')")
					.show();
	   }).keyup();
  })