首页 > 代码库 > 选择操作元素
选择操作元素
$()：使用选择器选择DOM元素并创建新的DOM元素
一、选择将被控制的元素
$(选择器,‘该操作的上下文‘)
上下文参数可以是DOM元素的引用，也可以是包含jQuery选择器的字符串，或者是DOM树的一个子集。
基础CSS选择器
* 匹配所有元素
E 匹配标签名为E的所有元素
E F 匹配标签名为E的所有元素，这些元素是E的子节点
E>F 匹配标签名为E的所有元素，这些元素是E的直接子节点
E+F 匹配标签名为E的所有元素，这些元素是E后面的第一个兄弟节点
E~F 匹配标签名为E的所有元素，这些元素是E后面的兄弟节点之一
E.C 匹配标签名为E的所有元素，这些元素拥有CSS类名为C，如果省略E则相当于*.C
E#I 匹配标签名为E的所有元素，这些元素的id特性为I，如果省略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，或根本不存在A特性
E[A*=V] 匹配标签名为E的所有元素，这些元素的A特性值包含V
位置过滤选择器
:first 匹配上下文的第一个元素
:last 匹配上下文的最后一个元素
:first-child 匹配上下文的第一个子节点
:last-child 匹配上下文的最后一个子节点
:only-child 返回所有没有兄弟节点的元素
:nth-child(n) 匹配上下文中的第n个子节点
:nth-child(even|odd) 匹配上下文中的偶数或奇数子节点
:nth-child(Xn+Y) 匹配上下文中的由提供的公式计算出的子节点。
:eve 匹配上下文中的偶数元素
:odd 匹配上下文中的奇数元素
:eq(n) 匹配第n个元素
:gt(n) 匹配第n个元素之后的元素（不包括第n个元素）
:lt(n) 匹配第n个元素之前的元素（不包括第n个元素）
nth-child过滤器从1开始计算，其他的选择器从0开始计算。
CSS和自定义过滤器
:animated
:button
:checkbox
:checked
:contains(food)
:disabled
:enabled
:file
:has(selector)
:header
:hidden
:image
:input
:not(selector)
:parent
:password
:radio
:reset
:selected
:submit
:text
:visible
:not过滤器
获取出了src包含dog的图片元素：$(‘img:not(src*="dog")‘)
:has过滤器
找出包含某种图片元素的表格后:$(‘tr:has([src$=".gng"])‘)
二、创建新的HTML
$("<div>Hello</div>")
$()第二个参数传递创建元素的特性和特性值，这个参数是javascript对象，它的属性作为特性的名称和值来应用到元素。
$(function(){ $(‘<img>‘, { src: ‘images/little.bear.png‘, alt: ‘Little Bear‘, title:‘I woof in your general direction‘, click: function(){ alert($(this).attr(‘title‘)); } }) .css({ cursor: ‘pointer‘, border: ‘1px solid black‘, padding: ‘12px 12px 20px 12px‘, backgroundColor: ‘white‘ }) .appendTo(‘body‘); });
除了事件处理函数以外，所有属性值都在‘‘里面。
//省略对链式方法css()的调用，用attribute参数中对象属性代替 .css: { cursor: ‘pointer‘, border: ‘1px solid black‘, padding: ‘12px 12px 20px 12px‘, backgroundColor: ‘white‘ }
三、管理包装集
var jqobj=$("header"); //jQuery包装集 var jqobj=jQuery("#header"); //jQuery包装集,为防止与其它js框架的$冲突,不嫌麻烦可多写几个字
1.确定包装集大小
size()：返回包装集中元素的个数，无参数。
2.从包装集获取元素
①通过索引获取元素
//从页面上带有alt特性的所有<img>元素的包装集获取第一个元素var imgElement = $(‘img[alt]‘)[0];
get(index)：获取包装集中的一个或全部匹配元素，如果不指定参数，则所有元素以javascript数组返回。
如果提供了index参数，则返回index所对应的元素，如果参数是负数，从末尾开始查找，get(-1)是最后一个元素。
eq(index)：获取包装集中与index参数相对应的元素，并返回只包含此元素的新包装集。
first()：获取包装集第一个元素，返回只包含此元素的新包装集。如果包装集为空，返回空包装集。
last()：获取包装集最后一个元素，返回只包含此元素的新包装集。如果包装集为空，返回空包装集。
②以数组形式获取所有元素
toArray()：将包装集的所有元素作为DOM元素数组返回
③获取元素的索引
index(element)：在包装集中查找传入的元素，返回它在包装集的下标，或者返回包装集中的第一个元素在同级节点中的下标。如果没找到此元素，返回-1。
3.分解元素包装
①添加更多元素到包装集
add(expression,context)：创建包装集的副本并向其中添加由expression参数指定的元素。expression可以是选择器、HTML片段、DOM元素或DOM元素数组。context指定上下文范围来缩小匹配第一个参数的元素的查找范围。
逗号操作符将多个选择器合并成一个选择器
把元素引用或由元素组成的数组传递给add()方法，就可以将它们添加到包装集。
//已有一个名为someElement的元素引用$(‘img[alt]‘).add(someElement)
还可以通过传递一个包含HTML标记的字符串来添加新创建的元素。
//创建文档中所有p的包装集，然后创建一个<div>元素并添加到该包装集$(‘p‘).add(‘<div>nima</div>‘)
②整理包装集的内容
not(expression)：创建包装集的副本，从中删除那些与expression参数值（选择器、元素、数组、函数）指定的标准相匹配的元素。如果传递的是函数，包装集的每个元素调用此函数（this指定当前元素），并从包装集删除调用的返回值为true的元素。
//选择所有<img>元素，删除不含CSS类keepMe的元素$(‘img‘).not(function(){return !$(this).hasClass(‘keepMe‘);})
filter(experssion)：创建包装集的副本，从中删除与expression参数值指定的标准不匹配的元素集合。
//创建由包含数字的所有<td>组成的包装集$(‘td‘).filter(function(){filter(return (this).innerHTML.match(/^\d+$/)})//选择所有图片，应用CSS类seeThrough，只保留集合内title特性包含dog的图片并应用类thickBorder$(‘img‘).addClass(‘seeThrough‘).filter(‘[title*=dog]‘).addClass(‘thickBorder‘)
③获取包装集的子集
slice(begin,end)：创建返回新包装集，此包装集包含匹配集中一个连续的部分。end不包含在切片中的第一个元素的位置。
与get方法不同，slice返回的是包含此元素的包装集，get返回包装集中的元素。
has(test)：创建并返回新包装集，此包装集只包含原始包装集中子节点匹配test表达式（选择器 元素）的元素。
④转换包装集的元素
map(callback)：为包装集的每个元素调用回调函数，将返回值收集到jQuery对象实例。如果回调函数的某个调用返回null，相应的条目不会包含在最后返回的集合。函数接收两个参数：元素在集合中的下标，以及元素本身。
//将页面上所有<div>的id收集到javascript数组var allIds = $(‘div‘).map(function() {return if ($(this).id==undefind)? null : this.id;}).get();
由于返回值是 jQuery 封装的数组，使用 get() 来处理返回的对象以得到基础的数组。
⑤遍历包装集的元素
each(iterator)：变量匹配集里所有元素，为每个元素调用传入的迭代函数。
//设置匹配集中所有元素的属性值$(‘img‘).each(function() {this.alt=‘this.id‘});
4.使用关系获取包装集
children 子节点
closest 单个临近祖先元素
contents 每个元素的内容组成的包装集，包括文本节点（常用来获取<iframe>框架的内容）
next 每个包装元素后面下一个同级元素（不包含重复元素）
nextAll 每个包装元素后面所有的同级元素
nextUntil 每个包装元素后面所有的同级元素组成的包装集，直到遇到与选择器相匹配的元素，但不包括此元素
offsetParent 包装集中离第一个元素最近的，使用相对或者绝对定位的祖先元素
parent 每个包装元素的直接父元素（不包括重复元素）
parents 每个包装元素所有的父元素（不包括重复元素），也包含其上的所有祖先元素，但不包含根元素
parentsUnitil 每个包装元素所有的祖先元素组成的包装集，直到遇到与选择器相匹配的元素，但不包括此元素。如果没有匹配到或省略了选择器参数，则选择所有祖先元素
prev 每个包装元素前面紧邻的同级元素（不包含重复元素）
prevAll 每个包装元素前面所有的同级元素
prevUntil 每个包装元素前面紧邻的同级元素，直到遇到与选择器相匹配的元素，但不包括此元素。如果没有匹配到或省略了选择器参数，则选择后面所有兄弟元素
siblings 每个包装元素的所有同级元素（不包含重复元素）
5.更多处理包装集的方式
find(selector)：返回新的包装集，它包含原始包装集中与传入的选择器表达式相匹配的元素的所有后代元素参数。
is(selector)：确定包装集中是否存在与传入的选择器表达式相匹配的元素。如果至少有一个元素与传入的选择器匹配，则返回true，否则返回false。
6.管理jQuery链
end()：将当前的包装集回滚到前一个返回的包装集
//返回有title特性的图片集，调用end()后回滚到前一个包装集并用addClass()方法$(‘img‘).filter(‘title‘).hide().end().addClass(‘anImage‘);
andSelf()：合并方法链中的前两个包装集
//创建第三个包装集，它是<div元素>和其后代的<img>元素的并集//<div>有CSS类a和c，这些元素后代中的<img>有类b和c$(‘div‘) .addClass(‘a‘) .find(‘img‘) .addClass(‘b‘) .andSelf() .addClass(‘c‘);
选择操作元素