angular.js - Adding jquery to angular, the selector cannot be used

Question

$(document).ready(function(){
    $(".team").hover(function(){$(".shadow").css("display","block");console.log("1")},
    function(){$(".shadow").css("display","none");console.log("0")});
 
    });
在一个angular项目里面加上面这段jquery代码，会跑不起来，把".team"改成"p"后可以使用，team是html中已经有过声明的p，在非angular项目里面用同样的代码可以跑起来。  我想知道angular中引入jquery对jquery选择器产生了影响吗？ 如果有影响，为什么下面的".shadow"又能够被选择到呢？  纠结了一下午，希望大神能够解答一下。

下面是一些相关的代码:
依赖部分：
 <script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/jquery-loading/dist/jquery.loading.min.js"></script>
<!-- AngularJS dependences -->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
html部分:    
       <p  class="team" ng-repeat="group in groups">
              显示内容省略
        <p class="shadow">
           
        <p class="content">详情</p>
        <p class="edit">编辑</p>
    </p>

</p>
js部分（把这段代码放在这个页面的控制器里面的）:
$(document).ready(function($){
     $(".team").hover(function(){$(".shadow").css("display","block");console.log("1")},
    function(){$(".shadow").css("display","none");console.log("0")});

    }(jQuery));

Answer 1

Introduce jQuery before introducing AngularJS, and AngularJS will use jQuery instead of its own jqLite.
See AngularJS documentation for details

If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery, called "jQuery lite" or jqLite.

To use jQuery, simply ensure it is loaded before the angular.js file. You can also use the ngJq directive to specify that jqlite should be used over jQuery, or to use a specific version of jQuery if multiple versions exist on the page.

The code placed in the Angular controller does not need to be included in the callback function of $(document).ready().
When the controller code is executed, the ready event of the document has already occurred.

Answer 2

When using jQuery in Angular, because the "$" symbol is also used, you need to delegate $ to jQuery for use

$(document).ready(function($){
    $(".team").hover(function(){$(".shadow").css("display","block");console.log("1")},
    function(){$(".shadow").css("display","none");console.log("0")});
 
}(jQuery));