收藏的一些javascript片段

时间:2022-12-18 22:13:32

原文:收藏的一些javascript片段

学习js也很有一段时间,收集了一些js的片段。特地整理排版了一下,以一个js初学者的视界来分析注释了这些代码段,暂且不去讨论它的性能和优化问题,相信会对一些初学者有用。第一次发文,定许多纰漏和不足的地方,希望可以交流和学习。

1 javascript动态加载--2 获取字符串的字节长度--3 DOM加载完即执行(有别于onload-页面的一切都加载完后执行)--4获取CSS属性--5 数组检测--6 继承--7 简单事件绑定--8 浏览器判断--9 阻止事件的默认行为--10 数组合并去重--11 将arguments转化为数组--12 数组去重--13 根据生日算年龄--14 获取某个节点下类名为classname的所有元素--15 object.crate的用法--16 获取事件的目标对象--17 获取事件发生时按键状态--18 dom操作--19 阻止事件冒泡--20 元素位置计算--21 元素显示效果--22 闭包的用例--23 实现字符串长度截取--24 获取域名的主机--26 清楚空格--27 替换全部--28 html文档中转义和解码字符--29 判断是否为数字类型--30 设置cookie--31 获取指定cookie--32 加入收藏夹--33 判断IE6--34 跨域解决方法--35 加载样式文件--36 今天是星期几--38 返回按id检索的元素对象--39 元素显示的通用方法--40 insrtAfter函数--41 压缩css样式代码--42 获取当前路径--43 checkbox全选全不选--44 判断移动设备-- 45 克隆对象--46 敏感词--47 常用正则--48 获取数组中的最大最小值--49 反转文本顺序--50 选择框跳转页面--51 批量修改样式--52 获取Url中的get参数值--53 在新窗体中打开页面--54 获取单选按钮的值--55 获取复选框的值.

1 javascript动态加载

 function loadScript(url,callback){//异步加载脚本函数
var script=document.createElement("script");
script.type="text/javascript";
if(script.readyState){
script.onreadystatechange=function(){//ie
if(script.readyState=="loaded"||script.readyState=="complete"){
script.onreadystatechange=null;
callback();//加载成功后的回调函数
}
};
}else{
script.onload=function(){//others
callback();
};
}
script.src=url;
document.getElementsByTagName("head")[0].appendChild(script);
} //方法二ajax原理
//创建XMLHttpRequest对象
var xhr=new XMLHttpRequest();
//设置与服务器端的交互方式和参数
xhr.open("get","script.js",true);
//注册回调函数
xhr.onreadystatechange=function(){
//判断和服务器交互是否已经完成
if(xhr.readyState===4){
//与服务器交互成功且返回正确数据
if(xhr.status===200){
var script=document.createElement("script");
script.type="text/javascript";
script.text=xhr.responseText;
document.body.appendChild(script);
}
}
};
xhr.send(null);

2 获取字符串的字节长度

 //方法一
String.prototype.getLength=function(){
var b=0,l=this.length;
if(l){
for(var i=0;i<l;i++){
//字符编码值大于255为汉字(全角)
if(this.charCodeAt(i)>255){
b+=2;
}else{
b++;
}
}
return b;
}else{
return 0;
}
}; //方法二
String.prototype.getLength=function(){
var l=this.length;
var b=l;
for(var i=0;i<l;i++){
//字符编码值大于255为汉字(全角)
if(this.charCodeAt(i)>255){
b++;
}
return b;
}; //方法三
String.prototype.getLength=function(){
var b=0,l=this.length;
if(l){
for(var i=0;i<l;i++){
var c=this.chartAt(i);
//字符编码长度大于4为全角字符
if(escape(c).length>4){
b+=2;
}else if(c!='\r'){
b++;
}
}
return b;
}else{
return 0;
}
}; //方法四
String.prototype.getLength=function(){
var b=0,l=this.length;
if(l){
for(var i=0;i<l;i++){
var c=this.chartAt(i);
//编码范围在[\u0000-\uooff]为半角字符
if(/^[\u0000-\uooff]为半角字符$/.test(c)){
b++;
}else if(c!='\r'){
b+=2;
}
}
return b;
}else{
return 0;
}
}; //方法五
String.prototype.getLength=function(){
//用"**"替换掉所有全角字符
var s=this.replace(/^[\x00-\xff]/g,"**");
return s.length;
}

3 DOM加载完即执行(有别于onload-页面的一切都加载完后执行)

 function domLoad(fn){
if(document.addEventLister){//ff支持DOMContentLoaded
document.addEventLister("DOMContentLoaded",fn,false);
}
else if(window.ActiveXobject){ //ie支持defer
document.write("<script id="onload" defer="defer" src='javascript:void(0)'></script>");
document.getElementsById("onload").onreadystatechange=function(){
if(this.readyState=="complete"){
this.onreadystatechange=null;
fn();
}
}
else if(/webkit/i.test(navigator.userAgent)){//chrome
var timer=setInterval(function(){
if(document.readyState=="loaded"||"complete"){
clearInterval(timer)
fn();
}
},10)//延迟一个极小的时间
} }
}

4 获取CSS属性

 function getStyle(obj,n){
if(obj.style[n]){//获取行内样式
return obj.style[n];
}else {
if(obj.currentStyle){//ie
return obj.currentStyle[n];
}else if(obj.defaultView.getComputedStyle){//ff
reurn obj.defaultView.getComputedStyle[obj,null].[n] }else{
return null
} }
}

5 数组检测

 //方法一
var isArray=function(o){
//不能解决跨执行环境(iframe)慎用
return o instanceof Array||o.constructor==Array;
} //方法二
var isArray=function(o){
//把类型检测转化为字符串比较
return typeof o==="object"&& Object.prototype.toString().call(o)==="[object Array]" }
//方法三
var isArray=function(o){
//鸭式辨形,若此对象有数组的splice和join两个特有方法即为数组
return o!=null && typeof o=="object"&&'splice' in object &&
'join' in object;
}

6 继承

 function animal(){
this.species="me";
}
//方法一 构造函数绑定
function cat(name,color){
animal.apply(this,arguments);
this.name=name;
this.color=color;
}
//方法二 原型继承
function cat(name,color){
this.name=name;
this.color=color;
}
function extend(child,parent){
var p=parent.prototype;
var c=children.prototype;
for(var i in p){
c[i]=p[i];
return c;
}
extend(cat,animal);
//方法三 直接继承
function cat(name,color){
this.name=name;
this.color=color;
}
cat.prototype=animal.prototype;
cat.prototype.constructor=cat;
//方法四:利用空对象做中介
function cat(name,color){
this.name = name;
this.color = color;
}
function f(){};
f.prototype=animal.prototype;
cat.prototype=new f();
cat.prototype.constructor=cat;

7 简单事件绑定

 //添加事件
function addEvent(obj,type,fn){
if(obj.addEventLister){
obj.addEventLister(type,fn,false);
}else if(obj.attachEvent){//ie
obj.attachEvent('on'+type,fn);
}
}
//移除事件
function removeEvent(obj,type,fn){
if(obj.removeEventListner){
obj.removeEventListner(type,fn,false);
}else if(obj.detachEvent){//ie
obj.detachEvent('on'+type,fn)
}
}

8 浏览器判断

 var sys={};
var ua=navigator.userAgent.toLowerCase();
var s;
(s=ua.match(/msie([\d.]+)/))?sys.ie=s[1]:
(s=ua.match(/firefox([\d.]+)/))?sys.firefox=s[1]:
(s=ua.match(/chrome([\d.]+)/))?sys.chrome=s[1]:
(s=ua.match(/opera([\d.]+)/))?sys.opera=s[1]:
(s=ua.match(/safari([\d.]+)/))?sys.safari=s[1]:0; if (Sys.ie) document.write('IE: ' + Sys.ie);
if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);
if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);
if (Sys.opera) document.write('Opera: ' + Sys.opera);
if (Sys.safari) document.write('Safari: ' + Sys.safari);

9 阻止事件的默认行为

 function stopdefault(evt){
var e=evt||window.event;
if(e.preventDefault){//ff
e.preventDefault
}else{//ie
e.returnValue=false;
}
return false;
}

10 数组合并去重

 Array prototype.unique=function(){
var b=[],c=[];
var a=b.concat(c);
var l=a.length;
//从第一个元素起,看其后的所有元素是否和它相等
for(var i=0;i<l;i++){
for(j=i+1;j<l;j++){
if(a[i]===a[j]){
//数组拼接,起始第j个元素,删除长度为1,拼接其他元素为空
a.splice(j,1);
}
}
}
return a;
}

