本文实例总结了框架常见的遍历数字正射影像图操作。分享给大家供大家参考，具体如下：

向上遍历数字正射影像图树。parent():返回被选元素的直接父元素，该方法只会向上一级对数字正射影像图树进行遍历。家长(:)返回被选元素的所有祖先元素，一直向上遍历，直到文档的根元素(html).parentsUntil(:)返回介于两个给定元素之间的所有祖先元素！DOCTYPE htmlhtmlheadstyle。祖先* { display : blockborder :2 px实心浅灰色；颜色：浅灰色；padd :5 pxmargin 336015 px }/style脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/script脚本$(文档)。ready(function(){ $(“span”)).父项()。css({'color':'red '，' border':'2px纯红' });});/script/head dydiv class=' predents ' div style=' width :500；div(曾祖父)ulul(祖父)丽丽（直接父)span span/span/Li/ul/div div style=' width :500 px；div(祖父)pp(直接父)span span/span/p/div/div/body/html运行结果：

parentsUntil()方法

$(文档)。ready(function(){ $(“span”)).parentsUntil(' div ')；});DOCTYPE htmlhtmlheadstyle。祖先* { display : blockborder :2 px实心浅灰色；颜色：浅灰色；padd :5 pxmargin 336015 px }/style脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/script脚本$(文档)。ready(function(){ $(“span”)).parentsUntil('div ').css({'color':'red '，' border':'2px纯红' });});/script/headbody class='祖先正文(增曾祖父)div style=' width:500pxdiv(曾祖父)ulul(祖父)丽丽（直接父)span/span/Li/ul/div/body/html运行结果：

向下遍历数字正射影像图树。儿童(:)返回被选元素的所有直接子元素，该方法只会向下一级对数字正射影像图树进行遍历查找(:)返回被选元素的后代元素，一直向下直到最后一个后代儿童()方法

！DOCTYPE htmlhtmlheadstyle。后代* { display : blockborder :2 px实心浅灰色；颜色：浅灰色；padd :5 pxmargin 336015 px }/style脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/script脚本$(文档)。ready(function(){$('div ')).儿童()。css({'color':'red '，' border':'2px纯红' });$(“div”).儿童('第一页')。css({'color':'red '，' border':'2px纯红' });});/script/head dydiv class='后代style=' width:500px'div(当前元素)p类='1'p(子)spanspan(孙)/span/pp class='2'p(子)spanspan(孙)/span/p/div/body/html运行结果：

查找()方法

！DOCTYPE htmlhtmlheadstyle。后代* { display : blockborder :2 px实心浅灰色；颜色：浅灰色；padd :5 pxmargin 336015 px }/style脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/script脚本$(文档)。ready(function(){$('div ')).查找(' span ').css({'color':'red '，' border':'2px纯红' });});/script/head dydiv class='后代style=' width:500px'div(当前元素)pP子跨度（孙)/span/ppp子跨度（孙)/span/p/div/body/html运行结果：

返回差异所有后代

$(文档)。ready(function(){$('div ')).find(' * ')；});水平遍历数字正射影像图树。兄弟():返回所选元素的所有兄弟。next():返回所选元素的下一个同级元素。nextAll():返回所选元素的所有后续同级元素。nextUntil():返回两个给定参数之间的所有后续兄弟元素。prev () :返回所选元素的前一个同级元素。prevAll():返回所选元素的所有先前同级元素。previtull():返回两个给定参数之间的所有先前的兄弟元素！DOCTYPE htmlhtmlheadstyle .姐弟* { display:blockborder:2px实心浅灰色；颜色：浅灰色；padding:5pxmargin:15px}/style script src=' http :http://libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/script script $(文档)。ready(function(){$('h2 '))。兄弟姐妹()。css({'color':'red '，' border':'2px纯红' })；});/script/head body class='姐弟' div div(父)PP/PS panspan/span H2 H2/H2 H3/h3pp/p/div/body/html running结果：

JQuery遍历过滤

first()方法：返回所选元素的第一个元素last()方法：返回所选元素的最后一个元素eq()方法：返回所选元素filter()中具有指定索引号的元素方法：允许自己指定一个标准。与此标准不匹配的元素将从集合中删除，匹配的元素将被返回。not()方法：返回所有不匹配的元素！DOCTYPE html htmlheadscript src=' http :http://libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/script script $(文档)。ready(function(){$('div p ')。第一个()。css('背景色'，'黄色')；});/script/headsdyh1我的心在北朝，/h1divp fields /p/divp red野花/p/divp玲珑剔透/p/body/html跑步成绩：

等式()方法的使用

！DOCTYPE html htmlheadscript src=' http :http://libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/script script $(文档)。ready(function(){$('p '))。等式(1)。css('背景色'，'黄色')；});/script/headsdyh1我的心在南朝，/h1p田野/pp红色野花/pp玲珑剔透/pp我爱你/p/身体/html跑步成绩：

使用filter()方法

！DOCTYPE html htmlheadscript src=' http :http://libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/script script $(文档)。ready(function(){$('p '))。筛选器('。intro’)。css('背景色'，'黄色')；});/script/headsdyh1我的心在南朝，/pp fields /pp class='intro '红草莓/pp class='intro '玲玲透明/pp我爱你/p/body/html运行结果：

感兴趣的朋友可以使用在线的HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun来测试上面的代码运行效果。

关于jQuery的更多信息，请查看本网站专题：《jQuery操作DOM节点方法总结》、《jQuery遍历算法与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》、《jQuery常用插件及用法总结》、0103010。

希望本文对大家的jQuery程序设计有所帮助。