angular element()

使用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元素。（因而可知，應該是向上傳播的意思。）