推荐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; 
} 

（编辑：湖南网）

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