国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

放棄jQuery, 使用原生js

mumumu / 2593人閱讀

摘要:隨著的逐漸淘汰,的興起,以及側(cè)重點(diǎn)放在了移動(dòng)端,可能變的不在那么重要,原生一樣很好用。下面介紹幾個(gè)原生替換的方法。

隨著IE6、7、8的逐漸淘汰,HTML5的興起,以及側(cè)重點(diǎn)放在了移動(dòng)端,jQuery可能變的不在那么重要,原生一樣很好用。下面介紹幾個(gè)原生替換jq的方法。

獲取元素
//jQuery
$(".xxx");  //class獲取  
$("#xxx");  //id獲取  
$(".xxx.ccc");  //同時(shí)包含xxx和ccc  
$(".xxx,.zzz"); //多選  
$(".xxx div"); //子類(lèi)  
$(".xxx p:first"); //第一個(gè)P元素

//原生js
//querySelector基本上實(shí)現(xiàn)了jq選擇器同樣的功能,具體可以自己測(cè)試,另外querySelector返回的是第一個(gè)元素,querySelectorAll則返回所有選擇的元素。  
document.querySelector(".xxx");  //class獲取  
document.querySelector("#xxx");//id獲取  
document.querySelector(".xxx.ccc");//同時(shí)包含xxx和ccc  
document.querySelector(".xxx,.ccc");//多選  
document.querySelector(".xxx div");//子類(lèi) 
document.querySelector(".xxx p:first-child");//第一個(gè)P元素
添加class
//JQuery
$(".xxx").addClass("class_name");

//原生js
el.classList.add("class_name");  
刪除class
//JQuery
$(".xxx").removeClass("class_name");  

//原生js
el.classList.remove("class_name");  
切換class
//JQuery
$(".xxx").toggleClass("class_name");

//原生js
el.classList.toggle("class_name");
是否包含某個(gè)class
//JQuery
$(".xxx").hasClass("class_name");

//原生js
el.classList.contains("class_name"); 

上面是HTML5提供的新的方法,如果你非要為了兼容所謂的IE,可以用下面的這些

//是否包含class    
function hasClass(o, n){  
    return new RegExp(""+n+"").test(o.className);  
};  
//添加class    
function addClass(o, n){  
    if(!hasClass(o, n)) o.className+=" "+n;  
};  
//刪除class    
function delClass(o, n){  
    if(hasClass(o, n)){  
        o.className = o.className.replace(new RegExp("(?:^|s)"+n+"(?=s|$)"), "").replace(/^s*|s*$/g, "");  
    };  
};
插入HTML
//JQuery
$(el).before(htmlString);  
$(parent).append(el);  
$(el).after(htmlString);

