推荐10 个短小却超实用的 JavaScript 代码段

你同样会需要取消高亮的函数：

function unhighlight(text, tag) { 
// Default tag if no tag is provided 
tag = tag || 'span'; 
var re = new RegExp('(<'+ tag +'.+?>|)', 'g'); 
return text.replace(re, ''); 
} 

使用方法：

$('p').html( highlight( 
$('p').html(), // the text 
['foo', 'bar', 'baz', 'hello world'], // list of words or phrases to highlight 
'strong' // custom tag 
)); 

4. 文字动效

有时你会希望给你的一段文字增加动效，让其中的每个字都动起来。你可以使用下面这段jQuery插件代码来达到这个效果。当然你需要结合一个CSS3 transition样式来达到更好的效果。

$.fn.animateText = function(delay, klass) {  
var text = this.text();  
var letters = text.split('');  
return this.each(function(){  
var $this = $(this);  
$this.html(text.replace(/./g, '$&'));  
$this.find('span.letter').each(function(i, el){  
setTimeout(function(){ $(el).addClass(klass); }, delay * i);  
});  
});  
}; 

使用方法：

$('p').animateText(15, 'foo'); 

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  
$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; 
} 

（编辑：南平站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!