问题现象
在 AngularJS 指令中，我们通常使用 link 方法来操作 DOM 元素。如果你使用了 jQuery 的 find() 方法去寻找子元素，你可能会发现它并没有返回任何结果。
例如，在下面这个指令中：
-- -------------------- ---- -------
---------------------------- ---------- -
------ -
--------- ----
----- --------------- -------- ------ -
--- ------------ - -----------------------
--------------------------
-
--
---如果你有一个 HTML 结构如下的标签：
<my-directive> <div class="child">Hello World!</div> </my-directive>
你会发现 childElement 是一个空数组，而不是包含 .child 元素的 jQuery 对象。
原因分析
在 AngularJS 中，指令的 link 方法返回的 element 对象并不是普通的 jQuery 对象，而是一个由 jQLite 封装过的类似 jQuery 的轻量级对象。
这个轻量级对象只支持一部分 jQuery 方法，其中就不包括 find() 方法。因此，当你尝试使用 element.find() 方法时，它实际上调用的是 jQLite 的 find() 方法，而不是 jQuery 的 find() 方法。由于两者的实现方式不同，因此你得到的结果也不同。
解决方案
如果你想在 AngularJS 指令中使用 jQuery 的 find() 方法，有两种解决方案。
解决方案一：手动引入完整版的 jQuery
jQLite 是一个轻量级的 jQuery 实现，它只支持 jQuery 的一个子集。如果你需要使用完整的 jQuery 功能，你可以手动引入完整版的 jQuery 库，然后在指令中使用 $() 来将 jQLite 对象转换为 jQuery 对象：
-- -------------------- ---- -------
---------------------------- ---------- -
------ -
--------- ----
----- --------------- -------- ------ -
--- ------------ - --------------------------
--------------------------
-
--
---这种方法虽然可以解决问题，但是会增加页面加载时间和内存使用量。因此，如果你并不需要完整版的 jQuery，最好选择下面的解决方案。
解决方案二：使用 element[0].querySelectorAll()
jQLite 对象本质上是一个数组，可以通过数组的方式来使用 jQLite 对象的 DOM 元素。因此，我们可以使用原生的 JavaScript DOM API 来替代 jQuery 的 find() 方法。
例如，你可以使用 querySelectorAll() 方法来替代 jQuery 的 find() 方法：
-- -------------------- ---- -------
---------------------------- ---------- -
------ -
--------- ----
----- --------------- -------- ------ -
--- ------------ - --------------------------------------
--------------------------
-
--
---这种方法不仅可以避免引入完整版的 jQuery，而且比 jQLite 的 find() 方法更快。
总结
在 AngularJS 指令中，jQuery 的 find() 方法不能正常使用是因为 jQLite 对象不支持该方法。如果你需要使用 jQuery 的 find() 方法，有两种解决方案：手动引入完整版的 jQuery 或者使用原生的 JavaScript DOM API。选择哪种方法取决于你的具体需求和优化目标。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25443