Question

我试图找出以下代码的香草等价物：

$(document).attr('key', 'value');

到目前为止，我已查看

document - 它不是元素，因此您无法在其上调用setAttribute
document.documentElement - 返回html标记。这不是同一个＆＃34;元素＆＃34; jquery的目标是
$(document)[0]似乎在Chrome Inspector中返回了一个阴影元素
$(document).attr('key', 'somethingUnique')在Chrome Inspector中不存在

jQuery是否创建了它自己的阴影元素模拟文档，所以它可以像真正的元素一样对待它？当你执行$(document)时，jQuery实际引用了哪些元素？

Answer 1

jQuery结果集是一个类似于对象的数组，通常包含DOMElement，但jQuery并不真正关心结果集中对象的类型。 jQuery结果集中存储的DOMElements或任何其他元素都不会以某种方式被模拟/包装，它们直接存储在结果集中。 jQuery试图通过查看它们的可用函数来弄清楚它必须对这些对象做些什么。

当你调用.attr时，jQuery会检查集合中的每个对象是否具有函数getAttribute，如果是这种情况，则假定它还具有函数setAttribute。 / p>

如果它没有函数getAttribute，那么它会将函数调用转发给.prop()函数，而prop将在内部执行：

elem[name] = value

因此，如果将普通对象传递给jQuery，那么它只会设置其属性。

＆＃13;

var a = {  
}

$(a).attr('test', 'hello world');

console.dir(a) // for `a`  the property `test` is set

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

如果向该对象添加getAttribute和setAttribute函数，则jQuery将调用这些函数：

＆＃13;

var a = {
  getAttribute() {

  },
  setAttribute() {
    console.log('setAttribute was called')
  }
}

$(a).attr('test', 'hello world');

console.dir(a);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

但是，您应该始终假设，jQuery执行这些测试的方式和顺序可能会发生变化。而且，如果在文档中明确提到它，则只依赖它。

Answer 2

我认为你$(document)没有引用document是不正确的，因此答案是（非常简单）：

document['key']  = 'value'

E.g。在Chrome中：

> $(document)[0] === document
true

> $(document).attr('blarg', 'narf')
n.fn.init [document, context: document]

> document.blarg
"narf"

> document.foo = 'bar'
"bar"

> document.foo
"bar"

Answer 3

jQuery只是将值直接分配给document。

$(document).attr('test', 'hello world');
console.log(document['test']); // prints "hello world"

Answer 4

我真的认为jQuery会包装DOM元素，因为出于某种原因，我从不写var x = $('#x')以便稍后重用它，但是回想起$。

这就是为什么我写的：

是的，它被包裹

但在阅读@ t.niese answer之后，我尝试了

var x = $('#x')
var y = $('#y')

var ref = x[0]
x[0] = y[0] // hack jQuery Object reference to DOM element

setTimeout(() => x.html('1'), 1000) // actually writes in #y
setTimeout(() => x.html('2'), 2000) // actually writes in #y
setTimeout(() => { x.push(ref) }, 2500) // hack jQuery Object reference to DOM element
setTimeout(() => x.html('3'), 3000) // actually writes in both #x and #y

并且理解我不写var x = $('#x')不是因为它是一个包装对象，而是因为它不是一个包装对象。

我认为API的入口点是$，但我可能会看到var api = $()之类的API，以及(el) => api.push(el)或(sel) => api.push(document.querySelector(sel))

我可以$().push但我不能$().forEach也不能转变也不能取消，但是删除索引也是

在示例中

setTimeout(() => { x.map((item) => {console.log(item)}) }, 3500)

记录0和1，而不是元素。使用jQuery版本3.3.1进行测试

什么是jQuery＆＃39; $（文档）的vanilla等价物？

到目前为止，我已查看

4 个答案: