前端函数封装与效果实现

1.添加事件

//添加事件的兼容性这里指的是ie与w3c
//w3c特点是 1.可以屏蔽相同的函数2.可以设置冒泡和捕获
//ie不支持捕获，只支持冒泡，2.IE添加事件不能屏蔽重复的函数，3ie中的this指向的是window而不是dom对象。4.在传统事件上，ie是无法接受到event对象的，但使用了attachEvent()却可以，但有些区别

//声明此函数不能阻止ie中对象事件的重复添加
function addEvent(obj,type,fn){
    if(obj.addEventListener){
        obj.addEventListener(type,fn);
    }else if(obj.attachEvent){
        obj.attachEvent('on'+type,fn);
    }
}

2.移除事件

//移出事件兼容
function removeEvent(obj,type,fn){
    if(obj.removeEventListener){
        obj.removeEventListener(type,fn);
    }else if(obj.detachEvent){
        obj.detachEvent('on'+type,fn);
    }
}

3.兼容性的得到事件目标

//兼容性的得到事件目标
function getTarget(evt){
    if(evt.target){
        return evt.target;
    }else if(window.event.srcElement){
        return window.event.srcElement;
    }
}

4.阻止事件

//跨浏览器兼容
function preDef(evt){
    var e=evt||window.event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue=false;
    }
}

5.去除空白节点

//需要兼容火狐浏览器，ie会自动忽略空白节点类型
function getNodes(nodes){
    var ret=[];
    for(var i=0;i<nodes.length;i++){
        //如果识别到空白文本节点，就不添加数组
        if(nodes[i].nodeType==3&&/^\s+$/.test(nodes[i].nodeValue)) continue;
        //把每次的元素节点，添加到数组里
       ret.push(nodes[i]);
    }
    return ret;
}

6.ajax使用在原生js中

function ajax(obj){
    var xhr=new createXHR();
    obj.url=obj.url+"?rand="+Math.random();
    obj.data=params(obj.data);
    if(obj.method==='get') obj.url=obj.url.indexOf('?')==-1?obj.url+'?'+obj.data:obj.url+'&'+obj.data;

    if(obj.async===true){
        xhr.onreadystatechange=function(){
            //使用异步调用的时候需要触发readystatechange事件，然后检测readyState属性即可
            //这个属性有五个值，4表示已经接受到全部响应数据，而且可以使用
            if(xhr.readyState===4) callback();
        }
    }
    xhr.open(obj.method,obj.url,obj.async);
    if(obj.method==='post'){
        //向服务器发送post请求由于解析机制的原因，需要进行特别的处理。因为post请求和web表单提交是不同的，需要使用XHR来模仿表单提交
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send(obj.data);
    }else{
        xhr.send(null);
    }
    if(obj.async===false){
        callback();
    }
    function callback(){
        if(xhr.status==200){
            return xhr.responseText;
        }else{
            alert('数据返回失败！状态代码：'+xhr.status+',状态信息：'+xhr.statusText);
        }
    }

    //名值对编码
    function params(data){
        var arr=[];
        for(var i in data){
            arr.push(encodeURIComponent(i)+'='+encodeURIComponent(data[i]));
        }
        return arr.join('&');
    }

}



其中参数obj类型是
 var obj={
        async:false,
        method:'get',
        data:null
    };

7.兼容性的的鼠标的滚动距离

/*得到鼠标的滚动距离*/
function getWD(evt){

    var e=evt||window.event;
    if(e.wheelDelta){
        return -e.wheelDelta;
    }else if(e.detail){
        return -e.detail*40;
    } 
}

8.查看窗口滚动条的位置

/*查询窗口滚动条的位置*/

/*传递x,y参数则是设置，不传是获取数据*/



function ScrollOffsets(w,x,y){

    var w=w||window;//使用指定的窗口，如果不传参数则使用当前窗口

    var d=w.document;
    if(x){

        if(w.pageXOffset!=null){
            w.pageXOffset=x;
            w.pageYOffset=y;
        }else if(document.compatMode=="CSS1compat"){
            documentElement.scrollLeft=x;
            documentElement.scrollTop=y;
        }else{
            d.body.scrollLeft=x;
            d.body.scrollTop=y;
        }

    }else{
          if(w.pageXOffset!=null) return {x:w.pageXOffset,y:w.pageYOffset};

        var d=w.document;
        if(document.compatMode=="CSS1Compat"){
            //对标准格式下的IE或(任何浏览器)
            return {x:documentElement.scrollLeft,y:d.documentElement.scrollTop};
        }

        //对怪异格式下的浏览器
        return {x:d.body.scrollLeft,y:d.body.scrollTop};
    }

}

