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._-]+@[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'); } }); } }); });
任然有很多用法值得去学习
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。