0

有人可以准确解释这个特征检测是如何工作的吗？

// Create a dummy element for feature detection
if (!('placeholder' in $('<input>')[0])) {

这行代码检测浏览器是否支持输入元素的占位符属性。

在部署到生产环境之前，我想对这里的幕后情况更加熟悉。

这最终会循环遍历输入元素的所有可能属性，只是为了检查placeholder元素的存在吗？如果是这种情况，我不知道我们可以（以某种方式）访问标记中未明确说明的元素。

代码源

4

2 回答 2

1

浏览器是否支持元素的属性基本上归结为浏览器的javascript环境是否具有该元素的该属性的定义。

如果定义存在，则属性的“获取”访问应返回该属性的非空值，而如果定义不存在，则返回空/“假”（即 javascript 解释为假的东西）值。

有问题的代码利用了 javascript 对值的 'truish'/'falseish' 解释，将属性上的“get”访问的返回值用作特征检测的谓词。

于 2012-12-09T01:50:38.413 回答
1

您可以访问使用 javascript 创建的任何元素，无论该元素是否附加到页面本身。所以如果你创建一个元素，你可以改变它，像这样：

var element = document.createElement('input');
    element.style.border = '1px solid red';
    element.value = 'some value';

现在要在 jQuery 中创建一个元素，您可以：

$('<input />')

当然[0]最后得到的是原生 DOM 元素，所以这两个是完全一样的：

var DOM_element1 = $('<input />')[0];
var DOM_element2 = document.createElement('input');

创建元素后，该元素的所有属性也都可用，例如element.value等。

如果浏览器支持占位符，placeholder 属性将出现在输入元素上，并且由于我们创建的元素实际上是一个节点或元素对象，我们使用in关键字来检查该属性是否可用：

var element = document.createElement('input');

if ('placeholder' in element) {
    //the element has a placeholder attribute, 
    //so it must be supported by the browser
}

做同样事情的另一种方法是直接检查属性以查看它是否未定义，如下所示：

if (typeof element.placeholder!=undefined) {  //should return string if present

}
于 2012-12-09T01:54:03.493 回答