大家在看angular的API文档的时候应该都看到过angular.elemen()t这个方法吧,下面就给大家详细的总结一下这个方法里边的一些内容和使用方法:
AngularJs是不直接操作DOM的,但是在平时的开发当中,我们有的时候还是需要操作一些DOM的,如果使用原生
的JS的话操作过于麻烦,所以大家一般都是使用jQuery,jQuery虽然好用,但是AngularJs是不建议和JQuery同时使
用的,所以AngularJs给我们也提供了一些操作DOM的方法———Jqlite
这里边的方法有:
addClass()-为每个匹配的元素添加指定的样式类名
after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点
append()-在每个匹配元素里面的末尾处插入参数内容
attr() - 获取匹配的元素集合中的第一个元素的属性的值
bind() - 为一个元素绑定一个事件处理程序,不支持命名空间
children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选
clone()-创建一个匹配的元素集合的深度拷贝副本
contents()-获得匹配元素集合中每个元素的子元素,包括文字和注释节点
css() - 获取匹配元素集合中的第一个元素的样式属性的值,只能获取行内样式属性值
data()-在匹配元素上存储任意相关数据//可以实现保存数据,将数据绑定在一个根元素上中去掉所有匹配的元素
要删除的dom节点.detach(),这样就会将这个节点删除,将自己也删除
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.element(document).find('section').eq(0).wrap('eee
')
在使用的时候要注意一下几点:
attr() -不支持函数作为参数
bind() -不支持命名空间,selectors或者eventData
children() -不支持selectors
css()-只用在行内样式,不可以继承.是一个数字需要加PX,getComputedStyle()
find() -通过标签名限于查询
next() -不支持selector
on() -不支持命名空间,selectors或者eventData
off() -不支持命名空间,selectors
one() -不支持命名空间,selectors
parent() -不支持selector
triggerHandler() -通过一个虚拟事件对象来处理。
unbind() -不支持的命名空间
本文源代码放在我的github上https://github.com/Jvid/angular.element
有什么问题可以随时欢迎留言