angularjs-jqLite（在angularjs中使用jquery）

jqLite简介

angularjs包含一个被剪切过得jQuery，成为jqLIte，jqLIte内部包含了jquery大多数常用的功能，以及对于angular自身内部的一些访问。

angular并不依赖jQuery，jqLite是jQuery的一个轻量级实现。

jqLite的DOM导航方法

名称 描述 children() 返回一组子元素 eq(index) 从一个元素集合中返回对应索引的元素 find(tag) 按照指定的标签名定位所有后代元素 next() 获得下一个兄弟元素 parent() 返回父元素

jqLite修改元素（支持的jquery方法列表）

以下方法就不一一详述，使用过jquery的各位小伙伴相信你们都懂。

addClass() //为每个匹配的元素添加指定的样式类名
after() 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点
append() //在每个匹配元素里面的末尾处插入参数内容
attr() //获取匹配的元素集合中的第一个元素的属性的值
bind() //为一个元素绑定一个事件处理程序
children() //获得匹配元素集合中每个元素的子元素，选择器选择性筛选
clone() //创建一个匹配的元素集合的深度拷贝副本
contents() //获得匹配元素集合中每个元素的子元素，包括文字和注释节点
css() //获取匹配元素集合中的第一个元素的样式属性的值
data() //在匹配元素上存储任意相关数据
detach() //从DOM中去掉所有匹配的元素
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元素

jqLite事件处理

名称 描述 on(events,handler) 为指定元素发生的事件添加处理函数 off(events,handler) 为指定元素发生的事件移除之前添加的处理函数 tiggerHandler() 为指定元素的事件添加处理函数

- demo jqLite-on

buttons.on("click", function (e) {    element.find("li").toggleClass("bold");});

• demo jqLite-on
• 使用triggerHandler后可以在button被点击后触发select函数

$("input").select(function(){$("input").after("发生 Input select 事件！");});$("button").click(function(){$("input").triggerHandler("select");});

使用jqLite访问angularjs

名称 描述 controller(name) 获取当前元素的控制器（name选填） injector() 获取当前元素（或其父元素）相关联的注入器 isolateScope() 返回该元素独立的作用域（没有则返回空） scope() 返回该元素(或其父元素)作用域

END