4-9 Angular-内置jQLite

内置jQLite

  • 注意1: jqLite它里面并没有jQuery里面的所有功能。只是集成了部分功能

  • 注意2:只要导入了jQuery库,那么通过angular.element获取的对象就是原生的jQuery

  • 注意3:在引入jQuey时,要放到angular之前, 否则使用的还是jQLite



<body ng-app="app">
<div class="box"></div>

<button class="btn">点击</button>
</body>

<!--注意2:在引入jQuey时,要放到angular之前, 否则使用的还是jQLite-->
<script src="jquery-3.1.1.js"></script>
<script src="angular1.6.js"></script>
<script>
    //1.创建模块
    var app = angular.module('app', []);

    var box = document.querySelector('.box');
    var btn = document.querySelector('.btn');
    //原生js对象 转成 jquery对象 $(box)
    //注意3:只要导入了jQuery库,那么通过angular.element获取的对象就是原生的jQuery
    box = angular.element(box);
    btn = angular.element(btn);

    box.css({
       'background':'red'
    });
    //jquery 注册事件
    btn.on('click', function () {
        //alert('jquery-click');
        //注意1: jqLite它里面并没有jQuery里面的所有功能。只是集成了部分功能
        box.animate({
            'width':'200px',
            'height':'200px'
        });

    })
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容