对jquery返回的对象使用标准的js对象属性？

Question

我刚刚进入jQuery所以请原谅这个maby愚蠢的问题，但我遇到以下情况：

$('#pb_inner').css('width',data + '%');

此代码工作正常。但我想知道为什么我不能做以下事情？

$('#pb_inner').style.width=data + '%';

Answer 1

因为$('#pb_inner')返回一个类似jQuery对象的数组。一个集合，而不是一个对象（即便如此，它将是另一个jQuery对象）：

来自docs：

  

（...），jQuery() - 也可以写成$() - 在DOM中搜索与提供的选择器匹配的任何元素，并创建一个引用这些元素的新jQuery对象。

---

您必须使用get：

$('#pb_inner').get(0).style.width=data + '%';

  

.get()方法授予我们访问每个jQuery对象底层的DOM节点的权限

Answer 2

因为$('#pb_inner')返回一个jQuery对象而不是原始DOMElement。如果从该jQuery对象检索实际的DOMElement，则可以使用这些属性，例如：

$('#pb_inner').get(0).style.width=data + '%';

Answer 3

selector $('#pb_inner')返回与给定参数字符串匹配的jQuery包装对象数组。

以下内容将起作用

$('#pb_inner').get(0).style.width=data + '%'

get(0)将从jQuery数组返回第一个对象，作为本机DOM元素。

Answer 4

顺便说一句，使用jQuery .css（）方法有一个优点，因为您可以通过传递一个对象来编写多个CSS规则，如下例所示：

$('#pb_inner').css({
  'width': data + '%',
  'height': data + '%',
  'color': '#eaeaea'
})