11 将arguments转化为数组

var arr=Array.prototype.slice(arguments,0);

//数组切割,将arguments作为slice的执行环境,返回的是数组0为切割起始位置,长度为默认的length

12 数组去重

 Array.prototype.unique=function(){
var ret=[];//目标数组
var obj={};//中介对象
var l=this.length;
for(var i=0;i<l;i++){
var v=this[i];//获取数组元素
if(!obj[v]){//数组元素作为中介对象的属性,判断此属性是否已在对象中
obj[v]=1;
ret.push(v);
}
}
return ret;
}

13 根据生日算年龄

 function getAge(dateString){
var today=new Date();
var birthday=new Date(dateString);
var age=today.getFullYear()-birthDate.getFullYear();
var m=today.getMonth()-birthDate.getMonth();
//今天所在的月份小于出生月份,或(月份相等且今天的日期小于出生日期)
if(m<0||(m===0&&today.getDay()<birthday.getDay())){
age--;
}
return age;
}

14 获取某个节点下类名为classname的所有元素

 function getclass(node,classname){
if(node.getElementsByClassName){
return node.getElementsByClassName(classname);
}else{//ie
//存储目标元素的数组
var targs=[];
//获取节点对象下的所有元素
var els=node.getElementsByTagName("*");
var elslen=els.length;
for(var i=0;i<elslen;i++){
//元素的class值等于classname
if(els.className==classname){
targs[targs.length]=els[i];
}
}
return targs;
}
}

15 object.crate的用法

 Object.create=function(o){
var f=function(){};
f.prototype=o;
return new f();
}
var b=Object.create(a);

16 获取事件的目标对象

 function getTarget(evt){
var evt=window.event||evt
if(evt.target){//w3c
return evt.target;
}else(evt.srcElement){//ie
return evt.srcElement;
}
}

17 获取事件发生时按键状态

 function getKey(evt){
var e=evt||window.event;
var keys=[];
if(e.shiftKey){keys.push('shift');}
if(e.ctrlKey){keys.push('ctrl');}
if(e.altKey){keys.push('alt');}
return keys;
}

18 dom操作

 //得到上一个元素
function prev(elem){
do{
elem=elem.previousSibling;
}while(elem&&elem.nodeType!=1);//不为元素节点的时候继续循环
return elem;
}
//得到下一个元素
function next(elem){
do{
elem=elem.nextSibling;
}while(elem&&elem.nodeType!=1);
return elem;
}
//得到第一个元素
function first(elem){
elem=elem.firstChild;
return elem&&elem.nodeType!=1?next(elem):elem;
}
//得到最后一个元素
function last(elem){
elem=elem.lastChild;
//优先级!= > && > ?:
return elem&&elem.nodeType!=1?prev(elem):elem;
}
//得到父元素
function parent(elem,num){
num=num||1;
for(var i=0;i<num;i++){
if(elem!=null){elem=elem.parentNode;}
}
return elem;
}
//得到相关name元素
function tag(name,elem){
return (elem||document).getElementsByTagName(name);
}
//获取指定类名的元素
function hasClass(name,node){
var r=[];
//在构造函数中要用\对元字符\转义
var re=new RegExp('(^|\\s)'+name+'(\\s|$)');
var e=document.getElementsByTagName(node||'*');
for(var i=0;i<e.length;i++){
if(re.test(e[i].className)){
r.push(e[i]);
}
}
return r
}
//获取元素文本
function text(e){
var t='';
e=e.childNodes||e;
for(var i=0;i<e.length;i++){
t+=e[i].nodeType!=1?e[i].nodeValue:text(e[i].childNodes);
}
return t;
}
//在一个元素之前插入元素
//在父元素为parent的before之前,插入elem
function before(parent,before,elem){
if(elem==null){
elem=before;
befroe=parent;
parent=before.parentNode
}
var elems=checkElem(elem);
for(var i=elems.length;i>=0;i--){
parent.insertBefore(elem[i],before);
}
}
//创建元素
function create(elem){
//测试是否用命名空间来创建新的元素
return document.createElementNS?document.createElementNS('namespace',elem):document.createElement(elem);
}
//检查参数a(可能是字符串和元素的组合)类型并转化成节点数组
function checkElem(a){
//中介数组
var r=[];
//若参数不为数组,强制转化
if(a.constructor!=Array){a=[a];}
for(var i=0;i<a.length;i++){
//参数数组中的元素类型
if(a[i].constructor==String){
var div=document.createElement('div');
div.innerHTML=a[i];
//提取临时div中的dom结构
for(var j=0;j<div.childNodes.length;j++){
r[r.length]=div.childNodes[j];
}
}else if(a[i].length){//若为dom节点数组
for(var j=0;j<a[i.length];j++){
r[r.length]-a[i][j];
} }else{r[r.length]=a[i];}
}
return r
} //添加元素
function append(parent,elem){
if(elem=null){//若参数为空
elem=parent;
parent=null;
}
//转化参数为标准的节点数组
var elems=checkElem(elem);
for(var i;i<elems.length;i++){
(parent||document.body).appendChild(elem[i]);
}
}
//删除独立的dom
function remove(elem){
if(elem){elem.parentNode.removeChild(elem);}
}
//删除一个节点的所有子节点
function empty(elem){
while(elem.firstChild){
remove(elem.firstChild);
}
}