9.将图片转换成base64的编码

//将图片转换成base64的编码 第一参数是文件上传，第二参数是图片
function changeImgTo(img,imgShow){

    addEvent(img,"mouseout",startt);


    //转换函数
    function  startt(){
      if(img.value!=""){
        var imgFile=new FileReader();
        imgFile.readAsDataURL(img.files[0]);  
        imgFile.onload=function(){
            var imgData=this.result;//base64数据
            imgShow.setAttribute('src',imgData);
            //imgShow.style.backgroundImage=imgData;

        } 
      }   
    }
}

10.兼容的web复制效果（貌似不好用）

//兼容IE，firefox等浏览器的复制
　//　Java代码
function copyToClipboard(txt) {
　　if(window.clipboardData) {
　　window.clipboardData.clearData();
　　window.clipboardData.setData("Text", txt);
　　} else if(navigator.userAgent.indexOf("Opera") != -1) {
　　window.location = txt;
　　} else if (window.netscape) {
　　try {
　　netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
　　} catch (e) {
　　alert("被浏览器拒绝！\n请在浏览器地址栏输入'about:config'并回车\n然后将'signed.applets.codebase_principal_support'设置为'true'");
　　}
　　var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
　　if (!clip)
　　return;
　　var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
　　if (!trans)
　　return;
　　trans.addDataFlavor('text/unicode');
　　var str = new Object();
　　var len = new Object();
　　var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
　　var copytext = txt;
　　str.data = copytext;
　　trans.setTransferData("text/unicode",str,copytext.length*2);
　　var clipid = Components.interfaces.nsIClipboard;
　　if (!clip)
　　return false;
　　clip.setData(trans,null,clipid.kGlobalClipboard);
　　}
}

使用flash插件复制效果可能还好一点

11.检查浏览器的名称版本、引擎、可以被服务器端欺骗改写响应头

function browserdeletect(){
            var browser={
                ie:false,
                firefox:false,
                konq:false,
                opera:false,
                chrome:false,
                safari:false,
                mobile:false,

                ver:0,//具体名称
                name:"",//浏览器的名称
            }
            var engine = { //呈现引擎
            ie : false,
            gecko : false,
            webkit : false,
            khtml : false,
            opera : false,
            ver : 0 //具体的版本号
            };
            var ua=navigator.userAgent;
            if (/Trident([^;]+)/.test(ua)) {       
            engine.ver = browser.ver = RegExp['$1']; //设置版本
            engine.ie = browser.ie = true; //填充保证为true
            browser.name = 'Internet Explorer'; //设置名称
            }else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {
                engine.ver = RegExp['$1'];
                engine.gecko = true;
                if (/Firefox\/(\S+)/.test(ua)) {
                browser.ver = RegExp['$1']; //设置版本
                browser.firefox = true; //填充保证为true
                browser.name = 'Firefox'; //设置名称
                }
            }else if(/AppleWebKit\/(\S+)/.test(ua)){
                engine.ver=RegExp['$1'];
                engine.webkit=parseFloat(engine.ver);
                if(/Chrome\/(\S+)/.test(ua)){
                    browser.ver=RegExp['$1'];
                    browser.chrome=true;
                    browser.name='Chrome';
                }else if(/Version\/(\S+)/.test(ua)){
                    browser.ver=RegExp['$1'];
                    browser.safari=true;
                    browser.name='Safari';
                }
            }else if(/Mobile/.test(ua)){
                browser.mobile=true;
            }                  
        //检查操作系统
        var system={

                         win:false,
                         mac:false,
                         x11:false
                    };    
        var p=navigator.platform;//获取系统   
        system.win=p.indexOf('Win')==0;//判断是否是window
        system.mac=p.indexOf('Mac')==0;//判断是否是mac
            system.x11=(p=='X11')||(p.indexOf('Linux')==0);//判断是否是Unix,linux           
            return browser;                   
}

