国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

詳解angular element()方法使用

2019-11-19 16:52:42
字體:
供稿:網(wǎng)友

使用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()-在匹配元素上存儲任意相關(guān)數(shù)據(jù)    //on() - 在選定的元素上綁定一個或多個事件處理函數(shù)    //off() - 移除一個事件處理函數(shù)    //one() - 為元素的事件添加處理函數(shù)。處理函數(shù)在每個元素上每種事件類型最多執(zhí)行一次    //ready()-當(dāng)DOM準(zhǔn)備就緒時,指定一個函數(shù)來執(zhí)行    //removeData()-在元素上移除綁定的數(shù)據(jù)    //triggerHandler() -為一個事件執(zhí)行附加到元素的所有處理程序    //unbind() - 從元素上刪除一個以前附加事件處理程序    //addClass()-為每個匹配的元素添加指定的樣式類名    angular.element(document.querySelectorAll(".test")).addClass("asd");    //after()-在匹配元素集合中的每個元素后面插入?yún)?shù)所指定的內(nèi)容,作為其兄弟節(jié)點    angular.element(document.querySelector(".test")).after("<p>我是通過after()添加進(jìn)來的</p>");    //append()-在每個匹配元素里面的末尾處插入?yún)?shù)內(nèi)容    angular.element(document.querySelector(".test")).append("<p>我是通過append()添加進(jìn)來的</p>");    //attr() - 獲取匹配的元素集合中的第一個元素的屬性的值    console.log(angular.element(document.querySelector(".test")).attr("class"));    //children() - 獲得匹配元素集合中每個元素的子元素,選擇器選擇性篩選    console.log(angular.element(document.querySelector(".test1")).children());    //clone()-創(chuàng)建一個匹配的元素集合的深度拷貝副本    angular.element(document.querySelector(".test")).append(angular.element(document.querySelector(".test1")).clone());    //contents()-獲得匹配元素集合中每個元素的子元素,包括文字和注釋節(jié)點    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中移除集合中匹配元素的所有子節(jié)點    angular.element(document.querySelector(".test2")).empty();    //eq()-減少匹配元素的集合為指定的索引的哪一個元素    console.log(angular.element(document.querySelectorAll(".test3 p")).eq(2)[0].innerHTML);    //find() - 通過一個選擇器,jQuery對象,或元素過濾,得到當(dāng)前匹配的元素集合中每個元素的后代    console.log(angular.element(document.querySelector(".test3")).find("span")[0].innerHTML);    //hasClass()-確定任何一個匹配元素是否有被分配給定的(樣式)類    console.log(angular.element(document.querySelector(".test3")).hasClass("test4"));    //html()-獲取集合中第一個匹配元素的HTML內(nèi)容    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()-將參數(shù)內(nèi)容插入到每個匹配元素的前面(元素內(nèi)部)    angular.element(document.querySelector(".test")).prepend("<p>我是通過prepend()添加進(jìn)來的</p>");    //prop()-獲取匹配的元素集中第一個元素的屬性(property)值    angular.element(document.querySelector(".input")).prop("checked", true);    //remove()-將匹配元素集合從DOM中刪除。(同時移除元素上的事件及 jQuery 數(shù)據(jù)。)    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() - 用提供的內(nèi)容替換集合中所有匹配的元素并且返回被刪除元素的集合    angular.element(document.querySelector(".test1")).replaceWith("<p>replaceWith()替換的內(nèi)容</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()-獲取匹配的元素集合中第一個元素的當(dāng)前值    console.log(angular.element(document.querySelector(".input1")).val());    //wrap() - 在每個匹配的元素外層包上一個html元素    angular.element(document.querySelector(".test1")).wrap("<div></div>");  </script>

事件:

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

方法:

controller(name):檢索當(dāng)前元素或其父元素的controller,默認(rèn)情況下,檢索與ngController相關(guān)的controller,如果name是以駝峰模式命名的指令名稱,那么這個指令的controller就是這樣(如'ngModel') 。

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

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

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

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

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。

發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 灌云县| 郓城县| 西昌市| 尖扎县| 如皋市| 兰坪| 巫山县| 石狮市| 焉耆| 石台县| 博罗县| 延庆县| 南安市| 历史| 贵阳市| 万宁市| 手游| 潜江市| 英山县| 延寿县| 武邑县| 黄冈市| 尚志市| 泗洪县| 乌拉特前旗| 罗平县| 喀什市| 商丘市| 邵东县| 陆良县| 松滋市| 富民县| 佛坪县| 海口市| 长丰县| 青海省| 盖州市| 汉川市| 崇明县| 滨海县| 南开区|