几个有用的JavaScript/jQuery代码片段

1：检查元素是否含有滚动条

12345

(function($) { $.fn.hasScrollBar = function() { return this.get(0).scrollHeight > this.height(); } })(jQuery);

调用方法$(”).hasScrollBar();返回boolean型 2：setInterval和setTimeout

1 2 3 4 5 6 7

var timer = setInterval(function(){ if(someConditionIsTrue){ clearTimeout(timer); } },100); /*如果someConditionIsTrue永远都不会变成true的话那么上面方法就是无限循环，那么只需调用下面的方法来终止循环*/ setTimeout("clearTimeout(timer)",10000);//10s或者更多

3:数组中去除重复的元素

1234567891011121314151617181920

//纯javascript Array.prototype.copyUnique = function removeDuplicateElement() { var newArray=new Array(), arrayName=this; label : for(var i=0; i < arrayName.length; i++ ) { for(var j=0; j < newArray.length;j++ ) { if(newArray[j]==arrayName[i]) continue label; } newArray[newArray.length] = arrayName[i]; } return newArray; } //jQuery 实现Array.prototype.copyUnique = function(original) { var a = jQuery(original); return jQuery.makeArray(a.filter(function(i, item) { return i === jQuery.inArray(item, a); })); }

使用方法：array.copyUnique();返回无重复的数组 4：检查数据是否包含在Array中

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

//jQuery实现 jQuery.inArray("value", arr); // 使用方法: if( jQuery.inArray("value", arr) != -1 ) { true }; //Javascript实现 Array.prototype.inArray = function (value) { var i; for (i=0; i < this.length; i++) { if (this[i] === value) { return true; } } return false; }; //使用方法 //[1,2,3].inArray(2) > true //[1,2,3].inArray(22) > false

5：使文本不能够被选中

1234567891011

(function($) { $.fn.unselectable = function() { this.each(function() { this.onselectstart = function() { return false; }; this.unselectable = 'on'; this.style.MozUserSelect = 'none'; }); }; })(jQuery);

使用方法 $(dom).unselectable();6：检查数据是否含有小数

1 2 3 4 5 6 7 8 9

function numberHasDecimal(number) { return !!(number % 1); } //或者 Number.prototype.hasDec = function() {return !!(this % 1);} //使用方法 //var num = 34.34; num.hasDec(); > true //var num = 3434; num.hasDec(); > false

7：检查URL是否有效

12345678

function urlExists(testUrl) { var http = jQuery.ajax({ type:"HEAD", url: testUrl, async: false }) return http.status!=404; }

8：复制一个Array

1	Array.prototype.duplicate = function(){ return this.concat(this); }

调用方式:array.duplicate();返回数组
9：当UL/OL的li水平显示的时候，为UL/OL设置宽度

12345678

function fitParentToChildren(parent) { var width = 0; $parent = $(parent); $parent.children().each(function(idx, li) { width = width + $(li).outerWidth(true); }); $parent.width(width); }

调用时传入的parent是UL或者是OL的dom对象10：RGB转HEX

1 2 3 4 5 6 7 8 9 10

