jQuery包装器
Part1:jQuery包装器的用法
一、通过包装器方法选择和包装将要操作的DOM元素
$()函数返回特殊的JavaScriopt对象(收集到了JavaScirpt元素并添加了拓展功能),它包含与选择器相匹配的DOM元素数组,这个数组中的元素是按照在文档中的顺序排列的。这个对象拥有大量有用的预定义方法,可作用于已收集的元素集合。
特点:
(1):jQuery包装器方法,当执行完毕后(比如隐藏操作)会返回相同的一组元素,以便为另一个操作做准备。
例子:$("div.notLongForThisWorld").hide().addClass("removed");
(2):每一个方法都作用在于最初的选择器相匹配的元素集上,所以没必要遍历元素集。jQuery已经在后台完成了这一切。
二、为全局使用函数提供命名空间
var trimmed = $.trim(something);
三、从HTML标记创建DOM元素
$("<p>HI there</p>")
四、创建在DOM就绪后执行的代码
$(document).ready(function(){
});
$(function(){
});
五、Dom对象和jQuery对象的相互转换
(1)jQuery对象是一个类类似数组的对象,可以通过[index]和get[index]得到对应的Dom对象
(2)对于一个Dom对象,只需要用$() 把Dom对象包装起来,就可以获得一个jQuery对象。
Part2:管理包装集
一、确定包装集的大小
(1)length属性
$("ul").length
(2)size()方法
$("ul").size();
二、从包装集中获取元素
(1)获取Dom元素
1)[index]
2)get(index) 获取包装集中的一个或全部匹配元素。如果不指定参数,则包装集中的所有元素就以JavaScript数组形式返回。如果提供了index参数,则会返回index所对应的元素
3)以数组的形式获取所有的元素
toArray()
(2)获取jQuery元素
1)eq(index) 获取包装集中index参数的对应元素,并返回只包含此元素的包装集
2)first() 获取包装集中的第一个元素,并返回只包含此元素的新包装集。
3)last() 获取包装集中的最后一个元素,并返回只包含此元素的新包装集。
(3)获取元素的索引 index(element);
例子:
var $li = $("li");
var n = $li.index("li#li_1");
三、分解元素包装集
(1)添加更多元素到包装集 add(expression,context)
expression: 可以是选择器、HTML片段、DOM元素或DOM元素组
例子:
1、匹配带有alt或title特性的所有<img>元素
$("img[alt],img[title]")
或:
$("img[alt]").add("img[title]");
2、对所有拥有alt特性的<img>元素应用粗边框,然后对所有拥有alt或title特性的<img>应用一定程度的透明效果。
$(‘img[alt]‘)
.addClass(‘thickBorder‘)
.add(‘img[title]‘)
.addClass(‘seeThrough‘)
(2)整理包装集中的内容
1)删除与表达式相匹配的元素 not(expression)
$(‘img[title]‘).not(‘[title
* = puppy]‘);
2)删除与表达式不匹配的元素 filter(expression)
$(‘img‘).filter(‘[title*=dog]‘);
(3)获取包装集的子集
1)slice(begin,end)
$(‘*‘).slice(0,4);
2)原始包装元素所有子节点上的选择器或是要测试的元素: has(test)
例子:
$(‘div‘).has(‘img[alt]‘);
(4)遍历包装集
1)map(callback)
为包装集中的每一个元素调用回调函数,并将返回值收集到jQuery对象实例中
例子:下面代码会返将页面上所有的<div>元素的id值收集到一个JavaScript数组中
var allIds = $(‘div‘).map(function(){
return
(this.id ===undefined)? null: this.id;
}).get();
2)each() 遍历匹配集里所有的元素,为每一个元素调用传入的迭代函数
$(function() {
$([1,2,3]).each(function(){
alert(this);
});
})