“去掉那個框框”外掛--第二版
第二版程式碼如下----還沒實現好點的功能,不過先做出來吧
window.onload=function(){
// 選擇器封裝
function $(name) {
let result = document.querySelectorAll(name).length > 1 ? [...document.querySelectorAll(name)] : document.querySelector(
name);
return result;
}
// 對lists陣列元素進行判斷,如果當前網頁存在對應的元素,則將其新增入boxs陣列中
function divAdd(list) {
for (let item of list) {
if (item) {
boxs.push(item);
}
}
}
// 隱藏功能程式碼(實際上就只是給div加上個display:none)
function hidden(item) {
// 對傳入的引數進行長度判斷是因為有可能這個引數是個陣列,如果是陣列的話就對其進行遍歷操作
if(item.length>1){
for(let i of item){
i.style.display="none";
}
}else{
item.style.display="none";
}
}
// boxs為儲存當前網頁中能隱藏的div的集合
let boxs = [];
let lists = [$("#HMRichBox"), $("#downdiv"),$(".layui-row")];
divAdd(lists);
boxs.map(item=>hidden(item));
}
程式碼解析:
首先是那個boxs的空陣列,之所以宣告這麼一個陣列是為了存放當前網頁中存在的需要去除的框框,假如沒有這麼一個陣列來存在,直接將最下面所有需要去除的內容陣列進行去除,會有一部分因為該網頁並不存在對應的資料導致報錯。
在封裝的選擇器返回選中的物件時,有一個問題,就是控制檯報錯了,一直顯示找不到style屬性啥的,像Cannot set property 'display' of undefined
因為document.querySelectorAll(name)所返回的是一個NodeList物件,這個物件挺麻煩的,不能使用array還有object這些的屬性方法,導致我的程式碼一直報錯。既然它跟陣列看起來挺像的,那我就直接把它轉化為陣列好了,直接對選擇器的返回值使用擴充套件運算子加[]轉換為陣列(老子真聰明)。
剩下的就沒啥了
全部思路:
首先,先把所有網站中看不順眼的div的id或者class名傳入封裝好的$()函式中,將得到的值寫入lists中,
再呼叫divAdd()函式,將lists作為引數傳入之後,對該引數進行遍歷判斷(因為lists是一個陣列,所以可以遍歷),判斷其子元素中是否在當前頁面存在,如果存在則將該元素新增入boxs陣列中。
最後一步就是對boxs陣列的所有子元素進行遍歷操作了,我使用的是map()方法,對boxs的每個子元素都呼叫一次hidden()方法,完事
相關文章
- LuaView SDK第二版設計外掛化理解(二)View
- [外掛擴充套件]留言版外掛套件
- 3個框框帶你理解EventLoopOOP
- WordPress外掛開發例項教程 - 版權外掛
- 去掉那討厭的windows域Windows
- 我做了一個 VSCode 外掛版的 ChatGPTVSCodeChatGPT
- wordpress外掛feedcount中文版
- zotero新增markdown外掛(Mac版)Mac
- 5款好用的開源JS圖片裁剪外掛(3個jQuery外掛,2個AngularJS外掛)JSjQueryAngular
- Chrome外掛英雄榜(第二期)Chrome
- Activity外掛化原理第二種方案:Hook IActivityManagerHook
- 240個jquery外掛(轉)jQuery
- 200個jquery外掛jQuery
- Lumenzia for mac(ps亮度蒙版外掛)Mac
- mac版Photoshop外掛安裝教程Mac
- AE Saber外掛 for Mac 1.0.39 漢化版Mac
- window版postgresql安裝orafce外掛SQL
- gitbook 入門教程之實用外掛(新增3個外掛)Git
- 7.2版本中安裝的外掛都是本外掛未被啟用???
- Jib使用小結(Maven外掛版)Maven
- 自己寫一個Babel外掛Babel
- 15 個最新的 jQuery外掛jQuery
- 自己動手編寫一個Mybatis外掛:Mybatis脫敏外掛MyBatis
- 聊天富文字外掛,一個基於react的富文字外掛React
- FCPX外掛:超級慢動作變速外掛Twixtor Pro 7 mac版Mac
- 第二屆熵密杯-廣外女生青春版熵
- 第二期:JQ外掛編寫入門(2)
- 還記得那個提速8倍的IDEA外掛嗎?VS Code版本也釋出啦!!Idea
- 從頭開發一個Flutter外掛(二)高德地圖定位外掛Flutter地圖
- 如何從零編寫一個vite外掛 建立 vite 外掛通用模板Vite
- [需求建議]加強版評論外掛
- Docker與Jib(maven外掛版)實戰DockerMaven
- 10個 解放雙手的 IDEA 外掛,這些程式碼都不用寫(第二彈)Idea
- 5 個好用的開發者 Vim 外掛
- 如何寫一個Vue的外掛Vue
- 如何開發一個 PyCharm 外掛PyCharm
- 7個Web開發者高階外掛Web
- 如何編寫一個Jquery外掛jQuery