//原生js
parent.appendChild(el);  
el.insertBefore(NewDom,ele);  
ele.insertAdjacentHTML("beforeend", "
  • 內(nèi)容
  • "); //

    具體insertAdjacentHTML的介紹,請(qǐng)移步到 這篇文章(點(diǎn)擊這里)

    獲取子節(jié)點(diǎn)/父節(jié)點(diǎn)
    //JQuery
    $(".xxx").children();
    $(".xxx").parent();
    
    //原生js
    ele.children;
    ele.parentNode
    上一個(gè)節(jié)點(diǎn)
    //JQuery
    $(".xxx").prev();
    
    //原生js
    var prev = ele.previousElementSibling || ele.previousSibling
    下一個(gè)節(jié)點(diǎn)
    //JQuery
    $(".xxx").next();
    
    //原生js
    var next = ele.nextElementSibling || ele.nextSibling
    上下節(jié)點(diǎn)
    //JQuery
    $(ele).siblings();
    
    //原生js
    var siblings = Array.prototype.slice.call(el.parentNode.children);  
    for (var i = siblings.length; i--;) {  
        if (siblings[i] === el) {  
            siblings.splice(i, 1);  
            break;  
        };  
    };  
    [].forEach.call(el.parentNode.children, function(child){  
        if(child !== el);  
    });
    創(chuàng)建節(jié)點(diǎn)
    //JQuery
    var ele = $("
    "); //原生js var ele = document.createElement("div");
    刪除節(jié)點(diǎn)
    //JQuery
    $(ele).remove();
    
    //原生js
    parent.removeChild(ele);
    獲取、設(shè)置、刪除屬性
    //JQuery
    $(ele).attr(name,value) //設(shè)置  
    $(ele).attr(name) //獲取  
    $(ele).removeAttr(name) //刪除
    
    //原生js
    ele.setAttribute(name,value);//設(shè)置  
    ele.getAttribute(name);//獲取  
    ele.removeAttribute(name);//刪除
    Data屬性
    //JQuery
    $("body").data("foo", 52);  //設(shè)置  
    $("body").data("foo");  //獲取  
    $("body").removeData("foo");  //刪除
    
    //原生js
    ele.dataset.foo = 52  //設(shè)置  
    ele.dataset.foo  //獲取  
    獲取內(nèi)容/清空內(nèi)容
    //JQuery
    var html = $(ele).html();
    $(el).empty();
    
    //原生js
    var html = ele.innerHTML;
    el.innerHTML = "";
    獲取文本
    //JQuery
    $(ele).text();
    
    //原生js
    var txt = ele.textContent || ele.innerText
    設(shè)置css
    //JQuery
    $(ele).css("height","300px");  
      
    $(ele).css({  
        height:300  
    });
    
    //原生js
    ele.style.height = "300px";  
    ele.style.cssText = "height:200px;color:red;left:100px;"
    顯示隱藏
    //JQuery
    $(el).show();  
    $(el).hide();
    
    //原生js
    el.style.display = "";  
    el.style.display = "none";
    元素的內(nèi)高度[height + padding]/元素的外高度[height + padding + border]
    //JQuery
    $(ele).innerHeight();
    $(ele).outerHeight();
    
    //原生js
    ele.clientHeight;
    ele.offsetHeight;
    元素的位置
    //JQuery
    $(ele).offset().left;  
    $(ele).offset().top;
    
    //原生js
    ele.offsetLeft;  
    ele.offsetTop;

    文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/100641.html

    相關(guān)文章

    • 你不需要 jQuery,但你需要一個(gè) DOM 庫(kù)

      摘要:對(duì)于復(fù)雜的業(yè)務(wù)需求仍然需要一些操作。使用方式很簡(jiǎn)單,但是你需要?jiǎng)?chuàng)建一個(gè)獨(dú)立文件,重新掛載需要的方法到命名空間上,這在編寫(xiě)插件時(shí)非常有用。正如前文所說(shuō),的操作在我看來(lái)依然是最好用的,所以,你不需要,但你需要一個(gè)庫(kù)。 showImg(https://segmentfault.com/img/bVbuPEH?w=750&h=375); 寫(xiě)這篇文章的目的,一方面是介紹一下自己編寫(xiě)的模塊化 DO...

      HitenDev 評(píng)論0 收藏0
    • 2019 年了,為什么我還在用 jQuery

      摘要:無(wú)論是還是,對(duì)許多應(yīng)用來(lái)說(shuō),這個(gè)大小都是完全可以接受的。但是為了不用,放棄向后兼容那我覺(jué)得還是用得了。自從年雙十一正式上線,累計(jì)處理了億錯(cuò)誤事件,付費(fèi)客戶有金山軟件百姓網(wǎng)等眾多品牌企業(yè)。 譯者按: 看來(lái) jQuery 還是有一些用武之地的。 原文: Why Im Still Using jQuery in 2019 譯者: Fundebug 為了保證可讀性,本文采用意譯而非直譯...

      aikin 評(píng)論0 收藏0
    • 小談網(wǎng)站建設(shè)的兼容性

      摘要:本文的兼容性包含了更多的意思,一些和網(wǎng)站開(kāi)發(fā)注意的實(shí)際問(wèn)題。已經(jīng)快出生十年了,它就是為了解決瀏覽器的兼容性而生的,對(duì)于桌面端開(kāi)發(fā)我們還是建議采用這個(gè)版本。 本文的兼容性包含了更多的意思,一些和網(wǎng)站開(kāi)發(fā)注意的實(shí)際問(wèn)題。對(duì)注重seo的網(wǎng)站幫助更多一些。 關(guān)于瀏覽器 現(xiàn)在的前端開(kāi)發(fā)已經(jīng)開(kāi)始放棄兼容ie6,ie7,并且也在有條件的放棄ie8。像chrome這樣的現(xiàn)代瀏覽器對(duì)新特性支持度都很棒,...

      soasme 評(píng)論0 收藏0
    • jQuery 3.0 beta 發(fā)布

      摘要:回調(diào)函數(shù)將固定為異步執(zhí)行。這些將被移除這些應(yīng)該會(huì)保留需要注意的是,那些繼續(xù)存在的回調(diào)函數(shù)不會(huì)有任何變化,只有的方法會(huì)受影響。 創(chuàng)作不夠,譯文來(lái)湊。 跟上篇一樣是編譯,不準(zhǔn)備逐字翻。比如,我會(huì)把we譯成jQuery官方團(tuán)隊(duì),或者他們。 初譯版,待校正。這篇文章比較長(zhǎng),翻譯難度也不小,如果有問(wèn)題,歡迎提出,我盡量修改。 正文開(kāi)始。 歪果仁也要雙喜臨門(mén),于是 jQuery 官方團(tuán)隊(duì)選在 j...

      LeanCloud 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <