AngularJS jqLite详情

最新推荐文章于 2024-04-18 10:11:21 发布

CodeMath

最新推荐文章于 2024-04-18 10:11:21 发布

阅读量6.2k

点赞数 1

文章标签： angularjs jqLite

本文链接：https://blog.csdn.net/hlp1988/article/details/51476986

版权

之前用过一下jqLite，刚了解的时候常于JQuery分不清，其实它们是不一样的。jqLite中，通过angular.element(param)获得angular的元素。其功能与Jquery中的$()类似，但是存在一定的区别，$()里面是通过各种选择器选择到元素；但是angular.element方法的参数只有两种，一种是Dom元素，一种是类似html元素的字符串。

   例如 angular.element(‘<ul>’); 下面这种是行不通的：
<input name=“email” id=“myId”></input>
var email = angular.element(‘myId’);

如果要通过id获取到元素，需通过这种方式
var email=angular.element(document.getElementById(‘myId’));

jqLite简介

angular并不依赖jQuery。事实上，Angular源码里包含了一个内嵌的轻量级的jquery:jqLite. 当Angular检测到你的页面里有jQuery出现，他就会用这个jQuery而不再用jqLite。比如，在directive中可以通过jqLite的方法访问你要应用到的元素。

angular.module('jqdependency', [])
  .directive('failswithoutjquery', function() {
    return {
      restrict : 'A',
      link : function(scope, element, attrs) {
               element.hide(4000)
             }
    }
});

jqLite不是jQuery，它只是jQuery的一个轻量级实现，包含了大多数常用功能。一般在项目中，不需要依赖jQuery，一般功能通过jqLite实现就足够了。

jqLite使用

1、简单加粗字体

<html ng-app="exampleApp">
<head>
	<meta charset="utf-8">
    <title>jqLite 测试</title>
    <script src="angular.js"></script>
    <link href="bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-theme.css" rel="stylesheet" />
    <script>
        angular.module("exampleApp", [])
            .directive("demoDirective", function () {
                return function (scope, element, attrs) {
                    var items = element.children();
                    for (var i = 0; i < items.length; i++) {
                        if (items.eq(i).text() == "Kobe Bryant") {
                            items.eq(i).css("font-weight", "bold");
                        } 
                    }
                }
            })
            .controller("defaultCtrl", function ($scope) {
                // controller defines no data or behaviors
            })              
    </script>
</head>
<body ng-controller="defaultCtrl">
    <h3 class="panel panel-info">NBA stars</h3>
    <ol demo-directive class="list-group">
        <li class="list-group-item">Kobe Bryant</li>
        <li class="list-group-item">Tim Duncan</li>
        <li class="list-group-item">Tracy McGrady</li>
    </ol>
</body>
</html>

效果：

2、DOM操作

<!DOCTYPE HTML>
<html ng-app="elementExample">
	<head>	
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	
		<script src="angular.js"></script>
		<script>
		function button1()
		{		
				alert(angular.element('<div id="test">测试html元素内容作为参数</div>').html());	
		}	
		//使用DOM元素作为参数	
		function button2()
		{		
			var a = document.getElementById('myId');		
			alert(angular.element(a).html());	
		}	
		</script>
	</head>
	<body>
		<br/>
		使用html字符串为参数<input type="button" οnclick="button1()" value="button1"></input><br/>
		<div name="email" id="myId">使用DOM元素作为参数</div><input type="button" οnclick="button2()" value="button2"></input>
	</body>	
</html>

效果：

jqLite API参考

addClass()	//为每个匹配的元素添加指定的样式类名
after()	在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点
append()	//在每个匹配元素里面的末尾处插入参数内容
attr()	//获取匹配的元素集合中的第一个元素的属性的值
bind()	//为一个元素绑定一个事件处理程序
children()	//获得匹配元素集合中每个元素的子元素，选择器选择性筛选
clone()	//创建一个匹配的元素集合的深度拷贝副本
contents()	//获得匹配元素集合中每个元素的子元素，包括文字和注释节点
css()	//获取匹配元素集合中的第一个元素的样式属性的值
data()	//在匹配元素上存储任意相关数据
detach()	//从DOM中去掉所有匹配的元素
empty()	//从DOM中移除集合中匹配元素的所有子节点
eq()	//减少匹配元素的集合为指定的索引的哪一个元素
find()	//通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代
hasClass()	//确定任何一个匹配元素是否有被分配给定的（样式）类
html()	//获取集合中第一个匹配元素的HTML内容
next()	//取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素
on()	//在选定的元素上绑定一个或多个事件处理函数
off()	//移除一个事件处理函数
one()	//为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次
parent()	//取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器
prepend()	//将参数内容插入到每个匹配元素的前面（元素内部）
prop()	//获取匹配的元素集中第一个元素的属性（property）值
ready()	//当DOM准备就绪时，指定一个函数来执行
remove()	//将匹配元素集合从DOM中删除。（同时移除元素上的事件及 jQuery 数据。）
removeAttr()	//为匹配的元素集合中的每个元素中移除一个属性（attribute）
removeClass()	//移除集合中每个匹配元素上一个，多个或全部样式
removeData()	//在元素上移除绑定的数据
replaceWith()	//用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
text()	//得到匹配元素集合中每个元素的合并文本，包括他们的后代
toggleClass()	//在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类
triggerHandler()	//为一个事件执行附加到元素的所有处理程序
unbind()	//从元素上删除一个以前附加事件处理程序
val()	//获取匹配的元素集合中第一个元素的当前值
wrap()	//在每个匹配的元素外层包上一个html元素

CodeMath

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
AngularJS jqLite详情

之前用过一下jqLite，刚了解的时候常于JQuery分不清，其实它们是不一样的。jqLite中，通过angular.element(param)获得angular的元素。其功能与Jquery中的$()类似，但是存在一定的区别，$()里面是通过各种选择器选择到元素；但是angular.element方法的参数只有两种，一种是Dom元素，一种是类似html元素的字符串。例如 angular
复制链接

扫一扫