第二章吸取jQuery之选择器和包装集

2.1 选择器

2.1.1选择器的使用

选择器是根据元素的类型、特性或者元素在HTML文档中的位置来精确地描述元素。

语法 jQuery(“DOM元素标识”) 也可以写成 $(“DOM元素标识”) 返回与选择器相匹配的DOM元素数组。下面是基本CSS选择器列表：

选择器	描述
*	匹配所有元素
E	匹配标签名为E的所有元素
E F	匹配标签名为F的所有元素，这些元素是E的子节点
E>F	匹配标签名为F的所有元素，这些元素是E的直接子节点
E+F	匹配标签名为F的所有元素，这些元素是E后面的第一个兄弟点
E~F	匹配标签名为F的所有元素，这些元素是E后面的兄弟节点之一
E.C	匹配标签名为E的所有元素，这些元素拥有CSS类名为C，如果省略了E则相当于*.C
E#I	匹配标签名为E的所有元素，这些元素拥有CSS类名为C，如果省略了E则相当于*#I
E[A]	匹配标签名为E的所有元素，这些元素拥有特性A
E[A=V]	匹配标签名为E的所有元素，特性A的值是V
E[A^=V]	匹配标签名为E的所有元素，特性A的值以V开头
E[A$=V]	匹配标签名为E的所有元素，特性A的值以V结束
E[A!=V]	匹配标签名为E的所有元素，特性A的值不等于V，或不存在V
E[A*=V]	匹配标签名为E的所有元素，特性A的值包含V

对应以上的选择器列表给予一个列表示例：

