在DOM模型中，提供了parentNode、childNodes、firstChild、lastChild、lastChild、previousSibling和nextSibling等原生属性，用于实现DOM树的遍历而在jQuery中进一步对DOM操作封装和扩展，常见的jQuery遍历方式有以下4种：祖先遍历、后代遍历、同袍遍历和筛选遍历。
祖先遍历又称向上遍历，常用的方法有parent()、parents()、parentsUntil()，通过向上遍历DOM树的方式来查找元素的祖先元素。
1. parent()方法： parent()方法用于返回所匹配元素的直接父元素，并允许使用选择器进行筛选，其语法格式如下：
$(selector).parent([childSelector]) $(selector)：表示所匹配的元素childSelector（可选）：表示指定的选择器当parent()方法提供childSelector参数时，表示返回所匹配元素元素的父元素，并使用childSelector选择器进行筛选，否则返回所有匹配的父元素2. parents()方法： parents()方法用于返回所匹配元素的所有的祖先元素，并允许使用选择器进行筛选。其语法格式如下：
$(selector).parents([childSelector]) $(selector)：表示所匹配的元素childSelector（可选）：表示指定的选择器当parent()方法提供childSelector参数时，表示返回所匹配元素元素的父元素，并使用childSelector选择器进行筛选，否则返回所有匹配的父元素3. parentsUntil()方法： parentsUntil()方法用于返回两个给定元素之间的所有祖先元素，并允许使用选择器进行筛选，其语法格式如下：
$(selector).parentsUntil([chilSelector | element]) $(selector)：表示所匹配的元素当parentsUntils()方法没有参数时，将返回所匹配元素的所有祖先元素当方法提供参数childSelector时，将返回所匹配元素到childSelector选择器之间的所有祖先元素当方法提供参数element，将返回所匹配元素到element元素之间的所有祖先元素示例：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>祖先元素-jQuery遍历</title> <script type="text/javascript" src="js/jquery-1.x.js"> </script> <style type="text/css"> .imageDiv img{ width:100px;} </style> </head> <body> <div class="containerDiv"> <p> <span>T恤大全</span> </p> <hr/> <div class="imageDiv"> <span><img src="images/shirt.jpg" /></span> </div> <div> <span>顾客的需求是我们创意的源泉。</span> </div> <span></span> </div> <script type="text/javascript"> $(function (e) { //showParentNode(); showParentsNode(); //showParentsUntilNode(); }); function showParentNode(){ //返回span标签的直接父元素 var parentNode=$("span").parent(); //返回span标签的具有imageDiv样式的直接父元素 //var parentNode=$("span").parent(".imageDiv"); for(var p=0;p<parentNode.length;p++){ console.log("--------------------------------------"); console.log(parentNode[p].outerHTML); } } function showParentsNode(){ //返回span标签的所有的父元素 var parentsNode=$("span").parents(); //返回span标签的具有imageDiv样式的直接或间接父元素 //var parentsNode=$("span").parents(".imageDiv"); for(var p=0;p<parentsNode.length;p++){ console.log("--------------------------------------"); console.log(parentsNode[p].outerHTML); } } function showParentsUntilNode(){ //返回span标签的所有的父元素 //var parentsNode=$("span").parentsUntil(); //返回span标签到body元素之间的直接或间接父元素 //var parentsNode=$("span").parentsUntil("body"); //返回span标签到containerDiv选择器之间的直接或间接父元素 var parentsNode=$("span").parentsUntil(".containerDiv"); for(var p=0;p<parentsNode.length;p++){ console.log("--------------------------------------"); console.log(parentsNode[p].outerHTML); } } </script> </body> </html>