現代瀏覽器內建的可等效替代jQuery的功能

2022-03-31 18:18:05 字數 2132 閱讀 2893

jquery的體積在不斷的增大。新功能要不斷增加,這是必然結果。雖然從版本1.8.3開始的**效果明顯,但不可否認的是,對於移動手機端的網 頁開發,它仍然是不可接受的。當然,jquery不是鐵板一塊,你可以對它進行定製,只打包進你想要的元件,但其中的一些用來相容老式瀏覽器的**你無法 去除。

就我的個人習慣來說,不管開發什麼專案,即使是乙個很簡單的demo,我做的第一件事就是引入jquery,這樣做主要是想使用它提 供的dom選擇器功能。對於一些像ie6/ie7這樣的老式瀏覽器,這種做法是顯而易見的,但是,如今現代瀏覽器裡已經內建了完整的dom選擇器功能,能 讓你使用原生的瀏覽器提供的方法來實現jquery的功能。

document.queryselector

這裡說的現代瀏覽器是指火狐、谷歌、opera、safri等新生代瀏覽器,如果是ie,你需要至少是ie8或以上。你可以簡單的將document.queryselector()函式對映為$,它能返回在dom中找到的第乙個匹配選擇條件的元素。任何的css選擇符都可以作為它的引數。

注意:ie 8只支援 css2.1標準的選擇器

你需要使用原生的「style」方法,而且這裡不能使用jquery裡的鏈式呼叫。console.log()輸出的將會是backgroundcolor方法返回的「salmon」。

原生dom節點有時候會比封裝後的jquery物件更好用。例如,如果你想修改乙個的src屬性,比較一下下面使用jquery的做法和直接使用dom節點的做法。

(19.59 kb)

2013-5-27 17:08

dom物件能讓你直接訪問的src屬性,相反,所有的jquery物件都需要你通過attr函式來操作。

document.queryselector方法只返回乙個元素。如果你的選擇目標是一堆元素,它只會返回符合條件的第乙個節點。要想返回所有節點,你需要使用document.queryselectorall方法。

document.queryselectorall

一 個很巧妙的做法是將queryselector對映為$,而將queryselectorall函式對映為$$。但它返回的是乙個節點列表,不如 jquery裡返回的array格式好用,我們可以使用array.prototype.slice.call(nodelist)方法加工一下,讓它更方便。

注意,ie8是不支援將乙個nodelist轉換為array的。

classlist

使用jquery對css類操作十分方便,幸運的是,現代瀏覽器裡也內建了一下方法能夠很方便的操作它們,主要用到了classlist物件。下面是一些基本操作兩種方式的對比。

相對於jquery提供大量豐富的方法,上面說的這幾個現代瀏覽器裡內建的功能顯得很簡單,但如果專案中的要求不高,這些替代方法能大大的減少你的應用依賴。

附圖1:各種瀏覽器對queryselector/queryselectorall的相容支援

附圖1:各種瀏覽器對classlist的相容支援

jq獲取瀏覽器的高度

console.log 2 window height 瀏覽器當前視窗可視區域高度 console.log 3 document height 瀏覽器當前視窗文件的高度 console.log 4 document.body height 瀏覽器當前視窗文件body的高度 console.log 5...

jq開啟瀏覽器新視窗 jquery開啟新的視窗

使用本 可以實現開啟乙個新的視窗,視窗的位置可變 html public w3c dtd xhtml 1.0 transitional en jquery彈出視窗 window width 250px background color d0def0 position absolute padding...

微信內建瀏覽器禁止快取的問題

解決方案1 除錯階段或者頻繁更新的頁面加入以下頭資訊 解決方案3 防止頁面被快取的方法,在url後面新增隨機引數,這樣每次訪問的都是不同的連線 window.location html?r math.random 終極方案 頁面動態引入js檔案 防止js檔案快取。var now new date v...