5. 逐个隐藏元素
下面这个jQuery插件可以根据你设置的步长（间隔时间）来逐个隐藏一组元素。在列表元素的重新加载中使用，可以达到很好的效果。
$.fn.fadeAll = function (ops) { var o = $.extend({ delay: 500, // delay between elements speed: 500, // animation speed ease: 'swing' // other require easing plugin }, ops); var $el = this; for (var i=0, d=0, l=$el.length; i<l; i++, d+=o.delay) { $el.eq(i).delay(d).fadeIn(o.speed, o.ease); } return $el; }
使用方法：
$(elements).fadeAll({ delay: 300, speed: 300 });
6. 限制文本字数
下面这端脚本允许你根据给定的字符长度截取文本，如果文本被截取，那么它的后面会自动带上省略号。
function excerpt(str, nwords) { var words = str.split(' '); words.splice(nwords, words.length-1); return words.join(' ') + (words.length !== str.split(' ').length ? '…' : ''); }
7. 判断相应式布局中当前适配度
目前很多设计已经采用了响应式布局来适配网站或应用在不同设备上的显示。你经常需要在代码中判断当前处于哪一个屏幕适配度下。
function isBreakPoint(bp) { // The breakpoints that you set in your css var bps = [320, 480, 768, 1024]; var w = $(window).width(); var min, max; for (var i = 0, l = bps.length; i < l; i++) { if (bps[i] === bp) { min = bps[i-1] || 0; max = bps[i]; break; } } return w > min && w <= max; }
使用方法：
if ( isBreakPoint(320) ) { // breakpoint at 320 or less } if ( isBreakPoint(480) ) { // breakpoint between 320 and 480 } …
8. 全局计数
在一些游戏或广告场景中，你需要记录用户在当前页面上点击某一个按钮的次数，这时你可以使用jQuery的.data()函数来处理：
$(element) .data('counter', 0) // begin counter at zero .click(function() { var counter = $(this).data('counter'); // get $(this).data('counter', counter + 1); // set // do something else... });
9. 嵌入优酷视频
function embedYouku(link, ops) { var o = $.extend({ width: 480, height: 320, params: '' }, ops); var id = /\?v\=(\w+)/.exec(link)[1]; return '<embed allowFullScreen="true" quality="high" allowScriptAccess="always" type="application/x-shockwave-flash" src="'https://www.jb51.net/article/+id+'?'+o.ops'"'; }
使用方法：
embedYouku( 'http://static.youku.com/v/swf/qplayer.swf', {'winType=adshow&VideoIDS=XMTE3NzQ0NTky&isAutoPlay=false&isShowRelatedVideo=false'} );
10. 创建动态菜单或下拉列表
在很多场景中，我们都需要动态地创建菜单、下拉列表或列表项。下面是一段最基础的代码实现上面的功能，你可以根据实际需要进行相应的扩展。
function makeMenu(items, tags) { tags = tags || ['ul', 'li']; // default tags var parent = tags[0]; var child = tags[1]; var item, value = ''; for (var i = 0, l = items.length; i < l; i++) { item = items[i]; // Separate item and value if value is present if (/:/.test(item)) { item = items[i].split(':')[0]; value = items[i].split(':')[1]; } // Wrap the item in tag items[i] = '<'+ child +' '+ (value && 'value="'+value+'"') +'>'+ // add value if present item +'</'+ child +'>'; } return '<'+ parent +'>'+ items.join('') +'</'+ parent +'>'; }
使用方法：
// Dropdown select month makeMenu( ['January:JAN', 'February:FEB', 'March:MAR'], // item:value ['select', 'option'] ); // List of groceries makeMenu( ['Carrots', 'Lettuce', 'Tomatos', 'Milk'], ['ol', 'li'] );
以上只是那些实用JavaScript代码段中的一小部分，我也建议你平时注意收集或自己编写这样的基础代码段，它们能在很多项目中使用或通过一些改造提供更完善的功能，使用这些代码段将为你节省下大量的开发时间。
您可能感兴趣的文章: