jQuery遍历节点树方法分析

本文实例讲述了jQuery遍历节点树方法。分享给大家供大家参考，具体如下：

demo.html

html health eta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title script src=' http : js/jquery-1。10 .1 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript '/！[CData[$(function(){ var $ body=$(' body ').儿童();var $p=$('p ').儿童();var $ul=$('ul ').儿童();alert($ body)。长度)；//正文元素下有2个子元素alert($ p . length)；//p元素下有0个子元素警报(ul)。长度)；//p元素下有3个子元素for(var I=0；i $ ul.lengthi ){ alert($ul[i]).innerHTML)；}});//]]/脚本/标题dyp title='选择你最喜欢的水果.'你最喜欢的水果是？/pul li title='苹果'苹果/li li title='橘子'橘子/li li title='菠萝'菠萝/li/ul/body/html效果图：

demo2.html

html health eta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title script src=' http : js/jquery-1。10 .1 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript '/！[CData[$(function(){ var $ P1=$(' p ').next()；警报($ P1)。html())；//紧邻p元素后的同辈元素var $ul=$('ul ').prev()；警报(ul)。html())；//紧邻保险商实验所元素前的同辈元素var $p2=$('p ').兄弟姐妹();警报($ p2。html())；//紧邻p元素的唯一同辈元素});//]]/脚本/标题dyp title='选择你最喜欢的水果.'你最喜欢的水果是？/pul li title='苹果'苹果/li li title='橘子'橘子/li li title='菠萝'菠萝/li/ul/body/html效果图：

demo3.html

html health eta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title script src=' http : js/jquery-1。10 .1 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript '/！[CDATA[$(函数(){ $(文档))。bind('click '，function (e) { $(e.target).最近的('里').css('color '，' red ')；})});//]]/脚本/标题dyp title='选择你最喜欢的水果.'你最喜欢的水果是？/pul li title='苹果'苹果/li li title='橘子'橘子/li li title='菠萝'菠萝/li/ul/body/html效果图：

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery遍历算法与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

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