angularJs操作DOM的angular.element方法合集

AngularJs本身包含了一个叫做Jqlite的可兼容性库，提供了一些操作DOM的方法。angular.element()返回一个jqLite对象，是jQuery的一个子集，它允许Angular以跨浏览器兼容的方式维护DOM。
angular.element()将DOM元素或者HTML字符串包装成一个jQuery元素。

angular.element(element)  // `angular.element()`返回一个jquery对象

1、引入JQuery
在引入JQuery的前提下，和$的用法基本相同：

angular.element('#id')

2、在只使用Javascript和Angular的情况下

angular.element(document.querySelector('html'));

注意：document.querySelector()并不是在所有浏览器中都支持，它一般比较适合选择不复杂的元素。

angular.element(document).ready(function(){});

例：

    <div ng-controller="MyController">
        <span>item1</span>
        <span>item2</span>
    </div>
    <script>
        var myApp = angular.module('myApp', []);
        myApp.controller('MyController', ['$scope', function($scope) {
            console.log(angular.element(document.querySelectorAll('span')));
        }]);
    </script>

打印信息：

从打印信息来看，angular.element()返回的是一个数组，包含了选择的元素。若要取某个元素，可以这样：

var span = angular.element(document.querySelectorAll('span'));
console.log(span[0]);
// <span>item1</span>

3、$document
$document和angular.element(document)是一样的，是DOM结构树，包含jqlite的所有方法。另外$document[0]和原生JS的document等效。
注：使用时，不要忘记注入$document。

例：

<body ng-app="myApp">
    <div ng-controller="MyController"></div>
    <script>
        var myApp = angular.module('myApp', []);
        myApp.controller('MyController', ['$document', function($document) {
            console.log($document);
            console.log($document[0] === angular.element(document)[0]);
        }]);        
    </script>

打印信息：

JqLite包含的其他jquery方法

addClass()：为每个匹配的元素添加指定的样式类名

hasClass()：确定任何一个匹配元素是否有被分配给定的（样式）类

removeClass()：移除集合中每个匹配元素上一个，多个或全部样式

toggleClass()：
在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类

after()：在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点

append()：在每个匹配元素里面的末尾处插入参数内容

attr()：获取匹配的元素集合中的第一个元素的属性的值

removeAttr()：为匹配的元素集合中的每个元素中移除一个属性（attribute）

prop()：获取匹配的元素集中第一个元素的属性（property）值

children()：获得匹配元素集合中每个元素的子元素，选择器选择性筛选

css()：获取匹配元素集合中的第一个元素的样式属性的值

data()：在匹配元素上存储任意相关数据

removeData()：在元素上移除绑定的数据

empty()：从DOM中移除集合中匹配元素的所有子节点

eq()：减少匹配元素的集合为指定的索引的哪一个元素

find()：通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代

next()：取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素

parent()：取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器

prepend()：将参数内容插入到每个匹配元素的前面（元素内部）

ready()：当DOM准备就绪时，指定一个函数来执行

remove()：将匹配元素集合从DOM中删除。（同时移除元素上的事件及 jQuery 数据。）

clone()：创建一个匹配的元素集合的深度拷贝副本

contents()：获得匹配元素集合中每个元素的子元素，包括文字和注释节点

replaceWith()：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

triggerHandler()：为一个事件执行附加到元素的所有处理程序

on()：在选定的元素上绑定一个或多个事件处理函数

off()：移除一个事件处理函数

one()：为元素的事件添加处理函数。

one()：为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次

bind()：为一个元素绑定一个事件处理程序

unbind()：从元素上删除一个以前附加事件处理程序

wrap()：在每个匹配的元素外层包上一个html元素

val()：获取匹配的元素集合中第一个元素的当前值

html()：获取集合中第一个匹配元素的HTML内容

text()：得到匹配元素集合中每个元素的合并文本，包括他们的后代

detach()：从DOM中去掉所有匹配的元素

angularJs操作DOM的angular.element方法合集

JqLite包含的其他jquery方法

lavender

引用和评论

创建Qt项目