jquery中parent()和parents()的区别.docVIP

parent 和parents 的区别 代码： script type text/javascript src ./jquery-1.8.2.js ul class level-1 li class item-i I li class item-ii II ul class level-2 li class item-a A li class item-b B ul class level-3 li class item-1 1 li class item-2 2 li class item-3 3 li class item-c C li class item-iii III var f; var g; f $ li.item-a .parent .map function return this.tagName; .get .join , ; /*使用了parent ，输出$ “li.item-a” 的父元素，即ul*/ g $ li.item-a .parents .map function return this.tagName; .get .join , ; /*使用了parents ，输出$ “li.item-a” 的祖先元素，即ul,li,ul,body,html*/ alert f ; alert g ; // $ li.item-a .parents .css color,red ; /*由于是使用了祖先元素parents ，则最高级别的body内的字体颜色都会变成红色*/ $ li.item-a .parent .css color,red ; /*由于是使用了父元素parent ，则只是上一级的ul（即level-2）内的字体变成红色*/ 代码分析： 【1】 f $ li.item-a .parent .map function return this.tagName; .get .join , ; /*使用了parent ，输出$ “li.item-a” 的父元素，即ul*/ alert f ; 效果： 可以知道$ “li.item-a” 的父元素是ul 【2】 g $ li.item-a .parents .map function return this.tagName; .get .join , ; /*使用了parents ，输出item-a的祖先元素，即ul,li,ul,body,html*/ alert g ; 效果： 可以知道$ “li.item-a” 的祖先元素是ul，li，ul，body，html 【3】 $ li.item-a .parents .css color,red ; 效果： 由于是使用了祖先元素parents ，则最高级别的body内的字体颜色都会变成红色 【4】 $ li.item-a .parent .css color,red ; 效果： 由于是使用了父元素parent ，则只是上一级的ul（即level-2）内的字体变成红色 其他定义方法： 【5】 $ .item-a .parents li .css color,red ; 效果： 从代码可以看出，由于item-a的li有关系的祖先元素只有上层的ul和li（class为item-ii，而item-i不是），所以只有class ”item-ii”范围内的字体颜色才是红色 【6】 $ .item-a .parent ul .css color,red ; 效果： item-a的父元素就是ul，而parent 里面的元素也为ul，即相同，所以即使parent 里面没有参数（即$ .item-a .parent .css color,red ;），效果也是一样 【7】 $ .item-a .parent li .css color,red ; 效果： item-a的父元素本应是ul，而parent 里面的元素却填了li，所以最终会没有效果