19 阻止事件冒泡

 function stopBubble(e){
if(e&&e.stoppropagation){
e.stoppropagation();
}else{
window.event.cancelBubble=true;
}
}

20 元素位置计算

 //返回元素的x位置
//event.pageX是鼠标事件相对于文档边沿的位置
function pageX(elem){
//若元素有最近的定位祖先元素offestParent,若没有为document.body
//offest相对于offestParent而言
return elem.offestParent?elem.offestLeft+pageX(elem.offestParent):elem.offestLeft
}
//获取元素的Y位置
function pageY(elem){
return elem.offestParent?elem.offestTop+pageY(elem.offestParent):elem.offestTop;
}
//获取元素相对于父级元素的x位置
function parentX(elem){
//父节点是否为最近的定位父元素
return elem.parentNode==elem.offestParent?elem.offestLeft:pageX(elem.parentNode)-pageX(elem);
}
function parentY(elem){
return elem.parentNode==elem.offestParent?elem.offestTop:pageY(elem.offestParent)-pageY(elem);
}

21 元素显示效果

 //隐藏元素
function hide(elem){
//getStyle()已经封装好
var curDisplay=getStyle(elem,'display');
if(curDisplay!='none'){
elem.oldDisplay=curDisplay;
}else{elem.style.display='none';}
}
//显示元素
function show(elem){
//'block'的存在强制显示
elem.style.display=elem.oldDisplay||'block';
}
//设置透明度
function setOpacity(elem,level){
if(elem.filters){//ie中用滤镜filter,alpha通道
elem.style.filter='alpha(opacity='+level+')';
elem.style.zoom=1;//zoom为对象缩放比例
}else{
elem.style.opacity=level/100;
}
}
function slideDown(elem){
//从高度0开始
elem.style.height='0px';
//先显示elem,但看不到它
show(elem);
//元素最终的完整高度
var h=fullHeight(elem);
//在一秒内执行20次动画
for(var i=0;i<100;i+=5){
//设置setTimeout按指定时间执行
/*把i保存在内部函数的局部变量pos中,*/
(function(){
var pos=i;
setTimeout(function(){
elem.style.height=(pos/100)*h+'px';
},(pos+1)*5);
})();
}
}
//透明度渐显
function fadeIn(elem){
//setOpacity(emel, 0);
show(elem);
for(var i=0; i<=100; i+=10){
(function(){
var pos = i;
setTimeout(function(){
setOpacity(elem, pos);
}, (pos + 1) * 10);
})();
}
}

22 闭包的用例

 //闭包中局部变量是引用而非拷贝
function say667(){
var num=666;
var sayAlert=function(){alert(num);}
num++;
return sayAlert;
}
var say=say667();
say();
//多个函数绑定同一个闭包,因为他们定义在同一个函数内
function setupSomeGlobals(){
var num=666;
gAlertNumber=function(){alert(num);}
gIncreaseNumber=function(){num++;}
gSetNumber=function(x){num=x;}
}
setupSomeGlobals()//为三个全局变量赋值
gAlertNumber();
gIncreaseNumber();
gAlertNumber();
gSetNumber(12);
gAlertNumber()
//外部函数所有局部变量都在闭包内,即使这个变量声明在内部函数定义之后。
function sayAlice(){
var sayAlert=function(){alert(alice);}
var alice='hello';
return sayAlert
}
var hello=sayAlice();
hello()

