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' });
    });
});

单击后效果图

章节全部代码

    
    


    
    
    
    

        
乒乓球
        
跳水
        
体操
        
女排
        
女足