JQuery的运用总结

http://topic.csdn.net/u/20100806/10/b6f5c08e-5bba-4361-a761-c89b20d42824.html?47565

1、js的window.onload=function(){}与JQuery的$(document).ready(function(){});或者$(function(){});实现功能相同.

2、当输入文本失去焦点时，验证邮箱是否合法：

$(":input.info_form_text").blur(function() {
    //验证邮箱
    if ($(this).is("#email")) {
        var reg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/; //电子邮箱正则表达式
        //如果邮箱为空 或者 邮箱不是空，但是模式不匹配
        if (this.value == "" || this.value != "" && !reg.test(this.value)) {
       	 	$("#emailSpan").addClass("error");
            $("#emailSpan").html("<span style=\"color: red;\">请输入正确邮箱！</span>");
        }
    }
}

?2、当输入文本失去焦点时，验证密码是否为6-16位字符,数字 字母 符号!

//当文本框失去焦点
$(":input.info_form_text").blur(function() {

	//验证密码是否为6-16位字符,数字 字母 符号!
    if ($(this).is("#password")) {
        var reg = /^.{6,16}$/;
        if (this.value == "" || this.value != "" && !reg.test(this.value)) {
       	 	$("#passwordSpan").addClass("error");
            $("#passwordSpan").html("<span style=\"color: red;\">6-16位字符,数字 字母 符号!</span>");
        } else {
        	$("#passwordSpan").html("<span style=\"color: green;\">输入正确!</span>");
        }
    }
}).keyup(function() {
    $(this).triggerHandler("blur");
}).focus(function() {
    $(this).triggerHandler("blur");
})

?3、当输入文本失去焦点时，验证以下内容

//当文本框失去焦点,验证公司规模大小大于0、电话由数字和-构成、手机为11为数字
$(":input.info_form_text").blur(function() {

    if($(this).is("#size")) {
		var reg = /^\d+$/;
		if (this.value == "" || this.value != "" && !reg.test(this.value)) {
       	 	$("#sizeSpan").addClass("error");
            $("#sizeSpan").html("<span style=\"color: red;\">请输入大于0的数字!</span>");
        } else {
        	$("#sizeSpan").html("<span style=\"color: green;\">输入正确!</span>");
        }
    }
    
    if($(this).is("#tel")) {
		var reg = /^\d+[-]?\d+$/;
		if (this.value == "" || this.value != "" && !reg.test(this.value)) {
       	 	$("#telSpan").addClass("error");
            $("#telSpan").html("<span style=\"color: red;\">请输入正确的座机号码!</span>");
        } else {
        	$("#telSpan").html("<span style=\"color: green;\">输入正确!</span>");
        }
    }

    if($(this).is("#LTel")) {
    	var reg = /^\d{11}/;
		if (this.value == "" || this.value != "" && !reg.test(this.value)) {
       	 	$("#LTelSpan").addClass("error");
            $("#LTelSpan").html("<span style=\"color: red;\">请输入正确的手机号码!</span>");
        } else {
        	$("#LTelSpan").html("<span style=\"color: green;\">输入正确!</span>");
        }
    }
    
}).keyup(function() {
    $(this).triggerHandler("blur");
}).focus(function() {
    $(this).triggerHandler("blur");
})

?4、取option中text的值：

$("#nbrFormat option:selected").text()

var val=$('input:radio[name="sex"]:checked').val();radio选中的值

5、offsetParent()的用法：返回到最近设有style="position：relative" 的对象，如下方例子：$(obj).offsetParent()

function addFile(num) {
	$("#file" + num).append("<span style=\"position: relative;\"><input type=\"file\"  name=\"adpositionFile"+num+"\"/><input type=\"button\" value=\"删除\" name="+num+" onclick=\"del(this);\"><br/><br/></span>");
}

function del(obj) {
	$($(obj).offsetParent()).remove();
}