使用angular.element()獲取一個dom的方法。

1.可以使用jquery的選擇器

2.可以使用javascript的原生查找元素的方法

?

下面是angular.element()提供的方法

<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>

事件：

$destory:當Dom被移除時， Angular 攔截所以的jqLite或者jquery Dom對象，銷毀api和事件。這個事件能在Dom被移除前用來清除任何Dom上的相關。

方法：

controller(name)：檢索當前元素或其父元素的controller，默認情況下，檢索與ngController相關的controller，如果name是以駝峰模式命名的指令名稱，那么這個指令的controller就是這樣（如’ngModel’） 。

injector():檢索當前元素或其父元素的依賴注入。

scope():檢索當前元素或其父元素的scope。

isolateScope():如果有一個scope直接附著在當前元素，檢索一個隔離的scope，這僅用于元素包含一個創建了新的隔離的scope的指令，這個元素調用scope()總是返回原來的非隔離scope。

inheritedData():和data()一樣，但是會沿著Dom走直到值被找到或者走到頂級Dom元素。（由此可見，應該是向上傳播的意思。）

?

轉載于:https://www.cnblogs.com/lmyt/p/6605069.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的angular element()的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。