摘要:由于的精簡,以置于之前的的代碼不能運行了,其中選擇器就是其中一個。總結最終我選擇了最后一種,功能能夠滿足現有的需求。其實很強大,這選擇器只是其九牛一毛,后面可以再學習學習其思想。
現在移動端項目在重構階段,將之前的jQuery全部替換成Zepto了。由于Zepto的精簡,以置于之前的jQuery的代碼不能運行了,其中visible選擇器就是其中一個。既然已經選擇了Zepto,那就給Zepto增加visible功能。
分析第一反應就是思考通過元素的屬性來判斷,然后嘗試了使用display和visibility來進行判斷。但是經過小的測試,是我想的簡單了!
display是無法繼承父元素的,visibility是能夠繼承父元素,但是父元素采用的是display顯示與隱藏。
參考地址1
參考地址1
既然模塊的根元素是用display顯示與隱藏,那我先就通過類選擇器,選到元素。然后再透過遞歸判斷父元素display,直到body元素。
;(function($) { var _filter = $.fn.filter; function visible(elem) { var $elem = $(elem); if($elem.css("display") === "none") { return false; }else { if($elem.is("body")) { return true; }else { if(visible($elem.parent())) { return true; } } } } $.fn.filter = function(sel) { if (sel === ":visible") { return $([].filter.call(this, visible)); } return _filter.call(this, sel); }; })(window.Zepto);
自己的實現是可以的,不過自我感覺有點饒了,看看能不能透過其它方式來解決。
jQuery實現查看了jQuery3.0的內部實現,最終調用的是jQuery.expr.filters.visible
jQuery.expr.filters.visible = function( elem ) { return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length ); };
jQuery首先的判斷元素的offsetWidth和offsetHeight。因為根元素隱藏后,導致其子元素的寬高為0。不占用文檔流,這很好理解。
getClientRects:獲取元素占據頁面的所有矩形區域,用于獲取元素占據頁面的所有矩形區域
與之相關的是getBoundingClientRect。
getBoundingClientRect:用于獲得頁面中某個元素的左,上,右和下分別相對瀏覽器視窗的位置
而為什么要使用這個呢?在官網找到了答案。
Breaking change: Behavior of :hidden and :visible
An element is considered now visible if it has a layout box returned from the DOM getClientRects() method,even if that box has a height and/or width of zero. This means that elements such as
or an empty element that don"t have height are considered to be visible.
大體的意思是對于一個元素本身寬高都為0,但是占據了穩定流,這是能認為是visible的。比如像 換行br、空的span 標簽。
其它實現在github上也找到了,對Zepto增加visible的方法。
;(function($){ var _is = $.fn.is, _filter = $.fn.filter; function visible(elem){ elem = $(elem); return !!(elem.width() || elem.height()) && elem.css("display") !== "none"; } $.fn.is = function(sel){ if(sel === ":visible"){ return visible(this); } if(sel === ":hidden"){ return !visible(this); } return _is.call(this, sel); } $.fn.filter = function(sel){ if(sel === ":visible"){ return $([].filter.call(this, visible)); } if(sel === ":hidden"){ return $([].filter.call(this, function(elem){ return !visible(elem); })); } return _filter.call(this, sel); } })(Zepto);總結
最終我選擇了最后一種,功能能夠滿足現有的需求。
其實Sizzle很強大,這visible選擇器只是其九牛一毛,后面可以再學習學習其思想。
原文地址http://xiaoqiang730730.github.io/2016/07/16/visible%E9%80%89%E6%8B%A9%E5%99%A8/
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/87797.html
摘要:代表的上下文對象是一個的上下文對象,可以調用的方法和屬性值特殊選擇器點擊測試通過原生處理點擊測試通過原生處理直接通過的方法改變顏色通過包裝成對象改變顏色 DOM對象轉化成jQuery對象 如果傳遞給$(DOM)函數的參數是一個DOM對象,jQuery方法會把這個DOM對象給包裝成一個新的jQuery對象 元素一 元素二 元素三 var ...
摘要:如果偽類的參數不可以用轉換,則參數為字符串,用正則將字符串前后的或去掉,再賦值給最后執行回調,將解釋出來的參數傳入回調函數中,將執行結果返回。重寫的方法,改過的調用的是方法,在回調函數中處理大部分邏輯。 Selector 模塊是對 Zepto 選擇器的擴展,使得 Zepto 選擇器也可以支持部分 CSS3 選擇器和 eq 等 Zepto 定義的選擇器。 在閱讀本篇文章之前,最好先閱讀《...
摘要:一內聯元素與行元素的區別內聯元素即行內元素。絕對定位,相對于定位以外的第一個父元素進行定位,元素脫離文檔流。 一、內聯元素與行元素的區別 1、內聯元素即行內元素。2、內聯元素,在文檔流中擠在一行;不能設置寬高(即,即使設置了也不管用,例如a標簽)、margin和padding的top和bottom 塊元素,獨占一行;可以設置寬高、margin、padding3、可以使用displa...
摘要:一內聯元素與行元素的區別內聯元素即行內元素。絕對定位,相對于定位以外的第一個父元素進行定位,元素脫離文檔流。 一、內聯元素與行元素的區別 1、內聯元素即行內元素。2、內聯元素,在文檔流中擠在一行;不能設置寬高(即,即使設置了也不管用,例如a標簽)、margin和padding的top和bottom 塊元素,獨占一行;可以設置寬高、margin、padding3、可以使用displa...
摘要:部分問題與解答屬性是否區分大小寫不區分。對于行內元素,設置左右內邊距,左右內邊距將是可見的。而對于替換元素,則撐開了父元素。如下代碼中文本的顏色是。 Tip:這是http://davidshariff.com/quiz/給出的web前端開發測試題,的CSS部分,我根據自己的理解給出的答案,歡迎拍磚,一起刷題==>Github 倉庫地址。 Front End Web Developm...
閱讀 1786·2021-10-27 14:15
閱讀 3869·2021-10-08 10:12
閱讀 1184·2021-09-22 15:55
閱讀 3241·2021-09-22 15:17
閱讀 848·2021-09-02 15:40
閱讀 1759·2019-08-29 18:33
閱讀 1109·2019-08-29 15:22
閱讀 2364·2019-08-29 11:08