剛了解angularjs時，就知道它有個內嵌的輕量級的jquery:jqLite，那時候常於jQuery分不清，其實它們是不一樣的。jqLite中，通過angular.element(param)獲得angular的元素。其功能與jquery中的$()類似，但是存在一定的區別，$()里面是通過各種選擇器選擇到元素；但是angular.element方法的參數只有兩種，一種是Dom元素，一種是類似html元素的字符串。(詳情參考最下面栗子--DOM操作)
例如 angular.element(‘<ul>’);
下面這種是行不通的：
<input name=“email” id=“myId”></input>
var email = angular.element(‘myId’); //無效
如果要通過id獲取到元素，需通過這種方式
var email=angular.element(document.getElementById(‘myId’));
詳解angular element()方法使用：
jqLite API參考
jqLite不是jQuery，它只是jQuery的一個輕量級實現，包含了大多數常用功能。一般在項目中，不需要依賴jQuery，一般功能通過jqLite實現就足夠了。
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元素
事實上，angular並不依賴jQuery。當Angular檢測到你的頁面里有jQuery出現，他就會用這個jQuery而不再用jqLite。
使用參考栗子
- 簡單加粗字體
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>jqLite 測試</title>
<script src="http://cdn.bootcss.com/angular.js/1.6.3/angular.js"></script>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.css" rel="stylesheet">
<script>
angular.module("app", [])
.directive("demoDirective",demoDirective)
.controller("defaultCtrl",defaultCtrl);
function demoDirective(){
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");
}
}
}
}
defaultCtrl.$inject = ['$scope'];
function defaultCtrl($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>
- DOM操作
<!DOCTYPE HTML>
<html ng-app="elementExample">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.6.3/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" onclick="button1()" value="button1"></input>
<br/>
<div name="email" id="myId">使用DOM元素作為參數</div>
<input type="button" onclick="button2()" value="button2"></input>
</body>
</html>
最后，也來個彩蛋：
<input type="checkbox" class="input" />
<input type="text" class="input1" value="值" />
<div class="test">div1</div>
<div class="test">div2</div>
<div class="test1">
<p>子元素</p>
</div>
<div class="test2" data-value="wwe">
<!--注釋-->
<p>子元素1</p>
</div>
<div class="test3 test4">
<p>p1</p>
<p class="p2">p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<span> span1 </span>
</div>
<script>
//bind() - 為一個元素綁定一個事件處理程序
//data()-在匹配元素上存儲任意相關數據
//on() - 在選定的元素上綁定一個或多個事件處理函數
//off() - 移除一個事件處理函數
//one() - 為元素的事件添加處理函數。處理函數在每個元素上每種事件類型最多執行一次
//ready()-當DOM准備就緒時，指定一個函數來執行
//removeData()-在元素上移除綁定的數據
//triggerHandler() -為一個事件執行附加到元素的所有處理程序
//unbind() - 從元素上刪除一個以前附加事件處理程序
//addClass()-為每個匹配的元素添加指定的樣式類名
angular.element(document.querySelectorAll(".test")).addClass("asd");
//after()-在匹配元素集合中的每個元素后面插入參數所指定的內容，作為其兄弟節點
angular.element(document.querySelector(".test")).after("<p>我是通過after()添加進來的</p>");
//append()-在每個匹配元素里面的末尾處插入參數內容
angular.element(document.querySelector(".test")).append("<p>我是通過append()添加進來的</p>");
//attr() - 獲取匹配的元素集合中的第一個元素的屬性的值
console.log(angular.element(document.querySelector(".test")).attr("class"));
//children() - 獲得匹配元素集合中每個元素的子元素，選擇器選擇性篩選
console.log(angular.element(document.querySelector(".test1")).children());
//clone()-創建一個匹配的元素集合的深度拷貝副本
angular.element(document.querySelector(".test")).append(angular.element(document.querySelector(".test1")).clone());
//contents()-獲得匹配元素集合中每個元素的子元素，包括文字和注釋節點
console.log(angular.element(document.querySelector(".test2")).contents());
//css() - 獲取匹配元素集合中的第一個元素的樣式屬性的值
console.log(angular.element(document.querySelector(".test3")).css("color"));
//detach()-從DOM中去掉所有匹配的元素
angular.element(document.querySelector(".test1 p")).detach();
//empty()-從DOM中移除集合中匹配元素的所有子節點
angular.element(document.querySelector(".test2")).empty();
//eq()-減少匹配元素的集合為指定的索引的哪一個元素
console.log(angular.element(document.querySelectorAll(".test3 p")).eq(2)[0].innerHTML);
//find() - 通過一個選擇器，jQuery對象，或元素過濾，得到當前匹配的元素集合中每個元素的后代
console.log(angular.element(document.querySelector(".test3")).find("span")[0].innerHTML);
//hasClass()-確定任何一個匹配元素是否有被分配給定的（樣式）類
console.log(angular.element(document.querySelector(".test3")).hasClass("test4"));
//html()-獲取集合中第一個匹配元素的HTML內容
console.log(angular.element(document.querySelector(".test2")).html());
//next() - 取得匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合。如果提供一個選擇器，那么只有緊跟着的兄弟元素滿足選擇器時，才會返回此元素
console.log(angular.element(document.querySelector(".test3 .p2")).next()[0].innerHTML);
//parent() - 取得匹配元素集合中，每個元素的父元素，可以提供一個可選的選擇器
console.log(angular.element(document.querySelector("span")).parent());
//prepend()-將參數內容插入到每個匹配元素的前面（元素內部）
angular.element(document.querySelector(".test")).prepend("<p>我是通過prepend()添加進來的</p>");
//prop()-獲取匹配的元素集中第一個元素的屬性（property）值
angular.element(document.querySelector(".input")).prop("checked", true);
//remove()-將匹配元素集合從DOM中刪除。（同時移除元素上的事件及 jQuery 數據。）
angular.element(document.querySelector(".test2")).remove();
//removeAttr()-為匹配的元素集合中的每個元素中移除一個屬性（attribute）
angular.element(document.querySelector(".test2")).removeAttr("data-value");
//removeClass()-移除集合中每個匹配元素上一個，多個或全部樣式
angular.element(document.querySelector(".test3")).removeClass("test4");
//replaceWith() - 用提供的內容替換集合中所有匹配的元素並且返回被刪除元素的集合
angular.element(document.querySelector(".test1")).replaceWith("<p>replaceWith()替換的內容</p>");
//text()-得到匹配元素集合中每個元素的合並文本，包括他們的后代
console.log(angular.element(document.querySelector(".test")).text());
//toggleClass()-在匹配的元素集合中的每個元素上添加或刪除一個或多個樣式類,取決於這個樣式類是否存在或值切換屬性。即：如果存在（不存在）就刪除（添加）一個類
angular.element(document.querySelector(".test1")).toggleClass("test1");
angular.element(document.querySelector(".test2")).toggleClass("test1");
//val()-獲取匹配的元素集合中第一個元素的當前值
console.log(angular.element(document.querySelector(".input1")).val());
//wrap() - 在每個匹配的元素外層包上一個html元素
angular.element(document.querySelector(".test1")).wrap("<div></div>");
</script>
項目開發中，一般在不使用jquery下 ，一般在全局會將angular.element（）進行簡單的封裝
譬如，這樣：
var $ = function(ele){
if(typeof ele == "string"){
ele = document.querySelectorAll(ele);
}
return angular.element(ele);
};