function rgbToHex(c) { c = jQuery.trim(c); if (c == "-1 -1 -1") return null; parts = c.split(' '); for (var i = 0; i <= 2; ++i) { parts[i] = parseInt(parts[i]).toString(16); if (parts[i].length == 1) parts[i] = '0' + parts[i]; } return '#' + parts.join(''); // "0070ff" }

11：HEX转RGB

123456789101112

function hexToRgb(c) { c = c.replace(/^\s\s*/, '').replace(/\s/,''); //Or use jQuery.trim(c); if (c.length < 6 || c.length > 7) //either #00ff00 or 00ff00, both are valid { return !alert('Invalid color provided to hexToRgb \n' + c); } c = c.charAt(0) == "#" ? c.substring(1, 7) : c r = parseInt(c.substring(0, 2), 16); g = parseInt(c.substring(2, 4), 16); b = parseInt(c.substring(4, 6), 16); return r + ' ' + g + ' ' + b; }

12：日期差

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

function getDiffDates(earlierDate,laterDate, formated){ var nTotalDiff = laterDate.getTime() - earlierDate.getTime(); var oDiff = new Object(); oDiff.days = Math.floor(nTotalDiff/1000/60/60/24); nTotalDiff -= oDiff.days*1000*60*60*24; oDiff.hours = Math.floor(nTotalDiff/1000/60/60); nTotalDiff -= oDiff.hours*1000*60*60; oDiff.minutes = Math.floor(nTotalDiff/1000/60); nTotalDiff -= oDiff.minutes*1000*60; oDiff.seconds = Math.floor(nTotalDiff/1000); if(formated) { var diff = ''; if(oDiff.days) { var d = oDiff.days > 1 ? " days " : " day "; diff+= oDiff.days + d; } if(oDiff.hours) { var h = oDiff.hours > 1 ? " hrs " : " hr "; diff+= oDiff.hours + h } if(oDiff.minutes) { var m = oDiff.minutes > 1 ? " mins " : " min "; diff+= oDiff.minutes + m; } if(oDiff.seconds) { var s = oDiff.seconds > 1 ? " secs " : " sec "; diff+= oDiff.seconds + s; } return diff; } return oDiff; }

使用方法

1234	var date1 = new Date(2012, 1, 25, 5, 4, 2); var date2 = new Date(2012, 2, 3, 3, 8, 3); console.log(getDiffDates(date1, date2)) ​console.log(getDiffDates(date1, date2,true))//6 days 22 hrs 4 mins 1 sec

13：设置/获取/删除Cookies

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

//get cookie function getCookie( name ) { var start = document.cookie.indexOf( name + "=" ); var len = start + name.length + 1; if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) { return null; } if ( start == -1 ) return null; var end = document.cookie.indexOf( ';', len ); if ( end == -1 ) end = document.cookie.length; return unescape( document.cookie.substring( len, end ) ); } //set cookie function setCookie( name, value, expires, path, domain, secure ) { var today = new Date(); today.setTime( today.getTime() ); if ( expires ) { expires = expires * 1000 * 60 * 60 * 24; } var expires_date = new Date( today.getTime() + (expires) ); document.cookie = name+'='+escape( value ) + ( ( expires ) ? ';expires='+expires_date.toGMTString() : '' ) + //expires.toGMTString() ( ( path ) ? ';path=' + path : '' ) + ( ( domain ) ? ';domain=' + domain : '' ) + ( ( secure ) ? ';secure' : '' ); } //delete cookie function deleteCookie( name, path, domain ) { if ( getCookie( name ) ) document.cookie = name + '=' + ( ( path ) ? ';path=' + path : '') + ( ( domain ) ? ';domain=' + domain : '' ) + ';expires=Thu, 01-Jan-1970 00:00:01 GMT'; }

14：Cookies

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748

window.store = { localStoreSupport : function() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch (e) { return false; } }, set : function(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else { var expires = ""; } if( this.localStoreSupport() ) { localStorage.setItem(name, value); } else { document.cookie = name+"="+value+expires+"; path=/"; } }, get : function(name) { if( this.localStoreSupport() ) { return localStorage.getItem(name); } else { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } }, del : function(name) { if( this.localStoreSupport() ) { localStorage.removeItem(name); } else { this.set(name,"",-1); } } }​

使用方法：

1 2 3

<a href="#" onclick="store.set('foo','bar')">set key: foo, with value: bar</a><br> <a href="#" onclick="alert(store.get('foo'))">get key: foo</a><br> <a href="#" onclick="store.del('foo')">delete key: foo</a>​

15：trim

12345678910111213

//jQuery jQuery.trim(' string '); //return 'string' //javascript String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g,""); } String.prototype.ltrim = function() { return this.replace(/^\s+/g,""); } String.prototype.rtrim = function() { return this.replace(/\s+$/g,""); }

使用：

1 2 3 4

var test = " Test "; var test1 = test.ltrim(); // returns "Test " var test2 = test.rtrim(); // returns " Test" var test3 = test.trim(); // returns "Test"

16：getElementByClassName

123456789101112

Object.prototype.getElementsByClass = function (searchClass, tag) { var returnArray = []; tag = tag || '*'; var els = this.getElementsByTagName(tag); var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)'); for (var i = 0; i < els.length; i++) { if ( pattern.test(els[i].className) ) { returnArray.push(els[i]); } } return returnArray; }

使用方法：

1 2 3 4

//返回class为"className" 的所有dom元素 els=document.getElementsByClass('className'); //返回class为‘className’的所有p的dom元素 els=document.getElementsByClass('className','p');

17：添加/移除/切换 dom元素的class

12345678910111213141516171819

var cssClasses = { addClass: function(ele,cls) { if (!Utils.hasClass(ele,cls)) ele.className += " "+cls; }, removeClass: function(ele,cls) { if (Utils.hasClass(ele,cls)) { var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); ele.className=ele.className.replace(reg,' '); } }, toggleClass: function(ele,cls) { if (this.hasClass(ele,cls)) { this.removeClass(ele,cls); } else { this.addClass(ele,cls); } } }

使用方法：

1 2 3 4 5 6

var element = document.getElementById('someHTMLel'); cssClasses.addClass(element, 'cssClassName'); //添加css class cssClasses.removeClass(element, 'cssClassName'); //移除css class cssClasses.toggleClass(element, 'cssClassName'); //切换css class cssClasses.hasClass(element, 'cssClassName'); //返回true or false;

18：不区分大小写，为数组元素排序

1 2 3 4 5 6 7 8 9 10 11

elementArr.sort(function(x,y){ var a = String(x).toUpperCase(); var b = String(y).toUpperCase(); if (a > b) { return 1 } else if (a < b) { return -1 } else { return 0; } });