jQuery学习笔记（2）——包装器

来源：互联网发布：软件行业发展前景概述编辑：程序博客网时间：2024/06/14 01:30

jQuery包装器

由于包装器是jQuery的核心，这一小节篇幅较长。

选择将被操作的元素

几乎在使用任何jQuery方法的时候，我们必须做的第一件事就是选择要操作的页面元素。
选择方法有如下四种：

利用基本CSS选择器
利用子选择器、容器选择器、特性选择器
利用位置选择器
自定义选择器

基本CSS选择器

参照CSS的语法，利用元素的ID，CSS类名称，标签名称，页面元素的DOM层次结构进行选择。

例如：
a——匹配所有的<a>元素
#ID——匹配所有id为ID的元素
.Class——匹配所有CSS类名为Class的元素
a#ID.Class——匹配id为ID，CSS类名为Class的<a>元素
p a#ID.Class——匹配id为ID，CSS类名为Class、在<p>元素内声明的<a>元素

子选择器、容器选择器、特性选择器

子选择器

父节点与直接子节点以>隔开。
例如：
p > a，表示选择器只匹配作为<p>元素的直接子节点的<a>元素。

容器选择器

当需要选择一个包含指定子元素的父元素时，需要用到容器选择器。
例如：
li:has(a)，表示匹配包含<a>元素的所有<li>元素。
要注意与li a的区别，后者表示匹配<li>元素里的所有<a>元素。

特性选择器

以元素的特性（属性）作为选择标准。
例如：
input[type=text]，表示选择器只匹配type特性值为text的所有<input>元素。

选择器描述*匹配任何元素E匹配标签名称为E的所有元素E F匹配标签名称为F，且作为E的后代节点的所有元素E>F匹配标签名称为F，且作为E的直接子节点的所有元素E+F匹配前面是邻近兄弟节点E的所有F元素，要求E和F紧邻E~F匹配前面是任何兄弟节点E的所有F元素，不要求E和F紧邻E:has(F)匹配标签名称为E，至少有一个标签名称为F的后代节点的所有元素E.C匹配带有类名C的所有元素EE#I匹配id特性值为I的元素EE[A]匹配带有特性A的元素EE[A=V]匹配所有元素E，其特性A的值正好是VE[A^=V]匹配所有元素E，其特性A的值以V开头E[A$=V]匹配所有元素E，其特性A的值以V结尾E[A*=V]匹配所有元素E，其特性A的值包含V

位置选择器

在需要根据元素在页面上的位置或者与其他元素的位置关系去选择元素的时候，就需要用到位置选择器。
例如：
a:first表示匹配页面上的第一个<a>元素。
p:odd表示匹配页面上所有序数为奇数的段落元素。
li:last-child表示选择列表元素的最后<li>子节点。

选择器描述实例:first页面的最先的匹配。li a:first,返回最先的并且在<li>项下的<a>:last页面的最后的匹配。li a:last,返回最后的并且在<li>项下的<a>:first-child最先的子元素。li:first-child,返回每个列表的最先的项:last-child最后的子元素。li:last-child,返回每个列表的最后的项:only-child返回没有兄弟节点的所有元素。 :nth-child(n)第n个子节点,n从1开始。li:nth-child(2)返回每个列表的第二个<li>:nth-child(even|odd)偶数或奇数的子节点li:nth-child(even)返回每个序列的偶数子节点:nth-child(Xn+Y)根据传入的公式计算第n个子节点 :even或:odd页面范围内偶数或奇数的匹配元素li:even返回全部偶数的<li>:eq(n)第n个匹配元素 :gt(n)第n个匹配元素（不包括）之后的元素 :lt(n)第n个匹配元素（不包括）之前的元素

除了nth-child(n)的下标从1开始，其余都是从0开始

jQuery自定义选择器

选择器描述:animated选择当前处于动态控制之下的元素:button选择任何按钮（input[type=submit/reset/button],button）:checkbox只选择复选框元素（input[type=checkbox]）:checked只选择已选中的复选框或单选按钮:contains(foo)只选择包含文本foo的元素:disabled只选择在界面上已经禁用的表单元素:enabled只选择在界面上已经启用的表单元素:file选择所有文件元素:header只选择标题元素（<h1>…）:hidden只选择隐藏元素:image选择表单图像元素（input[type=image]）:input只选择表单元素（<input>,<select>,<textarea>,<button>）:not(filter)根据指定的过滤器求反:parent选择拥有后代节点的元素，而排出空元素:password选择口令元素（input[type=password]）:radio只选择单选按钮（input[type=radio]）:reset选择复位按钮元素（input[type=reset]或button[type=reset]）:selected选择已选中的选项:submit只选择提交按钮元素（input[type=submit]或button[type=submit]）:text只选择文本字段元素（input[type=text]）:visible只选择可见元素

