一、过滤
其中的expr是css查询字符串表达式
过滤方法 | 说明 |
---|---|
eq(index) | 获取第N个元素 |
hasClass(class) | 检查当前元素是否属于特定的类,如果有,返回true |
filter(expr) | 筛选出与指定函数返回值匹配的元素集合 |
filter(function) | 筛选出与指定函数返回值匹配的元素集合 |
is(expr) | 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true |
map(callback) | 将一组元素转换成其他数组(不论是否是元素数组) |
has(expr) | 保留包含特定后代的元素,去掉那些不含有指定后代的元素 |
not(expr) | 删除与指定表达式匹配的元素 |
slice(start,[end]) | 选取一个匹配的子集 |
eg1: $("#submit").click(function(){
$("p").html("<h2>提交信息</h2>").append( $("input").map(function(){
return $(this).val();}).get().join("、"));
return false;
})
eg2:$("#menu li").slice(2,4).css("color“,"red"); //截取第3、4个元素
二、查找
jQuery查找方法
查找方法 | 说明 |
---|---|
add(expr,[context]) | 把与表达式匹配的元素添加到jQuery对象中 |
children([expr]) | 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合 |
closest(expr,[context] | 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素 |
contents() | 查找匹配元素内部所有的子节点(包括文本节点和注释节点等) |
find(expr) | 搜索所有与指定表达式匹配的元素 |
next([expr]) | 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合 |
nextAll([expr]) | 查找当前元素之后所有的同辈元素 |
nextUntil([selector]) | 查找当前元素之后所有的同辈元素,直到遇到匹配的那个元素为止 |
offsetParent() | 返回第一个匹配元素用于定位的元素 |
parent([expr]) | 取得一个包含着所有匹配元素的唯一父元素的元素集合 |
parents([expr]) | 取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素) |
parentsUntil([selector]) | 查找当前元素的所有父辈元素,直到遇到匹配的那个元素为止 |
prev([expr]) | 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合 |
prevAll([expr]) | 查找当前元素之前所有的同辈元素 |
prevUntil([selector]) | 查找当前元素之前所有的同辈元素,直到遇到匹配的那个元素为止 |
siblings([expr]) | 取得一个包含匹配的元素集合中每一个元素的唯一同辈元素的元素集合 |
1、向下查找
DOM提供了三种访问后代节点的方法。
childNodes属性:可以遍历所有子节点
firstChild和lastChild属性:可以找到第一个和最后一个子节点。
getElementsByTagName()和getElementByID()方法获取后代元素
HTML5新添加了以下属性。
childElementCount:返回子元素的个数,不包括文本节点和注释
firstElementChild:指向第一个子元素
lastElementChild:指向最后一个子元素
2、向上查找
DOM使用parentNode属性可以访问父元素
3、向前查找
DOM使用previousSibling属性访问前一个兄弟节点,使用previousElementSibling属性访问前一个相邻兄弟元素
4、向后查找
DOM使用nextSibling属性访问后一个兄弟节点,H5新增nextElementSibling属性访问后一个相邻兄弟元素
三、串联
jQuery提供了两个串联方法:addBack()和end(),前者是把前后jQuery对象合并在一起,后者是返回到上一个jQuery对象。
在jQ1.8版本之前应该使用addSelf()方法。
eg:$("div").find("P").addBack().css({"width":"12px","height":"50px"})
$("div").find("p").css({"width":"12px"}).end().css("width":"12px","height":"50px"})