Question

我注意到，在使用jQuery（如$("#myElement")）获取元素实例时，几乎每个人都使用标准的CSS ID选择器。我的偏好是只引用元素本身，如$(myElement)。我注意到两者之间存在一个区别，那就是当元素存在于表单中时如何直接引用该元素将导致元素无法找到，而使用CSS ID选择器将每次都找到该元素。

为什么我要使用一个而不是另一个？

Answer 1

不同之处在于$('#myElement')正在使用传入其中的字符串选择器创建jQuery对象。在这种情况下，它将从DOM元素创建一个对象，作为id的{{1}}。

另一方面，myElement将根据$(myElement)变量中存储的任何值创建jQuery对象。它可以是一个字符串，例如myElement，或者它可以是本机JS DOMElement。它也可能是另一个jQuery对象，但这是毫无意义的逻辑，应该避免使用。

有关详细信息，请参阅jQuery() in the documentation

Answer 2

每个人都是针对特定情况的。当你这样做

$('#myElement')

jQuery首先尝试查找具有id="myElement"属性的元素。

在这种情况下：

$(myElement)

只有当myElement变量包含element object时，代码才有效。仅这一行不工作。

这是两个等效的操作：

// Find element manually
var el = document.getElementById('myElement');
var obj = $(el);

// Use jQuery power
var obj = $('#myElement');

你不能互相替换：每个人都有自己的使命。

Answer 3

如果元素存在于表单内部，将如何直接引用该元素导致元素无法找到

您可以检查您的元素（通过选择器）是否像

一样存在

if($(variable|"string").length > 0) { 
   console.log('element exist and do something'); 
}

Answer 4

请注意，$（myElement）将是强制转换为jQuery对象的window.myElement。我不建议你假设$（myElement）会解决。

所有这三个存在

＆＃13;

$(function() {
    window.console&&console.log(myElement); // DOM id="myDiv" or name="myElement" for elements that support name attribute
    window.console&&console.log($(myElement)); // DOM -> jQuery object
    window.console&&console.log($("#myElement")); // jQuery object
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myElement">My Element</div>

＆＃13;

$（“＃myElement”）和$（myElement）之间有什么重大差异？

4 个答案: