(一)选择更多元素
add方法用于在jquery中选择更多的元素。
add方法支持的参数有add(selector),add(selector,context),add(HTMLElement),add(HTMLElement[]),add(jQuery)
$(document).ready(function () {
var labelElems = document.getElementsByTagName("label");
var jq = $("img[src*=daffodil]");
$("img:even").add("img[src*=primula]").add(jq).add(labelElems).css("border", "thick double red");
//add参数依次为selector、jQuery对象和HTMLElement
});
(二)限制选择范围
1）从结果集中获取某个元素
$(document).ready(function() {
var jq = $("label");
jq.first().css("border", "thick double red");//第一个label
jq.last().css("border", "thick double green");//最后一个label
jq.eq(2).css("border", "thick double black");//第二个label
jq.eq(-2).css("border", "thick double black");//倒数第二个label
});
2）从结果集中获取子集
$(document).ready(function() {
var jq = $("label");
jq.slice(0, 2).css("border", "thick double black");//索引为0和1的label
jq.slice(4).css("border", "thick solid red");//索引为4以后的label
});
3）过滤元素
filter方法可以将所有不满足某个指定条件的元素剔除，支持的参数有filter(selector),filter(HTMLElement),filter(jQuery),filter(function(index))
指定过滤器
$(document).ready(function() {
$("img").filter("[src*=s]").css("border", "thick double red");//选择器
var jq = $("[for*=p]" );
$("label").filter(jq).css("color", "blue");
var elem = document.getElementsByTagName("label")[1];
$("label").filter(elem).css("font-size", "1.5em");
$("img").filter(function(index) {
return this.getAttribute("src") == "peony.png" || index == 4;//如果函数返回true，则保留这个元素；否则删除这个元素
//注意：src返回绝对URL，getAttribute(0返回相对URL
}).css("border", "thick solid red")
});
not方法：其工作方式很大程度上和filter相反
$(document).ready(function() {
$("img").not("[src*=s]").css("border", "thick double red");
var jq = $("[for*=p]");
$("label").not(jq).css("color", "blue");
var elem = document.getElementsByTagName("label")[1];
$("label").not(elem).css("font-size", "1.5em");
$("img").not(function(index) {
return this.getAttribute("src") == "peony.png" || index == 4;
}).css("border", "thick solid red")
});
(三)以映射方式处理结果集-----每次只能返回一个元素
$(document).ready(function() {
$("div.dcell").map(function(index, elem) {
return elem.getElementsByTagName("img")[0];//返回每一个div.dcell中的img
}).css("border", "thick solid red");
$("div.dcell").map(function(index, elem) {
return $(elem).children()[1];//返回每一个div.dcell中的第二个子元素
}).css("border", "thick solid blue");
});
(四)检测结果集
is()方法用于检测jQuery中的某个对象是否满足测试条件，接收参数类型同filter，返回值为boolean
$(document).ready(function() {
var isResult = $("img").is(function(index) {
return this.getAttribute("src") == "rose.png";
});
console.log("Result: " + isResult);
});
(五)修改、回退结果集
1）end()---回退到上一个结果集
$(document).ready(function() {
//给第一个label设置border，给所有的lable设置字体
$("label").first().css("border", "thick solid blue")
.end().css("font-size", "1.5em");
});
2）addback()---返回当前结果集和上一个结果集的合集
$(document).ready(function() {
$("div.dcell").children("img").addBack().css("border", "thick solid blue");//给所有的dcell的div及其子img对象设置border
});
(六)访问DOM
1）访问后代元素
childern方法（children(), children(selector)），返回子元素
find方法(参数类型与filter一样，但不可以接受函数)，返回后代元素
二者返回的元素不会有重复的结果
2）使用find方法得到一个交集
$(document).ready(function() {
var jq = $("label").filter("[for*=p]").not("[for=peony]");
$("div.drow").find(jq).css("border", "thick solid blue");
});
2）访问祖先元素
得到父元素：
$(document).ready(function() {
$("div.dcell").parent().each(function(index, elem) {//得到每一个div.dcell的父元素
console.log("Element: " + elem.tagName + " " + elem.id);
});
$("div.dcell").parent("#row1").each(function(index, elem) {//得到每一个div.dcell的ID为row1的父元素
console.log("Filtered Element: " + elem.tagName + " " + elem.id);
});
});
选取祖先元素：
parents方法：可以厚的所有的祖先元素（不仅仅是父元素），可使用可选的选择器过滤
$(document).ready(function() {
$("img[src*=peony], img[src*=rose]").parents().each(function(index, elem) {//获得两个img元素的所有祖先元素
console.log("Element: " + elem.tagName + " " + elem.className + " " + elem.id);
});
});
parentsUtil(selector):沿着dom树向上查找，直到匹配参数选择器为止，注意选择结果不包含参数选择器，还可以提供第二个选择器可进一步过滤选择结果
选择第一个匹配的祖先元素：
closest(selector):用于匹配参数选择器的第一个祖先元素
offsetParent()：用于匹配祖先元素中最近的定位元素
3）访问兄弟元素
选择全部的兄弟元素：
siblings(selector):用于匹配所有参数选择器的兄弟元素
选择后面或前面的兄弟元素：
prev(selector) pervAll(selector)
next(selector) nextAll(selector)