Angular之jqLite的使用说明

最新推荐文章于 2019-01-17 11:10:09 发布

phoebe_huang

最新推荐文章于 2019-01-17 11:10:09 发布

阅读量750

点赞数 1

分类专栏： Angular

本文链接：https://blog.csdn.net/PigBiBiX/article/details/76861789

版权

Angular 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

公司最近做的项目的前端都采用Angular框架，作为一个刚入门Angular的新手，要彻底离开jQuery去做前端界面似乎有点难，特别是对DOM的操作。网上很多教程说jQuery和Angular可以混着一起用，经过我的实践，确实是可以用。

但是本人觉得，有几点不太好的地方。

1、显得代码有点混乱。
2、由于Angular具有ng-click的指令，它会屏蔽了jQuery的一些操作函数。
3、用Angular的ng-repeat生成的DOM元素，jQuery无法获取得到。（这非常不方便）
个人觉得要是对DOM进行操作，最好写一个自定义的directive。例如，做一个二级树状菜单。

html代码:

 <ul class="firstMenu">
	   <!----把自定义指令绑定到指定元素上----->
	   <li two-menu>一级
	   　 <!-------子菜单消除点击冒泡事件，防止点击子菜单时子菜单隐藏了自身--------->　
	      <ul class="secondMenu" ng-click="$event.stopPropagation()">
		    <li>二级</li> 
			<li>二级</li> 
		  </ul>
	   </li>
	   <li two-menu>一级
	      <ul class="secondMenu" ng-click="$event.stopPropagation()">
		    <li>二级</li> 
			<li>二级</li> 
			<li>二级</li> 
			<li>二级</li>
		  </ul>
	   </li>
	</ul>

css代码：

.secondMenu{
	  display:none;
	}

大概的界面就是这样：

js代码，定义一个directive.

angular.module('test',[]).controller('testController',function($scope){
       
   }).directive('twoMenu',function(){
       return {
	      link:function(scope,element,attrs){
		  
		      //绑定点击事件
			  element.on("click",function(event){  
				
				//消除冒泡
				event.stopPropagation();
				
				if(element.find("ul").eq(0).css("display")=="block"){//如果子级菜单显示，则隐藏
				    element.find("ul").eq(0).css("display","none");
				}
				else{
				    element.find("ul").eq(0).css("display","block");//如果子级菜单隐藏，则显示
				}
				
			  });
		  }
	   }
   });

执行的效果如下所示：

三级的树形菜单也很简单，只需要增加几行代码即可。

<li two-menu>一级
	   　 <!-------子菜单消除点击冒泡事件，防止点击子菜单时子菜单隐藏了自身--------->　
	      <ul class="secondMenu" ng-click="$event.stopPropagation()">
		    <li two-menu>二级
			   <ul class="thirdMenu" ng-click="$event.stopPropagation()">
					<li>三级</li> 
					<li>三级</li> 
					<li>三级</li> 
					<li>三级</li> 
		       </ul>
			</li> 
			<li>二级</li> 
		  </ul>
	   </li>

效果如下所示：

完整的代码如下所示:

<!DOCTYPE>
<html ng-app="test">
<head>
<script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>
<script>
   angular.module('test',[]).controller('testController',function($scope){
       $scope.test = "123";
   }).directive('twoMenu',function(){
       return {
	      link:function(scope,element,attrs){
		  
		      //绑定点击事件
			  element.on("click",function(event){  
				
				//消除冒泡
				event.stopPropagation();
				
				if(element.find("ul").eq(0).css("display")=="block"){//如果子级菜单显示，则隐藏
				    element.find("ul").eq(0).css("display","none");
				}
				else{
				    element.find("ul").eq(0).css("display","block");//如果子级菜单隐藏，则显示
				}
				
			  });
		  }
	   }
   });
</script>
<style>
.secondMenu,.thirdMenu{
	  display:none;
	}
</style>
</head>
<body ng-controller="testController">
    <ul class="firstMenu">
	   <!----把自定义指令绑定到指定元素上----->
	   <li two-menu>一级
	   　 <!-------子菜单消除点击冒泡事件，防止点击子菜单时子菜单隐藏了自身--------->　
	      <ul class="secondMenu" ng-click="$event.stopPropagation()">
		    <li two-menu>二级
			   <ul class="thirdMenu" ng-click="$event.stopPropagation()">
					<li>三级</li> 
					<li>三级</li> 
					<li>三级</li> 
					<li>三级</li> 
		       </ul>
			</li> 
			<li>二级</li> 
		  </ul>
	   </li>
	   <li two-menu>一级
	      <ul class="secondMenu" ng-click="$event.stopPropagation()">
		    <li>二级</li> 
			<li>二级</li> 
			<li>二级</li> 
			<li>二级</li>
		  </ul>
	   </li>
	</ul>
</body>
</html>

Angular内嵌的jqLite，对于基本的操作是足够用的。如果只是部分地方使用jQuery,就没必要引入整个jQuery文件。以下是jqLite一些比较重要的方法。

下面部分是引用自：http://www.cnblogs.com/fenxiangboke/p/4973872.html

addClass() 给元素添加指定的类。

after() 在元素的后面插入内容。

append() 将内容插入到元素的尾部。

attr() 获取或者设置元素的属性①值。

bind()/on() 给选中元素的一个或者多个事件附加一个事件处理程序。

children() 获取元素的子元素。

clone() 创建一个元素的深复制。

contents() 获取每个元素的子节点，返回的集合中包含文本和注释节点。

css() 获取或设置元素的style属性值。

data() 存储或返回与元素关联的指定数据值。

eq() 获取指定索引位置的元素。

find() 过滤元素的子节点，只能通过标签名过滤。

hasClass() 确定元素本身是否分配了给定的类。

html() 获取或者设置元素的HTML内容。

next() 获取紧跟元素的兄弟元素。

off()/unbind() 通过名称移除一个事件处理程序。

parent() 获取元素的父元素。

prepend() 将内容插入到元素的开头。

prop() 获取或设置元素的属性①值。

ready() 指定一个DOM加载完成时执行的函数。

remove() 从DOM中移除元素。

removeAttr() 从元素中移除一个属性（attribute）。

removeClass() 从元素中移除一个、多个或者所有类。

removeData() 从元素中移除先前存储的数据。

repalceWith() 使用提供的新内容替换元素。

text() 获取或者设置元素中合并的文本内容。

toggleClass() 从元素中添加或者移除一个或者多个类。

triggerHandler() 执行附加给元素的某个事件的所有事件处理程序。

val() 获取或设置元素的当前值。

wrap() 使用指定的HTML结构包裹元素。

phoebe_huang

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Angular之jqLite的使用说明

公司最近做的项目的前端都采用Angular框架，作为一个刚入门Angular的新手，要彻底离开jQuery去做前端界面似乎有点难，特别是对DOM的操作。网上很多教程说jQuery和Angular可以混着一起用，经过我的实践，确实是可以用。但是本人觉得，有几点不太好的地方。 1、显得代码有点混乱。 2、由于Angular具有ng-click的指令，
复制链接

扫一扫