12.兼容鼠标按下事件的按钮返回值，0左键，1滚轮，2右键

function getButton(evt){
    var e=evt||window.event;
    if(evt){
        return e.button;
    }else if(window.event){
        switch(e.button){
                case 1:
                    return 0;
            case 2:
                return 1;
            case 3:
                return 2;
        }

    }
}

13.获得光标的位置或设置光标的位置

//设置光标的位置，也可以设置选中的位置
function moveCursor(s,e,ems){
     var isIE=!(!document.all);
    var start=s;
    var end=e;
    var oTextarea=ems;
    if(isNaN(start)||isNaN(end)){
        alert("位置输入错误");
    }
    if(isIE){
        var oTextRange=oTextarea.createTextRange();
        var LStart=start;
        var LEnd=end;
        var start=0;
        var end=0;
        var value=oTextarea.value;
        for(var i=0;i<value.length&&i<LStart;i++){
            var c=value.charAt(i);
            if(c!='\n'){
                start++;
            }
        }
        //从面计算
        for(var i=value.length-1;i>=LEnd&&i>=0;i--){
            var c=value.charAt(i);
            if(c!='\n'){
                end++;
            }
        }
        oTextRange.moveStart('character',start);
        oTextRange.moveEnd('character',-end);
        oTextRange.select();
        oTextarea.focus();        
    }else{
        oTextarea.select();
        oTextarea.selectionStart=start;
        oTextarea.selectionEnd=end;
    }
}


function posCursor(ems){
    var isIE=!(!document.all);
    var start=0,end=0;
    var oTextarea=ems;
    if(isIE){
        //selecttion当前激活选中区，即高亮文本块，和/或文档中用户可执某些操作的其它元素。createRange从当前文本选中去中创建TextRange对象或从控件选中区中创建controlRange集合
        var sTextRange=document.getSelection.createRange();
        //判断选中的是不是textarea对象
        if(sTextRange.parentElement()==oTextarea){
            //创建一个TextRange对象
            var oTextRange=document.body.createTextRange();
            //移动文本范围的开始和结束位置能够完全包含给定元素的文本。
            oTextRange.moveToElementText(oTextarea);
            //此时得到的两个TextRange oTextRange文本域(textarea)中文本的TextRange对象 sTextRange是选中区域文本的TextRange对象
            //compareEndPoint方法介绍，compareEndPoints方法用于比较两个TextRange对象的位置
            //StartToEnd 比较TextRange开头与参数TextRange的末尾
            //StartToStart 比较TextRange开头与参数TextRange的开头
            //EndToStart 比较TextRange末尾与参数TextRange的开头。
            //EndToEnd比较TextRange末尾与参数TextRange的末尾
            //moveStart方法介绍，更改范围的开始位置
            //character按字符移动
            //word按单词移动
            //sentence按句子移动
            //textedit启动编辑动作
            //这里我们比较oTextRange和TextRange的开头到选中区域的开头位置for(start=0;oTextRange.compareEndPoints("StartToStart",sTextRange)<0;start++){
                oTextRange.moveStart('character',1);
            }
            //需要计算一下\n的数目(按字符移动的方式不计\n，所以这里加上)
            for(var i=0;i<=start;i++){
                if(oTextarea.value.charAt(i)=='\n'){
                    start++;
                }
            }
            //再计算一次结束的位置
            oTextRange.moveToElementText(oTextarea);
            for(end=0;oTextRange.compareEndPoints('StartToEnd',sTextRange)<0;end++){
                oTextRange.moveStart('character',1);
            }
            for(var i=0;i<=end;i++){
                if(oTextarea.value.charAt(i)=='\n'){
                    end++;
                }
            }

        } 
    }else{
        start=oTextarea.selectionStart;
        end=oTextarea.selectionEnd;
    }
    return {s:start,e:end};
}

14.获取样式规则

//获取样式规则link或style

//注意此种方式只能获取内联或链接样式的宽高，不能获取到行内和计算后的样式
function getLink(){
//拿到第一个css样式对象
    var sheet=document.styleSheets[0];
    var rules=sheet.cssRules||sheet.rules;
    return rules;
}

15.获取文档页面大小

//兼容性的获取页面大小
//得到用户文档页面大小分辨
function getDocSize(){
    var width=window.innerWidth;
    var height=window.innerHeight;
    if(typeof width!='number'){
        //如果是IE,就使用document if(document.compatMode=='CSS1Compat'){         width=document.documentElement.clientWidth;        height=document.documentElement.clientHeight;
        }else{       width=document.body.clientWidth;//非标准使用body
            height=document.body.clientHeight;
        }
    }
    return {w:width,h:height}  
}

16.兼容性的获得鼠标的位置

/*兼容性获取鼠标的位置
firefox或者其他浏览器，event会被相应的函数获取，在msie(IE)中为空,所以得到window.event,firefox和其他浏览器用event.pageX和evet.pageY来表示鼠标相对于文档的位置，而msie的event.clientX和event.clientY表示鼠标相对于窗口的位置，而不是文档。最后，msie中文档并不是从0,0开始，而是通常有一个小的边框，它在计算时也把它加进去了，我们需要把它去掉document.body.clientLeft和clientTop中。*/
function mousePosition(ev){
    var ev=ev||window.event;
    if(ev.pageX||ev.pageY){
        return {x:ev.pageX,y:ev.pageY};
    }
    return {     x:ev.clientX+document.body.scrollLeft-document.body.clientLeft,       y:ev.clientY+document.body.scrollTop-document.body.clientTop
    };
}

17.获得元素在文档中的位置

//获取元素在文档中的位置
function getElemLocation(e){
    //获取元素的纵坐标
    function getTop(e){
        var y=e.offsetTop; if(e.offsetParent!=null) y+=getTop(e.offsetParent);
        return y;
    }
    //获取元素的横坐标
    function getLeft(e){
        var x=e.offsetLeft;
       if(e.offsetParent!=null) x+=getLeft(e.offsetParent);
        return x;
    }
    y1=getTop(e);
    x1=getLeft(e);
    return {x:x1,y:y1}
}

js中的一些现象

如果你想写一个html5的音乐播放器则会使用到audio标签，实现下一首个功能使用的是删除源标签而后创建一个新的标签而后设置src属性的内容（试过使用src设置方法实现的不了个人想要的效果）

style.backgroudnImage设置背景图片的问题，个人未曾实现这种方法显示图片

js中keydown与keypress的区别是keydown先触发事件后执行它的操作，keypress是先执行它的操作后执行事件函数
其中keypress无法触发backgspace事件
如果不出意外你应该遇见将一个元素有none转换成block的现象，这时如果你再次获取top的值会发现它变成0px
在添加事件的时候如果使用的是函数名的话，则参数e设置在事件函数上，可以在函数中直接拿到事件对象，无需传值。

html与css的效果

如果你想要改变鼠标选中后元素背景颜色改变
可以使用如下方法

　如：改变选中后，选中区域的背景颜色为浅蓝色。
　　在css中写入如下代码：
　　/* webkit, opera, IE9 */
　　::selection { background:lightblue; }
　　/* mozilla firefox */
　　::-moz-selection { background:lightblue; }
　　　说明：
　　1、-moz-属性前缀是个火狐浏览器用的，而基本的::selection选择器是给谷歌浏览器用的。
　　2、background后面可以直接使用颜色值。如：::selection { background:#ffff00; }
　　另外：
　　跟其它CSS选择器的用法一样，也可以嵌套使用，在不同的地方显示不同的颜色。
　　如下：
　　/* webkit, opera, IE9 */
　　div.highlightBlue::selection { background:lightblue; }
　　/* mozilla firefox */
　　div.highlightBlue::-moz-selection { background:lightblue; }</p> <p>/* webkit, opera, IE9 */
　　div.highlightPink::selection { background:pink; }
　　/* mozilla firefox */
　　div.highlightPink::-moz-selection { background:pink; }

关于断词也是常见的问题处理

    强制不换行 
p { white-space:nowrap; } 

自动换行 

p { word-wrap:break-word; word-break:normal; } 

强制英文单词断行 

p { word-break:break-all; } 

*注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。 

span { display:block; }