示例	描述
a	匹配所有的超级元素(<a>)
#specialID	匹配元素标识ID为specialID的元素
.specialClass	匹配元素类名class为specialClass的元素
a#specialID.specialClass	匹配超链元素ID为specialID并且拥有类名为specialClass的元素
p a.specialClass	匹配p元素下超链元素class为specialClass的元素
p > a	匹配p元素下直接子节点为超链的元素
ul.myList > li > a	匹配ul元素class名为myList的元素下的直接节点li下的直接超链节点
a[href^=’http://’]	匹配超链href特性值以http://为开头的所有元素
a[href!=’http://’]	匹配超链href特性值不包含http://的所有元素

对应以上的示例展示一下在代码中的体现:

$(a)

$(“#specialID”)

$(“.specialClass”)

$(“a#specialID.specialClass”)

$(“p a.specialClass”)

以此类推。这里$()函数的使用在文章开头就说明了。目前为止函数的参数只有一个，事实下该函数是有2个参数的，该函数第一个参数是选择器第二个参数为上下文。例如:

$(选择器,’div#sampleDom’)

这样写就可以把选择器的应用范围限制在DOM中的div的ID为sampleDom元素内的DOM中了。而前面$(选择器)省略的上下文就赋予了默认值为整个DOM对象。

2.1.2 位置选择元素

还可以根据元素在页面上的位置，选取关注的DOM。比如选择第一个<a>元素。

下面是jQuery支持的位置过滤选择器:

选择器	描述
:first	匹配上下文中的第一个元素。li a:first返回列表项后代节点中的第一个链接
:last	匹配上下文中的最后一个元素。li a:last返回列表项后台节点中的最后一个链接
:first-child	匹配上下文中的第一个子节点。li:first-child返回每个列表中的第一个列表项
:last-child	匹配上下文中的最后一个子节点。li:last-child返回每个列表中的最后一个列表项
:only-child	返回所有没有兄弟节点的元素
:nth-child(n)	匹配上下文中的第n个子节点。li:nth-child(2)返回每个列表中的第二个列表项
:nth-child(even\|odd)	匹配上下文中的偶数或奇数子节点。li:nth-child(even)返回每个列表中的偶数列表项
:nth-child(Xn+Y）	匹配上下文中的由提供的公式计算出的子节点。如果Y是0，则可以省略。li:nth-child(3n)返回每个列表中能被3整除的列表项,而nth-child(5n+1)返回每个列表中所有能被5整除的列表项的下一个列表项。
:even	匹配上下文中的偶数元素。li:even返回所有偶数的列表项。
:odd	匹配上下文中的奇数元素。li:odd返回所有奇数的列表项。
:eq(n)	匹配上下文中第N个元素
:gt(n)	匹配第N个元素之后的元素(不包括第N个元素)
:lt(n)	匹配第N个元素之前的元素(不包括第N个元素)

在上列表中最容易让人迷惑的是:first和:first-child的区分。

<ul>

</ul>

<ul>

</ul>

$("ul li:first-child").text();会返回 a1a2

$("ul li:first").text();会返回 a1

简单的说:first只是返回一个元素,:first-child返回多个元素。

2.1.3 自定义过滤选择器

下面是自定义过滤选择器列表:

选择器	描述
:animated	选择处于动画状态的元素
:button	选择按钮元素(包括input[type=submit]、input[type=reset]、input[type=button]和button)
:checkbox	选择复选框元素(input[type=checkbox])
:checked	选择处于选中状态的复选框和单选按钮元素
:contains(food)	选择包含文本food的元素
:disable	选择处于禁用状态的元素
:enabled	选择处于启用状态的元素
:file	选择文件输入元素(input[type=file])
:has(selector)	选择至少包含一个匹配指定选择器的元素的元素
:header	选择标题元素。比如<h1>到<h6>
:hidden	选择隐藏元素
:image	选择图片输入元素(input[type=image])
:input	选择表单元素(input、select、textarea、button)
:not(selector)	选择不匹配指定选择器的元素
:parent	选择有子节点(包含文本)的元素，空元素除外
:password	选择口令元素(input[type=password])
:radio	选择单选框元素(input[type=radio])
:reset	选择重置按钮元素(input[type=reset]或者button[type=reset])
:selected	选择列表中处于选中状态的<option>元素
:submit	选择提交按钮元素(input[type=submit]或button[type=submit])
:text	选择文本输入框元素(input[type=text])
:visible	选择可见元素

讲解下:has

首先我要取得一个div下的span可以写成$(‘div span’),那反过来要取得带有span的div呢？

$(‘div:has(span)’)这个意思就是div中有span的div。当然还可以带有特性如:

$(‘tr:has(img[src$=”puppy.png”])’)选择含有puppy.png为结尾图片的tr元素。

2.1.4 创建新的HTML

我们想动态的创建HTML中的元素可以这样写:

$(‘<div>HelloWorld</div>’).appendTo(‘body’);

这句话的意思就是创建一个层内容为HelloWorld的元素插入到body元素中。

当然了还可以动态的添加CSS样式以及添加事件,如:

$(‘<img>’,{src:’img/little.png’,alt:’test’,title:’test’,click:function(){alert($(this).attr(‘title’));}}).css({cursor:’pointer’,border:’1px solid black’}).appendTo(‘body’);

这行代码的意思是首先创建img的这个元素元素中有src,alt,title等特性还有click事件,并且给予了css的样式组成一个元素后加入到body元素中。

2.1.5 管理包装集

下面讲述一些包装集中的方法:

方法名	描述
size	size() 返回包装集中元素的个数参数无返回值元素的个数示例 $(‘World’).html().size();
get	get(index) 获取包装集中的一个或全部匹配元素。如果不指定参数，则包装集中的所有元素就以javascript数据形式返回。如果提供了index参数，则会返回index所对应的元素。参数 index (数值)需要返回的单个元素的下标。如果省略，则整个集合会以数组形式返回。返回值一个DOM元素或DOM元素数组示例 $(‘img[alt]’).get(0)
eq	eg(index) 获取包装集中与index参数相对应的元素，并返回只包含此元素的新包装集参数 (数值)需要返回的单个元素的下标。和get方法一样，负的下标值可以指定从集合的末尾开始查询元素返回值包含一个或零个元素的包装集示例 $(‘img[alt]’).eg(0)
first	first() 获取包装集中的第一个元素，并返回只包含此元素的新包装集。如果原包装集为空，则返回空包装集参数无返回值包含一个或零个元素的包装集示例 $(‘img[alt]’).first();
last	last() 获取包装集中的最后一个元素，并返回只包含此元素的新包装集。如果原包装集为空，则返回空包装集参数无返回值包含一个或零个元素的包装集示例 $(‘img[alt]’).last();
toArray	toArray() 将包装集里的所有元素作为DOM元素数组返回参数无返回值由包装集中的DOM元素组成的Javascript数组示例 $(‘lable+button’).toArray();
index	index(element) 在包装集中查找传入的元素，返回它在包装集的下标，或者返回包装集中的第一个元素在同级节点中的下标。如果没有找到此元素，则返回-1 参数 element(元素\|选择器)需要获取下标的元素引用，或者用来识别元素的选择器。如果省略此参数，则找出包装集中的第一个元素在同级节点中的下标。返回值传入的元素在包装集或者在其同级节点中的下标，若找不到则返回-1 示例 $(‘img’).index();
add	add(expression,context) 创建包装集的副本并向其中添加由expression参数指定的元素。expression可以是选择器、HTML片段、DOM元素或DOM元素数组。参数 expression (选择器\|元素\|数组)指定要添加到包装集的元素。该参数如果是jQuery选择器，则将全部匹配的元素添加到包装集中。如果该参数是HTML片段，则创建相应的元素并添加到包装集中。如果参数是DOM元素或DOM元素数组，则直接将其添加到包装集中。 Context (选择器\|元素\|数组\|jQuery)指定一个上下文，用来缩小匹配第一个参数的元素的查找范围。这和传递到jQuery()函数中的上下文参数是一样的。返回值所添加元素的原始包装集副本。示例 $(‘img[alt]’).add(‘img[title]’);
not	not(expression) 创建包装集的副本,从中删除那些与expression参数指定的标准相匹配的元素参数 expression(选择器\|元素\|数组)指定要删除的元素。如果该参数是 jQuery选择器，则删除任何匹配expression的元素。如果传递的是元素或者元素数组，则删除包装集中的这些元素如果传递的是函数，则会为包装集中的每个元素调用此函数(this指定当前元素)，并从包装集中删除调用的返回值为true的元素返回值不包含已删除元素的原始包装集副本示例 $(’img’).not(function(){return !$(this).hasClass(‘keepMe’)})
filter	filter(expression) 创建包装集的副本，并从中删除与expression参数值指定的标准不匹配的元素集合参数 expression(选择器\|元素\|数组)指定要删除的元素。如果参数是jQuery选择器，则删除所有不匹配expression的元素如果传递的是元素或者元素数组，则删除包装集中除了这些元素之外的所有元素如果传递的是函数，则会对包装集的每个元素分别调用此函数(this指定当前元素),并从包装集中删除函数调用返回值为false的元素返回值不包含已过滤元素的原始包装集副本示例 $(‘td’).filter(function(){return this.innerHTML.match(/^\d+$/)})
slice	slice(begin,end) 创建并返回新包装集,此包装集包含匹配集中一个连续的部分。参数 begion (数字)在返回的切片中第一个元素的位置,从0开始计数 end (数字)不包含在切片中的第一个元素位置，或者说是切片中最后一个元素的下一个元素的位置，从0开始计数。如果省略，则切片会扩展到包装集的最后一个元素示例 $(‘*’).slice(0,4)
has	has(test) 创建并返回新包装集，此包装集只包含原始包装集中子节点匹配test表达式的元素参数 test (选择器\|元素)要应用到包装元素所有子节点上的选择器或是要测试的元素。只有特定的元素会包含在包装集中，这些元素至少包含一个匹配选择器的子节点，或者其子节点就是传递的元素参数test 返回值结果包装集示例 $(‘div’).has(‘img[alt]’);
map	map(callback) 为包装集中的每一个元素调用回调函数，并将返回值收集到jQuery对象实例中参数 callback (函数)回调函数,为包装集中的每个元素调用该函数。此函数接受两个参数:元素在集合中的下标(从0开始计数)，以及元素本身。当前元素也被作为函数的上下文(this关键字) 返回值由已转换值组成的包装集示例 $(‘div’).map(function(){return (this.id == undefind)?null:this.id;})
each	each(iterator) 遍历匹配集里所有的元素，为每一个元素调用传入的迭代函数参数 iterator (函数)回调函数,为匹配集中的每个元素调用。此函数接受两个参数：元素在集合中的下标(从0开始计数)以及元素本身。当前元素也被作为函数的上下文(this引用) 返回值包装集示例 $([1,2,3]).each(funciton(){alert(this);})
find	find(selector) 返回新的包装集，它包含原始包装集中与传入的选择器表达式相匹配的元素的所有后代元素参数 selector (字符串)一个jQuery选择器,只有匹配此选择器的元素才能成为返回集合的一部分返回值新建的包装集示例 $(*).find(‘p cite’)
is	is(selector) 确定包装集中是否存在与传入的选择器表达式相匹配的元素参数 selector(字符串)检验包装集中元素的选择器表达式返回值如果至少有一个元素与传入的选择器相匹配，则返回true,否则返回false 示例 $(‘*’).is(‘img’)
end	end() 在jQuery方法链中用来将当前的包装集回滚到前一个返回的包装集中。参数无返回值前一个包装集示例 $(‘img’).filter(‘[title]’).hide().end().addClass(‘anImage’)
andSelf	andSelf() 合并方法链中的前两个包装集参数无返回值合并后的包装集示例 $(‘div’).addClass(‘a’).find(‘img’).addClass(‘b’).addSelf().addClass(‘c’)

关系获取包装集

方法名	描述
children([selector])	返回由每个包装元素所有的子节点(不包含重复的子节点)组成的包装集
closest([selector])	返回由与传入参数匹配的单个邻近祖先元素的包装集
contents()	返回由每个元素的内容组成的包装集，包括文本节点(这个方法常用来获取<iframe>元素的内容)
next([selector])	返回由每个包装元素后面下一个同级元素(不包含重复元素)组成的包装集
nextAll([selector])	返回由每个包装元素后面所有的同级元素组成的包装集
nextUntil([selector])	返回由每个包装元素后面所有的同级元素组成的包装集，直至遇到与选择器相匹配的元素，但不包括此元素。如果选择器没有匹配元素，或者省略了选择器参数，则会选择后面所有的同级元素
offsetParent()	返回由包装集中离第一个元素最近的，使用相对或者绝对定位的祖先元素组成的包装集。
parent([selector])	返回由每个包装元素的直接父元素(不包含重复元素)组成的包装集
parents([selector])	返回由每个包装元素的所有的祖先元素(不包含重复元素)组成的包装集。这不仅包括直接父元素，还包含其上的所有祖先元素，但是不包括文档根节点。
parentsUntil([selector])	返回由每个包装元素所有的祖先元素组成的包装集，直至遇到选择器匹配的元素，但不包括此元素。如果选择器没有匹配到元素，或者是省略了选择器参数，则选择所有的祖先元素。
prev([selector])	返回由每个包装元素前面紧邻的同级元素(不包含重复元素)组成的包装集
prevAll([selector])	返回由每个包装元素前面所有的同级元素组成的包装集
prevUntil([selector])	返回由每个包装元素前面所有的同级元素组成的包装集，直至遇到选择器匹配的元素，但不包括此元素。如果选择器没有匹配到的元素，或者是省略了选择器参数，则选择后面所有的兄弟元素
siblings([selector])	返回由每个包装元素的所有同级元素(不包含重复元素)组成的包装集