使用 jQuery 或 AngularJS 进行 DOM 操作和选择？答案

【问题标题】：DOM Manipulation and selection using jQuery or AngularJS?使用 jQuery 或 AngularJS 进行 DOM 操作和选择？
【发布时间】：2015-03-14 12:05:45
【问题描述】：

我不久前开始使用 AngularJS。我很喜欢它——它是一个非常有用且功能强大的框架，我已经构建了几个 Web 应用程序。非常少的代码，非常有效，易于理解，强大的功能......这一切都很棒！

与许多其他开发人员一样，我已经使用 jQuery 很多年了。现在我不会将 jQuery 与 AngularJS 进行比较，因为我知道它们应该做自己的事情 - AngularJS 是一个框架，而 jQuery 是一个库，所以就像将桌子与椅子进行比较。

但我只是想知道在 AngularJS 中操作或选择 DOM 的正确方法是什么？我给你举个例子。

假设我有以下 HTML：

<div class="container">
  <h1>Hello world</h1>
  <ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
  </ul>
</div>

假设我正在使用 TimelineLite 在文档加载时为每个元素设置动画。在 jQuery 中，我会有这样的东西：

var tl = new TimelineLite();
tl.staggerFrom($('.container').children(),1,{opacity:0},0.5);

现在要在 AngularJS 中做同样的事情，我想我会使用一个指令，并将它附加到 .container div。像这样：

app.directive('beautifulLoad',function(){
    return {
        restrict: 'A',
        link: function(scope,element,attrs){
            var tl = new TimelineLite();                
            var elms = element.children();
            tl.staggerFrom(elms,2,{opacity:0},0.25);
        }
    }
})

<div class="container" beautiful-load>

这是一个正确的方法吗？

如果我想为 .container div 中的每个元素创建单独的动画怎么办？在 jQuery 中，我会使用这样的选择器：

$('.container h1')

但是我不能在 angularJS 中做同样的事情吗？那么我可以不使用以下指令吗？

app.directive('beautifulLoad',function(){
    return {
        restrict: 'A',
        link: function(scope,element,attrs){
            var tl = new TimelineLite();                
            tl.staggerFrom($(element).find('h1'),2,{opacity:0},0.25);
        }
    }
})

基本上我想问的是——在一般的 AngularJS 指令和控制器中使用 jQuery 是不是一种不好的方法？

【问题讨论】：

标签： javascript jquery angularjs angularjs-directive dom-manipulation

【解决方案1】：

在您的示例中，您可以避免使用 jQuery：

app.directive('beautifulLoad',function(){
    return {
        restrict: 'A',
        link: function(scope,element,attrs){
            var tl = new TimelineLite();                
            tl.staggerFrom(element.find('h1'),2,{opacity:0},0.25);
        }
    }
})

如果你可以避免使用 jQuery，你应该这样做。使用 AngularJS，很少真正需要它，而且通常还有其他更好的方法可以用 jQLite 或普通的旧 javascript 来做同样的事情。您还应该将 DOM 操作限制为指令的链接函数。

【讨论】：

谢谢。这就是我想知道的:)