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

单击后效果图

章节全部代码




    
    


    
    
    
    
  • 乒乓球
  • 跳水
  • 体操
  • 女排
  • 女足
展开阅读全文

更新时间:2024-09-05

标签:链式   元素   方法   下标   节点   对象   背景   案例   兄弟   页面

1 2 3 4 5

上滑加载更多 ↓
推荐阅读:
友情链接:
更多:

本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828  

© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号

Top