23 实现字符串长度截取

 function cutstr(str,len){
var temp;//临时字符
var count=0;//记录获取的字符长度
var patern =/[^\x00-\xff]/;
var str1="";
//js中length表示字符数目,而不是长度
for(var i=0,l=str.length;i<l;i++){
if(count<len-1){
temp=str.substr(i,1)
if(patern.exec(temp)==null){
count=count+1;
}else{count=count+2;}
str1+=temp
}else{break}
}
return str1+"...";
}

24 获取域名的主机

 //var url=" http://www.baidu.com/
//http是传输协议,www是主机名(在服务器规划是取得别名),baidu.com是域名
function getHost(url){
var host="null";
if(typeof url=="undefined"||null){
url=window.location.href;
}
var regex=/^\w+\:\/\/([^\/]*).*/;
var match=url.match(regex);
if(typeof match!="undefined"&&match!=null){
host=match[1];
}
return host;
}

26 清楚空格

 String.prototype.trim=function(){
//?表示*可选最终就是个不定长度的字符.可选长度为0或n
var space=/^\s*(.*?)\s+$/;
retuen this.replace(space,"$s1");
}

27 替换全部

 //用s2替换s1
String.prototype.replaceAll=function(s1,s2){
return this.replace(new RegExp(s1,"gm"),s2)
}

28 html文档中转义和解码字符

 // &,",<,>
