js方法
1.判断日期是否有效
1 function isValidDate(value, userFormat) { 2 3 // Set default format if format is not provided 4 userFormat = userFormat || 'mm/dd/yyyy'; 5 6 // Find custom delimiter by excluding 7 // month, day and year characters 8 var delimiter = /[^mdy]/.exec(userFormat)[0]; 9 10 // Create an array with month, day and year 11 // so we know the format order by index 12 var theFormat = userFormat.split(delimiter); 13 14 // Create array from user date 15 var theDate = value.split(delimiter); 16 17 function isDate(date, format) { 18 var m, d, y, i = 0, len = format.length, f; 19 for (i; i < len; i++) { 20 f = format[i]; 21 if (/m/.test(f)) m = date[i]; 22 if (/d/.test(f)) d = date[i]; 23 if (/y/.test(f)) y = date[i]; 24 } 25 return ( 26 m > 0 && m < 13 && 27 y && y.length === 4 && 28 d > 0 && 29 // Check if it's a valid day of the month 30 d <= (new Date(y, m, 0)).getDate() 31 ); 32 } 33 34 return isDate(theDate, theFormat); 35 }
使用方法:
下面这个调用返回false,因为11月份没有31天
isValidDate(value, userFormat);
2.获取一组元素的最大宽度或高度
1 下面这个函数,对于需要进行动态排版的开发人员非常有用 2 3 var getMaxHeight = function ($elms) { 4 var maxHeight = 0; 5 $elms.each(function () { 6 // In some cases you may want to use outerHeight() instead 7 var height = $(this).height(); 8 if (height > maxHeight) { 9 maxHeight = height; 10 } 11 }); 12 return maxHeight; 13 }; 14 15 16 使用方法: 17 18 $(elements).height( getMaxHeight($(elements)) );
3.高亮文本
1 有很多JQuery的第三方库可以实现高亮文本的功能,但我更喜欢用下面这一小段JavaScript代码来实现这个功能,它非常短小,而且可以根据我的需要去进行灵活的修改,而且可以自己定义高亮的样式。下面这两个函数可以帮助你创建自己的文本高亮插件。 2 3 function highlight(text, words, tag) { 4 // Default tag if no tag is provided 5 tag = tag || 'span'; 6 var i, len = words.length, re; 7 for (i = 0; i < len; i++) { 8 // Global regex to highlight all matches 9 re = new RegExp(words[i], 'g'); 10 if (re.test(text)) { 11 text = text.replace(re, '<'+ tag +' class="highlight">$&</'+ tag +'>'); 12 } 13 } 14 return text; 15 } 16 17 18 你同样会需要取消高亮的函数: 19 20 function unhighlight(text, tag) { 21 // Default tag if no tag is provided 22 tag = tag || 'span'; 23 var re = new RegExp('(<'+ tag +'.+?>|<\/'+ tag +'>)', 'g'); 24 return text.replace(re, ''); 25 } 26 27 28 使用方法: 29 30 $('p').html( highlight( 31 $('p').html(), // the text 32 ['foo', 'bar', 'baz', 'hello world'], // list of words or phrases to highlight 33 'strong' // custom tag 34 ));
4.文字动效
1 有时你会希望给你的一段文字增加动效,让其中的每个字都动起来。你可以使用下面这段jQuery插件代码来达到这个效果。当然你需要结合一个CSS3 transition样式来达到更好的效果。 2 3 $.fn.animateText = function(delay, klass) { 4 var text = this.text(); 5 var letters = text.split(''); 6 return this.each(function(){ 7 var $this = $(this); 8 $this.html(text.replace(/./g, '<span class="letter">$&</span>')); 9 $this.find('span.letter').each(function(i, el){ 10 setTimeout(function(){ $(el).addClass(klass); }, delay * i); 11 }); 12 }); 13 }; 14 15 16 使用方法: 17 18 $('p').animateText(15, 'foo');
5.逐个隐藏元素
1 下面这个jQuery插件可以根据你设置的步长(间隔时间)来逐个隐藏一组元素。在列表元素的重新加载中使用,可以达到很好的效果。 2 3 $.fn.fadeAll = function (ops) { 4 var o = $.extend({ 5 delay: 500, // delay between elements 6 speed: 500, // animation speed 7 ease: 'swing' // other require easing plugin 8 }, ops); 9 var $el = this; 10 for (var i=0, d=0, l=$el.length; i<l; i++, d+=o.delay) { 11 $el.eq(i).delay(d).fadeIn(o.speed, o.ease); 12 } 13 return $el; 14 } 15 16 17 使用方法: 18 19 $(elements).fadeAll({ delay: 300, speed: 300 });

浙公网安备 33010602011771号