摘要:隨著的逐漸淘汰,的興起,以及側重點放在了移動端,可能變的不在那么重要,原生一樣很好用。下面介紹幾個原生替換的方法。
隨著IE6、7、8的逐漸淘汰,HTML5的興起,以及側重點放在了移動端,jQuery可能變的不在那么重要,原生一樣很好用。下面介紹幾個原生替換jq的方法。
獲取元素//jQuery $(".xxx"); //class獲取 $("#xxx"); //id獲取 $(".xxx.ccc"); //同時包含xxx和ccc $(".xxx,.zzz"); //多選 $(".xxx div"); //子類 $(".xxx p:first"); //第一個P元素 //原生js //querySelector基本上實現了jq選擇器同樣的功能,具體可以自己測試,另外querySelector返回的是第一個元素,querySelectorAll則返回所有選擇的元素。 document.querySelector(".xxx"); //class獲取 document.querySelector("#xxx");//id獲取 document.querySelector(".xxx.ccc");//同時包含xxx和ccc document.querySelector(".xxx,.ccc");//多選 document.querySelector(".xxx div");//子類 document.querySelector(".xxx p:first-child");//第一個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");是否包含某個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", "
具體insertAdjacentHTML的介紹,請移步到 這篇文章(點擊這里)
獲取子節點/父節點//JQuery $(".xxx").children(); $(".xxx").parent(); //原生js ele.children; ele.parentNode上一個節點
//JQuery $(".xxx").prev(); //原生js var prev = ele.previousElementSibling || ele.previousSibling下一個節點
//JQuery $(".xxx").next(); //原生js var next = ele.nextElementSibling || ele.nextSibling上下節點
//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); });創建節點
//JQuery var ele = $(""); //原生js var ele = document.createElement("div");刪除節點
//JQuery $(ele).remove(); //原生js parent.removeChild(ele);獲取、設置、刪除屬性
//JQuery $(ele).attr(name,value) //設置 $(ele).attr(name) //獲取 $(ele).removeAttr(name) //刪除 //原生js ele.setAttribute(name,value);//設置 ele.getAttribute(name);//獲取 ele.removeAttribute(name);//刪除Data屬性
//JQuery $("body").data("foo", 52); //設置 $("body").data("foo"); //獲取 $("body").removeData("foo"); //刪除 //原生js ele.dataset.foo = 52 //設置 ele.dataset.foo //獲取獲取內容/清空內容
//JQuery var html = $(ele).html(); $(el).empty(); //原生js var html = ele.innerHTML; el.innerHTML = "";獲取文本
//JQuery $(ele).text(); //原生js var txt = ele.textContent || ele.innerText設置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";元素的內高度[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;
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/100641.html
摘要:對于復雜的業務需求仍然需要一些操作。使用方式很簡單,但是你需要創建一個獨立文件,重新掛載需要的方法到命名空間上,這在編寫插件時非常有用。正如前文所說,的操作在我看來依然是最好用的,所以,你不需要,但你需要一個庫。 showImg(https://segmentfault.com/img/bVbuPEH?w=750&h=375); 寫這篇文章的目的,一方面是介紹一下自己編寫的模塊化 DO...
摘要:無論是還是,對許多應用來說,這個大小都是完全可以接受的。但是為了不用,放棄向后兼容那我覺得還是用得了。自從年雙十一正式上線,累計處理了億錯誤事件,付費客戶有金山軟件百姓網等眾多品牌企業。 譯者按: 看來 jQuery 還是有一些用武之地的。 原文: Why Im Still Using jQuery in 2019 譯者: Fundebug 為了保證可讀性,本文采用意譯而非直譯...
摘要:本文的兼容性包含了更多的意思,一些和網站開發注意的實際問題。已經快出生十年了,它就是為了解決瀏覽器的兼容性而生的,對于桌面端開發我們還是建議采用這個版本。 本文的兼容性包含了更多的意思,一些和網站開發注意的實際問題。對注重seo的網站幫助更多一些。 關于瀏覽器 現在的前端開發已經開始放棄兼容ie6,ie7,并且也在有條件的放棄ie8。像chrome這樣的現代瀏覽器對新特性支持度都很棒,...
摘要:回調函數將固定為異步執行。這些將被移除這些應該會保留需要注意的是,那些繼續存在的回調函數不會有任何變化,只有的方法會受影響。 創作不夠,譯文來湊。 跟上篇一樣是編譯,不準備逐字翻。比如,我會把we譯成jQuery官方團隊,或者他們。 初譯版,待校正。這篇文章比較長,翻譯難度也不小,如果有問題,歡迎提出,我盡量修改。 正文開始。 歪果仁也要雙喜臨門,于是 jQuery 官方團隊選在 j...
閱讀 2074·2021-10-12 10:12
閱讀 793·2021-09-24 09:47
閱讀 1194·2021-08-19 11:12
閱讀 3472·2019-08-29 13:06
閱讀 689·2019-08-26 11:43
閱讀 2572·2019-08-23 17:20
閱讀 1154·2019-08-23 16:52
閱讀 2602·2019-08-23 14:27