生成新HTML

jQuery可以生成新HTML片段差入到页面中。

$("<div>someString</div>").appendTo("#div1"); // 在id为div1的元素下插入someString这个div

管理包装元素集合

确定包装集大小

可以用length属性和size()方法，得到包装集元素的个数。

$('#someDiv').html('There are '+$('a').size()+' link(s) on this page.');//$('a').size()返回页面中所有<a>标签的数目

从包装集中获取元素

可以用访问数组的方法用下标获取，也可以通过get()方法获取。

$('img[alt]')[0];$('img[alt]').get(0); // 两种方法等效

get()方法还可以将包装集转化为js数组

筛选元素包装集

添加元素

当某个命令应用到原始包装集之后，想要添加更多元素，就需要这种方法。

add(expression)
把表达式参数所指定的元素添加到包装集。
表达式可以是选择器、HTML片段、DOM元素或DOM元素数组。

$('img[alt],img[title]');$('img[alt]').add('img[title]'); // 两种方法等效 选择出包含alt特性或者title特性的img元素。

整理包装集的内容

not()和：not类似，都有“非”的含义。

not(expression)
根据表达式参数的值，从包装集里删除元素，如果参数是jQuery筛选选择器，则从包装集里删除任何匹配表达式的元素；如果参数是元素的引用，则从包装集里删除该元素。

$('img[title]:not([title*=puppy])');$('img[title]').not('[title*=puppy]'); // 两者等价， 选择出title值不包含puppy的所有img元素。

有时候，筛选包装集的方式难以或不可能用选择器表达式表达出来，这种情况下，必须求助于编程方式去筛选。迭代包装集里的所有原，调用not(element)方法删除不符合的元素，jQuery有一个filter()方法。

filter(expression)
利用传入的选择器表达式或筛选函数，从包装集里筛选元素。
filter()方法的参数是一个函数的时候，会为每一个包装集元素调用那个函数，返回值为false的元素都会被删除。

$('td').filter(function(){return this.innerHTML.match(/^\d+$/)});

获取包装集的子集

当希望根据元素在包装集里的位置，获取其子集，就要用到slice()方法。

slice(begin,end)
创建并返回新包装集，新包装集包含原始包装集的连续的一部分。
begin，end都是下标，从0开始，end可以省略。
begin会包含在返回结果中，end不会

$('*').slice(2,3); //新包装集包含第3个元素，结果是一个包装集$('*').get(2); //返回第3个元素，结果是一个元素

利用关系获取包装集

jQuery可以通过DOM中包装元素与其他元素的层次关系，从现有包装集里获取新包装集。

选择器描述parent()返回被选元素的直接父元素组成的包装集parents()返回所有祖先元素组成的包装集，一路向上直到根元素<html>parentsUntil()返回介于两个给定元素之间的所有祖先元素组成的包装集children()返回被选元素的直接子元素组成的包装集siblings()返回被选元素的所有同胞元素组成的包装集next()返回被选元素的下一个同胞元素(只会返回一个元素)组成的包装集nextAll()返回被选元素的所有跟随的同胞元素组成的包装集nextUntil()返回介于两个给定元素之间的所有跟随的同胞元素组成的包装集prev()与next()相对prevAll()与nextAll()相对prevUntil()与nextUntil()相对contents()返回原始包装集元素的内容的包装集，这些元素可能包含文本节点

其他方法

find(selector)
返回新包装集，包含原始包装集里与传入选择器表达式相匹配的所有元素。
原始集里的元素的后代会因为与传入的选择器表达式匹配而被包含在新包装集里。

wrappedSet.find('p span'); $('p span',wrappedSet); // 两句等价，获取段落内所有span元素的新包装集

contains(text)
返回新包装集，由包含text参数所传入的文本字符串的元素所组成。

$('p').contains('para'); //匹配包含文本para的段落

is(selector)
确定包装集里是否有元素匹配传入的选择器表达式。

var hasImg = $('*').is('img); //如果当前页面包含img元素，则返回true

管理jQuery链

因为jQuery链的存在，单个语句可以完成大量的任务。我们可以将多个命令应用到包装集，而不用重复计算多次包装集。
但是，当有些返回新包装集的命令在jQuery链中的时候，后续命令很有可能操作错对象。
例如：$('img').clone().appendTo('#somewhere');appendTo()操作的对象就是clone()后得到的新包装集而不是原包装集。如果想要操作原包装集，需要用到end()。

end()
在jQuery命令链内调用，以便回退到前一个包装集。

$('img').clone().appendTo('#somewhere').end().addClass('beenCloned');

appendTo()操作了clone()方法返回克隆得到的新包装集，只要调用end()就会退到前一个包装集，并在其上执行addClass()命令。如果不插入end()命令，addClass()就操作克隆得到的新包装集。

andSelf()
合并命令链内最近产生的两个包装集。（即当前包装集和前一个包装集）

获取和设置元素属性

方法描述each(iterator)遍历包装集里所有元素，为各个元素分别调用迭代器函数attr(name)获取包装集里第一个元素指定特性的值attr(name,value)设置包装集里所有元素的name特性为valueremoveAttr(name)从每个已匹配元素删除指定得到特性

获取和设置元素内容

最常用的是html方法：

html()
获取匹配集里第一个元素的HTML内容
html(text)
把传入的HTML片段设置为所有匹配元素的内容

也可以利用text命令获取和设置文本内容：

text()
把包装集内元素的所有文本内容连接起来，并返回字符串
text(content)
把所有已包装元素的文本内容设置为参数值，如果参数包含尖括号，则会替换成HTML实体。

还有一些命令用于移动和复制元素

命令描述append(content)在被选元素的结尾插入contentappendTo(target)把包装集里所有元素移动到target指定目标的内容的结尾，target是一个包含选择器的字符串或一个DOM元素。prepend(content)在被选元素的开头插入contentprependTo(target)作用与appendTo相反after()在被选元素之后插入内容before()在被选元素之前插入内容wrap(wrapper)把匹配集各个元素用已传递的HTML标签或元素的克隆副本分别包裹起来wrapAll(wrapper)把匹配集作为一个单元用已传递的HTML标签或元素的克隆副本分别包裹起来wrapInner(wrapper)把匹配集各个元素的内容用已传递的HTML标签或元素的克隆副本分别包裹起来remove()删除页面DOM里所有元素empty()清空匹配集里所有的DOM元素内容clone(copyHandlers)克隆原包装集并返回副本，后代均被复制，事件处理程序是否被复制取决于参数设置（true表示复制处理程序，缺省或false表示不复制）

append和appendTo的区别

A.append(B) // 是把B追加到A后面A.appendTo(B) // 是把A追加到B后面

获取和设置元素样式

方法描述addClass()向被选元素添加一个或多个类removeClass()从被选元素删除一个或多个类toggleClass()对被选元素进行添加/删除类的切换操作css(name,value)设置或返回样式属性（不带参数是返回，带参数是设置）

将已有的CSS类名作为函数的参数，就可以实现对选取的元素的CSS信息修改，完整的CSS 相关属性查阅w3school。

$("selector").css("propertyname");//获取属性值$("selector").css("propertyname","value");;//设置单个属性值$("selector").css({"propertyname1":"value1","propertyname2":"value2"});//设置多个属性值

处理表单元素值

因为表单元素拥有特别的属性，所以jQuery核心包含多个便利的函数用于获取和设置表单元素的值，表单元素序列化，根据表单属性选择元素等操作。

获取表单元素值

val()
返回匹配集里第一个元素的value特性，如果是多选元素则返回所有选中项的数组。

$('[name=radioGroup]:checked'),val(); //返回一个已选中单选按钮的值，都未选中则返回undefined

设置表单元素值

val(value)
把传入的值设置为所有已匹配表单元的值
value是一个字符串，用于设置包装集里各表单元素的value属性值。

val()的另一个用途是是复选框或单选按钮变为选中状态，或者选中<select>元素内的选项。

val(values)
导致包装集里任何复选框、单选按钮或<select>元素的选项变为checked或selected，只要它们的值和已传递值数组的任何一个值相匹配。
values是一个值数组，用于确定哪些元素将被选中或选择。

$('input,select').val(['one','two','three']); //将所有input和select元素中值为one或two或three之一的选项变为已选择状态。

1 0