JQuery学习(4-1)

设置表单控件，主要包括‘验证邮箱’，‘判断输入是否为空’，‘设置tabindex属性’

$(document).ready(function() {
	/* modal windows */
	$('a.modal').click(function() {
        var modalID = $(this).attr('rel'); // get the name of the modal

        /* fade in the modal window and add a close button to it */
        $('#' + modalID).fadeIn().prepend('<a href="#" class="close"><img src="grfx/close_button.png" class="close_button" title="Close Window" alt="Close" /></a>');
        /*
         * define the margins so that the modal is centered properly on the screen
         * we add 80px to the height/width to accomodate for the padding and border
         * width defined in the css
         */
        var modalMarginTop = ($('#' + modalID).height() + 80) / 2;
        var modalMarginLeft = ($('#' + modalID).width() + 80) / 2;
        /* apply the margins to the modal window */
        $('#' + modalID).css({
            'margin-top' : -modalMarginTop,
            'margin-left' : -modalMarginLeft
        });

        /* fade in the shade! (tired of the cheesy jokes yet?) */
        $('body').append('<div id="modalShade"></div>'); // add the shade layer to bottom of the body
        $('#modalShade').css('opacity', 0.6).fadeIn(); // set the opacity with jQuery to avoid all of the nasty CSS needed for IE

        /* focus on the first form input */
		/*
		* 语法: $(selector).each(function(index,element))
		* 方法规定为每个匹配元素规定运行的函数,返回 false 可用于及早停止循环。
		*/
		/*
		* :input $(":input") 所有<input>元素
		* :visible 所有可见的元素
		*/
		/*
		* i从零开始
		*/
    	$(':input:visible').each(function(i,e){

        	/*
        	 * loop through all visible elements
        	 * and assign a tabindex value to each
        	 * starting with 0
        	 */
        	$(e).attr('tabindex',3000 + i);
        });
        /* apply the focus */
        $('input[tabindex="3000"]').focus();
        return false; // keep the link from acting naturally
    });

    /*
     * close the modal and pull down the shade
     */
    $('a.close, #modalShade').live('click', function() { // clicking on the close or shade layer
    	var thisModalID = $('a.close').parent().attr('id');
        $('#modalShade, #'+thisModalID).fadeOut(function() {
            $('#modalShade, a.close').remove();  // remove the shade and the close button
        });
        return false;
    });

    /* make sure that password is not blank */
    $(function() {
    	var passwordLength = $('#penewpass').val().length;
    	if(passwordLength == 0){
    		/* make sure warning is on if the length is zero */
			/*
			* 方法返回元素的下一个兄弟元素，且只返回一个元素
			*/
    		$('#penewpass').next('.error').css('display', 'inline');
    		/* when the password changes (and the length grows) turn off error */
    		$('#penewpass').change(function() {
    			$(this).next('.error').css('display', 'none');
    		});
    	}
    });
    /* validate e-mail address in register form */
    $(function(){
    	/* get length of email */
    	var emailLength = $('#email').val().length;
    	if(emailLength == 0){
    		$('#email').next('.error').css('display', 'inline');
    		$('#email').change(function() {
    	    	var regexEmail = /^[a-zA-Z0-9._-][email protected][a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    	    	var inputEmail = $(this).val();
    	    	var resultEmail = regexEmail.test(inputEmail);
    	    	if(resultEmail){
    	    		$(this).next('.error').css('display', 'none');
    	    	}
    		});
    	}
    });
});

任然有很多用法值得去学习