国内真实愉拍对白系列,人人做人人搞人人爽,亚洲性爱在线视频

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

現(xiàn)代瀏覽器中內(nèi)置的幾個(gè)可以等效替代jQuery的功能

jQuery 的體積在不斷的增大。新功能要不斷增加，這是必然結(jié)果。雖然從版本1.8.3開始的瘦身效果明顯，但不可否認(rèn)的是，對(duì)于移動(dòng)手機(jī)端的網(wǎng)頁開發(fā)，它仍然是不可接受的。當(dāng)然，jQuery不是鐵板一塊，你可以對(duì)它進(jìn)行定制，只打包進(jìn)你想要的組件，但其中的一些用來兼容老式瀏覽器的代碼你無法去除。

就我的個(gè)人習(xí)慣來說，不管開發(fā)什么項(xiàng)目，即使是一個(gè)很簡單的demo，我做的***件事就是引入jQuery，這樣做主要是想使用它提供的DOM選擇器功能。對(duì)于一些像IE6/IE7這樣的老式瀏覽器，這種做法是顯而易見的，但是，如今現(xiàn)代瀏覽器里已經(jīng)內(nèi)置了完整的DOM選擇器功能，能讓你使用原生的瀏覽器提供的方法來實(shí)現(xiàn)jQuery的功能。

document.queryselector

這里說的現(xiàn)代瀏覽器是指火狐、谷歌、Opera、Safri等新生代瀏覽器，如果是IE，你需要至少是IE8或以上。你可以簡單的將document.querySelector()函數(shù)映射為$，它能返回在DOM中找到的***個(gè)匹配選擇條件的元素。任何的CSS選擇符都可以作為它的參數(shù)。

注意：IE 8只支持 CSS2.1標(biāo)準(zhǔn)的選擇器

你需要使用原生的“style”方法，而且這里不能使用jQuery里的鏈?zhǔn)秸{(diào)用。console.log()輸出的將會(huì)是backgroundColor方法返回的“salmon”。

原生DOM節(jié)點(diǎn)有時(shí)候會(huì)比封裝后的jQuery對(duì)象更好用。例如，如果你想修改一個(gè)圖片的src屬性，比較一下下面使用jQuery的做法和直接使用DOM節(jié)點(diǎn)的做法。

 
 
 
 
  
  
  
  // jQuery方式 
  
  
  
  $("#picture").attr("src", "http://placekitten.com/200/200"); 
  
  
  
  
  
  
  
  //使用將querySelector映射為$的原生js方式 
  
  
  
  $("#picture").src = "http://placekitten.com/200/200";

DOM對(duì)象能讓你直接訪問圖片的src屬性，相反，所有的jQuery對(duì)象都需要你通過attr函數(shù)來操作。

document.querySelector方法只返回一個(gè)元素。如果你的選擇目標(biāo)是一堆元素，它只會(huì)返回符合條件的***個(gè)節(jié)點(diǎn)。要想返回所有節(jié)點(diǎn)，你需要使用document.querySelectorAll方法。

document.queryselectorall

一個(gè)很巧妙的做法是將querySelector映射為$，而將querySelectorAll函數(shù)映射為$$。但它返回的是一個(gè)節(jié)點(diǎn)列表，不如 jQuery里返回的Array格式好用，我們可以使用Array.prototype.slice.call(nodeList)方法加工一下，讓它更方便。

注意，IE8是不支持將一個(gè)nodeList轉(zhuǎn)換為Array的。

classList

使用jQuery對(duì)CSS類操作十分方便，幸運(yùn)的是，現(xiàn)代瀏覽器里也內(nèi)置了一下方法能夠很方便的操作它們，主要用到了classList對(duì)象。下面是一些基本操作兩種方式的對(duì)比。

 
 
 
 
  
  
  
  window.$ = function(selector) { 
  
  
  
    return document.querySelector(selector); 
  
  
  
  }; 
  
  
  
  
  
  
  
  //----增加CSS類------ 
  
  
  
  
  
  
  
  /* jQuery */
  
  
  
  $(".main-content").addClass("someClass"); 
  
  
  
  
  
  
  
  /* 等效內(nèi)置方法 */
  
  
  
  $(".main-content").classList.add("someClass"); 
  
  
  
  
  
  
  
  //----刪除一個(gè)CSS類----- 
  
  
  
  
  
  
  
  /* jQuery */
  
  
  
  $(".main-content").removeClass("someClass"); 
  
  
  
  
  
  
  
  /* 等效內(nèi)置方法 */
  
  
  
  $(".main-content").classList.remove("someClass"); 
  
  
  
  
  
  
  
  //----判斷是否存在一個(gè)CSS類--- 
  
  
  
  
  
  
  
  /* jQuery */
  
  
  
  if($(".main-content").hasClass("someClass")) 
  
  
  
  
  
  
  
  /* 等效內(nèi)置方法 */
  
  
  
  if($(".main-content").classList.contains("someClass"))

相對(duì)于jQuery提供大量豐富的方法，上面說的這幾個(gè)現(xiàn)代瀏覽器里內(nèi)置的功能顯得很簡單，但如果項(xiàng)目中的要求不高，這些替代方法能大大的減少你的應(yīng)用依賴。

***要提醒的是，這些內(nèi)置方法在不同的瀏覽器和不同的版本中支持程度不一樣，下面是它們的支持程度參考表。

附圖1：各種瀏覽器對(duì)querySelector/querySelectorAll的兼容支持

附圖1：各種瀏覽器對(duì)classlist的兼容支持

參考資料：

5 Things You Should Stop Doing With jQuery
Native equivalents of jQuery functions
http://caniuse.com

網(wǎng)站題目：現(xiàn)代瀏覽器中內(nèi)置的幾個(gè)可以等效替代jQuery的功能
網(wǎng)頁URL：http://www.dlmjj.cn/article/dhphpee.html

日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

新聞中心

其他資訊