原生js常用方法

1.實現(xiàn)jquery中addClass()和removeClass()的功能:

function addClass( obj, className){
    if( obj.className ==''){
        obj.className = className;
    }else{
        var arrClassName = obj.className.split(' ');
        if(arrIndexOf( arrClassName, className) ==-1){
            obj.className += ' '+className;
        }
    }
}
function removeClass( obj, className){
    if(obj.className !=''){
        var arrClassName = obj.className.split(' ');
        if(arrIndexOf( arrClassName,className )!=-1 ){
            arrClassName.splice(arrIndexOf( arrClassName,className ),1);
            obj.className = arrClassName.join(' ');
        }
    }
}
//判斷要添加的類是否已存在
function arrIndexOf(arr,v){
    for(var i=0;i<arr.length;i++){
        if(arr[i]==v){
            return i;
        }
    }
    return -1;
}

2.寫一個placeholder的兼容函數(shù),value為“請輸入內(nèi)容”。當(dāng)獲取焦點時清空巷嚣,失去焦點且為空時恢復(fù)

    <input type="text" value="請輸入內(nèi)容" id="text1" />
    <script>
        var oText1=document.getElementById("text1");
        oText1.onfocus=function(){
            if(this.value=="請輸入內(nèi)容"){
                this.value='';
            }
        }
        oText1.onblur=function(){
            if(this.value==''){
                this.value=="請輸入內(nèi)容";
            }
        }
    </script>
</body>

2.實現(xiàn)了事件綁定函數(shù):

function bind(obj,evname,fn){
    if(obj.addEventListener){
        obj.addEventListener(evname,fn,false);
    }else{
        obj.attachEvent('on'+evname,function(){
            fn.call(obj);//調(diào)用call方法掺逼,在IE下將this從指向window改為指向當(dāng)前對象
        }
    )}
}

3.實現(xiàn)事件解綁:

function removBind(obj,evname,fn,bl){
    if(obj.removeEventListener){
        obj.removeEventListener(evname,fn,bl)
        }else{obj.detachEvent('on'+evname,fn,function(){
            fn.call(obj);
        })
    }
}

4.事件偵聽器:

var Event = {
     // 頁面加載完成后
     readyEvent : function  (fn) {
       if (fn == null) {
           fn = document;
       }
       var oldonload = window.onload;
       if (typeof window.onload != 'function') {
           window.onload = fn ;
       }else{
           window.onload = function  () {
             oldonload();
             fn();
           }
       };
     },
     //添加事件
     addEvent : function(element, type, hander) {
       if (element.addEventListener) {        //非IE
                //事件類型、需要執(zhí)行的函數(shù)衡奥、是否捕捉
           element.addEventListener(type, hander, false);
       }else if(element.attachEvent){        //IE
           element.attachEvent('on' + type,function  () {
               hander.call(element);
           })
       }else{
           element['on' +type] = hander;
       };
     },
     //移除事件
     removeEvent : function  (element, type, hander) {
       if (element.removeEventListener) {
           element.removeEventListener(type, handler, false)
       }else if (element.attachEvent) {
           element.attachEvent('on' + type, hander);
       }else{
           element['on' + type] = null;
       };
     },
     //阻止事件
     stopPropagation : function  (event) {
       if (event.stopPropagation) {
           event.stopPropagation();    //W3C標(biāo)準(zhǔn)
       }else{
           event.canceBubble = true;   //IE
       };
     },
     //取消默認(rèn)事件
     preventDefault : function (event) {
       if (event.preventDefault) {
             event.preventDefault();
       };
     },
     //獲取事件目標(biāo)
     getTarget : function (event) {
       return event.target|event.srcElement;
     },
     //獲取event對象的引用爹袁,取到事件的所有信息,確保隨時能使用event矮固;
     getEvent:function (event) {
       var event = event || window.event;
       if (!event) {
           var c = this.getEvent.caller;
           while(!c){
               event = c.arguments[0];
               if (event && Event == ev.constructor) {
                   break;
               };
               c = c.caller;
           }
       };
       return event;
     }    
 }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末失息,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子档址,更是在濱河造成了極大的恐慌盹兢,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,185評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件守伸,死亡現(xiàn)場離奇詭異绎秒,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)尼摹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評論 3 393
  • 文/潘曉璐 我一進(jìn)店門见芹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人蠢涝,你說我怎么就攤上這事玄呛。” “怎么了和二?”我有些...
    開封第一講書人閱讀 163,524評論 0 353
  • 文/不壞的土叔 我叫張陵徘铝,是天一觀的道長。 經(jīng)常有香客問我,道長惕它,這世上最難降的妖魔是什么怕午? 我笑而不...
    開封第一講書人閱讀 58,339評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮淹魄,結(jié)果婚禮上郁惜,老公的妹妹穿的比我還像新娘。我一直安慰自己揭北,他們只是感情好扳炬,可當(dāng)我...
    茶點故事閱讀 67,387評論 6 391
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著搔体,像睡著了一般恨樟。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上疚俱,一...
    開封第一講書人閱讀 51,287評論 1 301
  • 那天劝术,我揣著相機(jī)與錄音,去河邊找鬼呆奕。 笑死养晋,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的梁钾。 我是一名探鬼主播绳泉,決...
    沈念sama閱讀 40,130評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼姆泻!你這毒婦竟也來了零酪?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,985評論 0 275
  • 序言:老撾萬榮一對情侶失蹤拇勃,失蹤者是張志新(化名)和其女友劉穎四苇,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體方咆,經(jīng)...
    沈念sama閱讀 45,420評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡月腋,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,617評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了瓣赂。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片榆骚。...
    茶點故事閱讀 39,779評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖煌集,靈堂內(nèi)的尸體忽然破棺而出寨躁,到底是詐尸還是另有隱情,我是刑警寧澤牙勘,帶...
    沈念sama閱讀 35,477評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響方面,放射性物質(zhì)發(fā)生泄漏放钦。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,088評論 3 328
  • 文/蒙蒙 一恭金、第九天 我趴在偏房一處隱蔽的房頂上張望操禀。 院中可真熱鬧,春花似錦横腿、人聲如沸颓屑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽揪惦。三九已至,卻和暖如春罗侯,著一層夾襖步出監(jiān)牢的瞬間器腋,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評論 1 269
  • 我被黑心中介騙來泰國打工钩杰, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留纫塌,地道東北人。 一個月前我還...
    沈念sama閱讀 47,876評論 2 370
  • 正文 我出身青樓讲弄,卻偏偏與公主長得像措左,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子避除,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,700評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 一怎披、樣式篇 第1章 初識jQuery (1)環(huán)境搭建 進(jìn)入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,380評論 0 44
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計者無需花費時間糾纏JS復(fù)雜的高級特性驹饺。 1....
    LaBaby_閱讀 1,171評論 0 1
  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關(guān)注...
    程序員poetry閱讀 16,643評論 18 503
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式钳枕。設(shè)計者無需花費時間糾纏JS復(fù)雜的高級特性。 1....
    LaBaby_閱讀 1,335評論 0 2
  • 為甚嚒要學(xué)習(xí)jQuery赏壹? 因為JS中有很多痛點: window.onload事件只能出現(xiàn)一次鱼炒,如果出現(xiàn)多次,后面...
    magic_pill閱讀 816評論 0 13