jQuery-----选择元素

标签：ice   ros   gre   lin   --   att   结果   on()   css   

(一)选择更多元素

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)

jQuery-----选择元素

标签：ice   ros   gre   lin   --   att   结果   on()   css   

原文地址：http://www.cnblogs.com/gdy1993/p/7139046.html