AngularJs中的Jquery

最新推荐文章于 2019-04-24 09:03:01 发布

约德尔蒙

最新推荐文章于 2019-04-24 09:03:01 发布

阅读量353

点赞数

分类专栏： AngularJs

本文链接：https://blog.csdn.net/gyq04551/article/details/55223134

版权

AngularJs 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<!-- 在没有引入jQuery的前提下AngularJS实现了简版的jQuery Lite，
	通过angular.element不能选择元素，但可以将一个DOM元素转成jQuery对象，
	如果引提前引入了jQuery则angular.element则完全等于jQuery。 -->
<body>
	<div ng-controller="DemoController">
		<div class="box">普通一个盒子</div>
		<button>点击</button>
	</div>
	<script src="./libs/jquery.min.js"></script>
	<script src="./libs/angular.min.js"></script>
	<script>

		// angular.element() 方法可以将一个原生DOM对象转成jquery对象

		// 原生DOM对象
		var box = document.querySelector('.box');
		var btn = document.querySelector('button');
		// 转成jQuery对象
		box = angular.element(box);
		btn = angular.element(btn);

		btn.on('click', function () {
			// 
			// box.css('color', 'red');

			box.animate({
				fontSize: '40px'
			}, 400);
		});

		// 但是angularJS 只是实现了jquery对象部分方法
	</script>
</body>
</html>