非jQuery相當於：在JavaScript中可見？

所以jQuery提供了這個令人敬畏的僞查詢在'：可見'的DOM，不幸的是，它與jQuery和Sizzle的核心（或任何你可能使用的引擎）相當緊密地聯繫在一起。當只有一個給定的元素是已知的時，在普通的JavaScript中是否有很好的等價物？非jQuery相當於：在JavaScript中可見？

了jQuery提醒一下：可見規則：

他們有沒有的CSS顯示值。
它們是type =「hidden」的表單元素。
及其寬度和高度被明確設置爲0。

的祖先元素是隱藏的，所以該元件沒有在網頁上顯示。

注意：只檢查給定元素的樣式並不總是有效：父項可能隱藏而不是隱藏所有子項。

來源

2012-03-09 fixanoid

爲什麼你打擾，如果你有jQuery的？ – dynamic 2012-03-09 16:56:31

'知名度：隱藏;'不是等式的一部分？不知道一個等價物，但這是一個簡短的函數。 - @ yes123有時你需要一個函數而不是所有的核心框架作爲開銷。 – Smamatti 2012-03-09 16:57:42

[這裏]（https://github.com/jquery/jquery/blob/master/src/css.js#L380）jQuery檢查元素是否通過選擇器。 – pimvdb 2012-03-09 17:00:20

您可以從該source code獲得相關代碼：

jQuery.expr.filters.hidden = function(elem) { 
    var width = elem.offsetWidth, 
     height = elem.offsetHeight; 

    return (width === 0 && height === 0) || 
      (!jQuery.support.reliableHiddenOffsets && 
      ((elem.style && elem.style.display) || jQuery.css(elem, "display")) === "none"); 
};

jQuery.css可以替換getComputedStyle（或.currentStyle用於IE）。
jQuery.support.reliableHiddenOffsets是一個決定屬性是否可靠的變量（IE8-）。

來源

2012-03-09 17:00:31

所以它不檢查父母是否顯示？ – dynamic 2012-03-09 17:03:59

@ yes123當元素不可見時，'ofsetWidth'和'offsetHeight'屬性爲零。當父項不可見時，元素也不可見。 – 2012-03-09 17:05:47

@ yes123 - 包含在偏移測試中：http://jsfiddle.net/MhLVV/ – 2012-03-09 17:08:23

我建議你至少使用一些選擇器庫，爲你做這項工作。否則，你只是在一些已經被測試並且沒有特別原因證明是成功的東西上浪費了你的努力，而且你在開始的幾次嘗試中肯定會犯錯。

例如Sizzle縮小/ gzip時只有4kb，所以我幾乎沒有理由不使用它。

來源

2012-03-09 16:58:53 bevacqua

我幾乎*確定Sizzle不支持'：visible'。 – 2012-03-09 17:02:14

啊好點，我沒有足夠的關注。謝謝！ – fixanoid 2012-03-09 17:08:36

我只是先看jquery，因爲它是JavaScript。下面是實際的代碼：

if (jQuery.expr && jQuery.expr.filters) { 

    // here is the real guts of it 
    jQuery.expr.filters.hidden = function(elem) { 

     // plain old JavaScript determining offset 
     var width = elem.offsetWidth, 
     height = elem.offsetHeight; 

     // if any of these are "true" then its "invisible" 
     return (width === 0 && height === 0) || 
     (!jQuery.support.reliableHiddenOffsets && 
     ((elem.style && elem.style.display) || 
     jQuery.css(elem, "display")) === "none"); 
    }; 

    // this is just checking for not hidden 
    jQuery.expr.filters.visible = function(elem) { 
     return !jQuery.expr.filters.hidden(elem); 
    }; 
}

的「reliableHiddenOffsets」代碼在此之前定義的方式，你可以看到它下面

isSupported = (tds[ 0 ].offsetHeight === 0); 

tds[ 0 ].style.display = ""; 
tds[ 1 ].style.display = "none"; 

// Check if empty table cells still have offsetWidth/Height 
// (IE <= 8 fail this test) 
support.reliableHiddenOffsets = isSupported && (tds[ 0 ].offsetHeight === 0);

真正的教訓是這個東西是不是火箭科學。破解jQuery並看看。 jQuery的真正魅力在於它經過了嚴格的測試和打擊，你可能不會發現任何問題。除了偉大的選擇器引擎和抽象之外，這是值得的。不要害怕真正看。你會在這個過程中學到一些好的副作用。

來源

2012-03-09 17:09:37

非jQuery相當於：在JavaScript中可見？

回答

相關問題