jQuery通过jquery的方法获取元素279

　　概述
　　获取页面元素不仅可以通过jQuery的选择器/过滤器得到,在jQuery内部还有几个不错的方法用于获取指定的元素,通过一个小案例运用这些方法 获取方法
　　1 parent()/parents() 获取当前元素的父元素/获取当前元素的父辈,爷辈..直至html节点 $(function () {     console.log($(＂#sp3＂).parent());//#dv2     //由内而外直至根节点的html     console.log($(＂#sp3＂).parents());//#dv2,#dv1,body,html });
　　2 find(selector) 获取一个元素的某种所有子元素,与类似于 $(‘ul li’)
　　注意:获取的元素在集合中的位置(下标),不再是Dom树中由外而内的先子后孙排序$(function () {        console.log($(＂#dv1＂).find(＂span＂));//sp1,sp3,sp2 });
　　3  children(selector) 获取一个元素的直接子元素,与类似于 $(‘ul > li’) $(function () {        console.log($(＂#dv1＂).children(＂span＂));//sp1,sp2 });
　　4  siblings() 获取当前元素的所有兄弟元素,与$(＂ul~li＂)有些不同 $(function () {        console.log($(＂#sp1＂).siblings());//dv2,sp2 });
　　5  prev()/prevAll() 获取当前元素紧挨的一个兄弟元素/获取当前元素前面的所有兄弟元素 $(function () {        console.log($(＂#sp2＂).prev());//dv2     console.log($(＂#sp2＂).prevAll());//dv2,sp1  });
　　6  next()/nextAll() 获取当前元素的下一个兄弟元素/获取当前元素后面所有的兄弟元素 $(function () {  console.log($(＂#sp1＂).next());//dv2 console.log($(＂#sp1＂).nextAll());//dv2,sp2 });案例
　　页面中有一个ul列表,实现要求:
　　1)当鼠标移动到某个li上的时候指针变为小手并且改变其背景颜色变红 $(function(){   $(＂ul li＂).mouseover(function () {      //实现思路:自己变红,其余兄弟节点设置为默认色     //this表示当前触发事件的js对象       //$(this)包装为JQ对象,否则无法使用JQ的css方法     $(this).css({ ＂background-color＂: ＂red＂, ＂cursor＂: ＂pointer＂ })     $(this).siblings().css(＂background-color＂, ＂white＂);         //还可以使用链式编程,之后说说其原理     //$(this).css({ ＂background-color＂: ＂red＂, ＂cursor＂: ＂pointer＂ }).siblings().css(＂background-color＂, ＂white＂);    }); });
　　2)当点击某个li时自己变黄,让该li之前的所有li背景色变红,之后的所有li背景色变蓝。 $(function(){   $(＂ul li＂).click(function () {     //自己变为黄色     $(this).css({ ＂background-color＂: ＂yellow＂, ＂cursor＂: ＂pointer＂ });     //之前所有兄弟元素变为红色     $(this).prevAll().css({ ＂background-color＂: ＂red＂ });     //之后所有兄弟元素变为蓝色     $(this).nextAll().css({ ＂background-color＂: ＂blue＂ });     }); });
　　单击后效果图
　　章节全部代码                                  
         
乒乓球
         
跳水
         
体操
         
女排
         
女足