function htmlEncode(text){
return text.replace(/&/g,'&amp;').replace(/\"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}
function HtmlDecode(text) {
return text.replace(/&amp;/g, '&').replace(/&quot;/g, '\"').replace(/&lt;/g, '<').replace(/&gt;/g, '>') }

29 判断是否为数字类型

 function isDigit(value){
var pattern=/^[0-9]*$/;
//exec匹配结果是一个数组,null未找到匹配
if(pattern.exec(value)==null||value==""){
return false
}else{
return true;
}
}

30 设置cookie

 function addCookie(name,value,expiresHours){
//escape避免乱码
var cookieString=name+"="+escape(value);
//判断是否设置过期时间
if(expiresHours>0){
var date=new Date();
//使用GMT时间。获取毫秒数
date.setTime(date.getTime+expiresHours*3600*1000);
cookieString=cookieString+"; expires="+date.toGMTString();
}
document.cookie=cookieString;
}

31 获取指定cookie

 function getCookie(name){
//获取cookie字符串
var strCookie=document.cookie;
//将字符串用;分割成各单个cookie数组
var arrCookie=strCookie.split(";");
for(var i=0;i<arrCookie.length;i++){
//对每一个cookie处理
var arr=arrCookie[i].split("=");
if("name"==arr[0]){
name=arr[1];
break;
}
}
}

32 加入收藏夹

 function AddFavorite(sUrl,sTitle){
try{//ie
window.external.addFavorite(sUrl,sTitle);
}catch(e){
try{//ff
window.sideBar.addPanel(sTitle,sUrl,"");
}catch(e){//其他
alert("加入收藏失败,请使用Ctrl+D进行添加");
}
}
}

33 判断IE6

 //方法一
var isIE6= /msie 6/i.test(navigator.userAgent); //方法2:
var isIE6= navigator.appVersion.indexOf("MSIE 6")>-1;
//方法一和二是通过navigator对象获取浏览器信息字符串,获取相关信息确认是否是IE6

34 跨域解决方法

 //方法一 document.domain+iframe
//这种方式适用于{www.kuqin.com, kuqin.com, script.kuqin.com, css.kuqin.com}中的任何页面相互通信。
www.a.com的a.html
document.domain='a.com';//配置其主域为要访问页面的主域
var ifr=document.createElement('iframe');
ifr.src='http://script.a.com/b.html';//这个iframe中存放要访问的页面
ifr.style.style='none';
document.appendChild(ifr);
ifr.onload=function(){
//获取iframe的文档
var doc=ifr.contentDocument||ifr.contentWindow.documnet;
//在a.html中操作
alert(doc.getElementsByTagName("h1")[0].nodeValue);
}
script.a.com的b.html文档中document.domain='a.com'
//方法二 动态创建script(jsonp)
function load_script(url, callback){
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
//借鉴了jQuery的script跨域方法
script.onload = script.onreadystatechange = function(){
if((!this.readyState||this.readyState === "loaded"||this.readyState === "complete")){
callback && callback();
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
if ( head && script.parentNode ) {
head.removeChild( script );
}
}
};
// Use insertBefore instead of appendChild to circumvent an IE6 bug.
head.insertBefore( script, head.firstChild );
}
//callback对跨域中的数据进行操作
load_script('http://suggestion.baidu.com/su?wd=w',function(){alert('loaded')});
//方法三window.name实现的跨域数据传输(略)

35 加载样式文件

 function loadStyle(url){
try {
document.createStyleSheet(url);
}catch(e){
var cssLink=document.createElement('link');
cssLink.rel='stylesheet';
cssLink.type='text/css';
cssLink.href=url;
var head=document.getElementsByTagName('head')[0];
head.appendChild(cssLink);
}
}

36 今天是星期几

"今天是星期"+"0123456".charAt(new Date().getDay());

38 返回按id检索的元素对象

function $(id){ return !id?null:document.getElementsById(id) }

39 元素显示的通用方法

 function display(id){
var obj=$(id);
//visibility占用空间
if(obj.style.visibility){
obj.style.visibility=obj.style.visibility=='visibe'?'hidden':'visible'
}else{
//display不占用空间
obj.style.display=obj.style.display==''?'none':''
}
}

40 insrtAfter函数

 function insertAfter(newChild,targetChild){
//获取待操作节点的父节点
var parent=targetChild.parentNode;
if(parent.lastChild==targetChild){
//若目标节点为最后子节点,替换
parent.lastChild=newChild;
}else{
//在目标节点的兄弟节点之前插入
parent.insertBefore(newChild,targetChild.nextSibling)
} }

41 压缩css样式代码

 function yasuoCss(s){
s=s.replace(/\/\*(.|\n)*?\*\//g,"");//删除注释
s=s.replace(/\s*([\{\}\:\;\,])\s*/g,"$1")
s=s.replace(/\,[\s\.\#\d]*\{/g,"{");//容错处理
s=s.replace(/;\s*;/g,";");//清除连续分号
s=s.match(/^\s*(\S+(\s+\S+)*)\s*$/)//去掉首尾空白
return (s===null)?"":s[1]
}

42 获取当前路径

 var currentPageUrl='';
if(typeof this.href==="undefined"){
currentPageUrl=document.location.tostring.toLowerCase();
}else{
currentPageUrl=this.href.tostring.toLowerCase();
}

43 checkbox全选全不选

  function checkAll() {
var selectall = document.getElementById("selectall");
var allbox = document.getElementsByName("allbox");
if (selectall.checked) {
for (var i = 0; i < allbox.length; i++) {
allbox.checked = true;
}
} else {
for (var i = 0; i < allbox.length; i++) {
allbox.checked = false;
}
}
}

44 判断移动设备

  function isApple(){
return (/iphone|ipod|ipad|macintosh/i.test(navigation.userAgent.toLowerCase()));
}
function isAndroid(){
return (/android/.test(navigator.userAgent.toLowerCase()));
}

45 克隆对象

 //单步操作
function clone(obj){
if(obj===null||"object"!=typeof obj) return obj;
//handle date
if(obj instanceof Date){
var copy=new Date();
copy.setTime(obj.getTime());
return copy;
}
//handle Array
if(obj instanceof Array){
var copy=[];
for(var i=0;var len=obj.length;i++){
copy[i]=clone(obj[i]);
}
return copy;
}
//handle object
if(obj instanceof Object){
var copy={};
for(var attr in obj){
if(obj.hasOwnProperty(attr)){
copy[attr]=clone(obj.attr);
}
}
return copy
}
throw new Error("Unable to copy obj! ");
}
//利用递归深度克隆
Object.prototype.clone=function(){
var objClone;
if(this.constructor==Object){
objClone=new this.constructor();
}else{
objClone=new this.constructor(this.valueOf());
}
for(var key in this){
if ( objClone[key] != this[key] ){
if ( typeof(this[key]) == 'object' ){
objClone[key] = this[key].Clone();
}else{
objClone[key] = this[key];
}
}
}
objClone.toString = this.toString;
objClone.valueOf = this.valueOf;
return objClone;
}
}

46 敏感词过滤

 function badWord(text,words){
//将文本转化成字符串
text=String(text||'');
words=words||[];
var reg=new RegExp(words.join('|'),'g');
var self=this;
return text.replace(reg,function($0){
var length=String($0||'').length;
//用*替代
return self.repeat('*',length);
})
}

47 常用正则

 var RegExps={
isEmail:function(mail){
return /^([a-z0-9]+[_\-\.]?)*[a-z0-9]+@([a-z0-9]+[_\-\.]?)*[a-z0-9])+\.[a-z]{2,5}/i.test(mail);
},
isIdCard:function(card){
return /^(\d{14}|\d{17})(\d|[xX])/.test(card);
},
isMobile:function(mobile){
return /^0*1\d{10}$/.test(mobile);
},
isQQ:function(qq){
return /^[1-9]\d{4,10}$/.test(qq);
},
isTel:function(tel){
return /^\d{3,4}-\d{7,8}(-\d{1,6})?$/.text(tel);
},
isUrl:function(url){
return /https?:\/\/[a-z0-9\.\-]{1,255}\.[0-9a-z\-]{1,255}/i.test(url);
},
isColor:function(color){
return /#([\da-f]{3}){1,2}$/i.test(color);
},
isFloat:function(num){
return/^(([1-9]\d*)|(\d+\.\d+)|0)/.test(num);
},
isInt:function(num){
return /^[1-9]\d*$/.test(num);
},
}

48 获取数组中的最大最小值

 //利用math对象
var max=Math.max.apply(null,array);
var min=Math.min.apply(null,array);

49 反转文本顺序

 //分解字符串为数组
var aTxt='反转文本顺序'.split('');
var str='';
for(var i=aTxt.length-1;i>0;i--){
str+=aTxt[i]
}

50 选择框跳转页面

 <select onchange="window.open(this.options[this.selectedIndex].value)"> 
2 <option value="http://www.baidu.com/" selected >百度</option>
3 <option value="http://www.163.com/">网易</option> 4 </select>

51 批量修改样式

 //给一个HTML元素设置css属性,如
var head= document.getElementById("head");
head.style.width = "200px";
head.style.height = "70px";
head.style.display = "block";
//这样写太罗嗦了,为了简单些写个工具函数,如
function setStyle(obj,css){
for(var atr in css){
obj.style[atr] = css[atr];
}
}
var head= document.getElementById("head");
setStyle(head,{width:"200px",height:"70px",display:"block"})
//使用了cssText属性,后在各浏览器中测试都通过了。
var head= document.getElementById("head");
head.style.cssText="width:200px;height:70px;display:bolck";

52 获取Url中的get参数值

 function get_get(){
//将url地址用?分割成两个字符数组
querystr=window.location.href.split("?");
if(querystr[1]){
//将上面得到的字符数组1用&分割成一个新字符数组
Gets=query[1].split("&");
//新建一个存储结果的数组
get=new Array();
for(var i=0;i<Gets.length;i++){
//每个元素用=分割形成又一个临时数组
tem_arr=Gets[i].split("=");
key=tmp_arr[0];
get[key]=tmp_arr[1]
}
}
return get;
}

53 在新窗体中打开页面

window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,

toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')

//宽为100,高为400,距屏顶0象素,屏左0象素,无工具条,无菜单条,无滚动条,不可调整大小,

无地址栏,无状态栏。

54 获取单选按钮的值

 //<input type="radio" name="browser" value="Internet Explorer" />Internet Explorer<br />,一个表单里面有多个单选框,且name属性一致
function get_radio_value(field){//field为单选按钮的name属性值
if(field&&field.length){
for(var i=0;i<field.length;i++){
if(field[i].checked){//若此按钮选中
return field[i].value;
}
}else{return;}
}
}

55 获取复选框的值

 function get_checkbox_value(field){
if(field&&field.length){
for(var i=0;i<field.length;i++){
//被选中且不能禁用
if(field[i].checked && !field[i].disabled){
return field[i].value;
}
}
}else {
return;
}
}

收藏的一些javascript片段的更多相关文章

  1. 收集有用的 Javascript 片段

    内容目录 数组 arrayMax arrayMin chunk compact countOccurrences deepFlatten difference distinctValuesOfArra ...

  2. JavaScript 片段

    js split 的用法和定义 js split分割字符串成数组的实例代码 <script language="javascript"> str="2,2,3 ...

  3. 值得收藏!!javascript数组中多条对象去重方式,很实用!!!

    在数组中都是数字的时候很好去重,例如:var  arr=[1,2,2,2,3,4,5,4,5,3,6]:可以用两层for循环或者其他方式进行去重 我在这里也给出一个方法吧: Array.prototy ...

  4. 30秒就能理解的JavaScript优秀代码

    数组 arrayMax 返回数组中的最大值. 将Math.max()与扩展运算符 (...) 结合使用以获取数组中的最大值. const arrayMax = arr => Math.max(. ...

  5. 解析Javascript事件冒泡机制

    本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...

  6. JavaScript操作XML

    JavaScript操作XML (一) JavaScript操作XML是通过XML DOM来完成的.那么什么是XML DOM呢?XML DOM 是: 用于 XML 的标准对象模型 用于 XML 的标准 ...

  7. Javascript事件冒泡机制

    1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...

  8. HTML系列&lpar;HTMl&plus;CSS&plus;JavaScript&plus;Jquery&rpar;--un

    HTML 指超文本标签语言. 点击查看更详细的HTML内容 包括:一.基本标签;二.常用标签;三.表单<form></form>;四.表格<table></t ...

  9. 【JavaScript】JavaScript中的Timer是怎么工作的( setTimeout,setInterval)

    原文(http://www.yeeyan.org/articles/view/luosheng/24380) 作为入门者来说,了解JavaScript中timer的工作方式是很重要的.通常它们的表现行 ...

随机推荐

  1. tengine&sol;nginx-tomcat动静分离遇到的问题

    小站安装好tengine后,接下来的工作就是要配置好tengine让其和后端的tomcat正常的连接工作起来,tengine的配置文件本身比较简单,网上有大量的相关介绍说明文档,我这里只是摘出我配置过 ...

  2. 【原】iOS学习之SQLite和CoreData数据库的比较

    1. SQLite数据库 sqlite数据库操作的基本流程是, 创建数据库, 再通过定义一些字段来定义表格结构, 可以利用sql语句向表格中插入记录, 删除记录, 修改记录, 表格之间也可以建立联系. ...

  3. ASP&period;NET并发处理

    http://blog.csdn.net/hliq5399/article/details/6280288

  4. Codevs 1001 舒适的路线 2006年 NOIP全国联赛提高组

    1001 舒适的路线 2006年 时间限制: 2 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description Z小镇是一个景色宜人的地方,吸引来自各地的观 ...

  5. utf8格式源代码中的字符串,默认都会当作char来处理,除非用L&quot&semi;&quot&semi;符号来修饰

    原先QString("mystrr"),现在都不认了,必须都要加上L才行 原先:m_conn->put_HttpProxyAuthMethod("Basic&quo ...

  6. mongodb (一)

    #mongodb安装(3.4.0) #下载安装包,解压 mkdir /data/mongodb cd /data/mongodb mkdir log conf data bin vim conf/mo ...

  7. 单片AT89C2051 &plus; SD卡 &plus; 3310LCD &equals; 音乐播放器

    http://www.amobbs.com/thread-4503884-1-1.html 这个小玩意,采用 ATMEL 的传统51MCU作主控制芯片,加上SD卡和显示屏,就可以作简单的音乐播放器了, ...

  8. mayan游戏

    这道题超级好 就是我太菜了写了几个小时不算是debug了几个小时. 我只想出了几个小剪枝 可能是状态不太好吧 写完这道题真的是完美诠释了什么,叫做: 暴力出奇迹!!! 真的是太暴力了. 最多只移动5步 ...

  9. 十二省联考题解 - JLOI2019 题解

    十二省联考题解 - JLOI2019 题解 两个T3的难度较大 平均代码量远大于去年省选 套路题考查居多 A 难度等级 1 $n^2$暴力可以拿到$60$分的优秀成绩 然后可以想到把区间异或转化为前缀 ...

  10. C&num; 成员变量和属性的区别

    之前一直在C#中使用这两者, 却一直不知道成员变量和属性还是不一样的两种概念. 不过说不一样, 也不是完全对. 简单举个例子: public class myclass { public string ...