前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery选择集转移

jQuery选择集转移

原创
作者头像
落雨
发布2022-03-01 12:02:38
30.9K0
发布2022-03-01 12:02:38
举报
文章被收录于专栏:落雨的专栏

1. 选择集转移介绍

选择集转移就是以选择的标签为参照,然后获取转移后的标签

2. 选择集转移操作

  • $('#box').prev(); 表示选择id是box元素的上一个的同级元素
  • $('#box').prevAll(); 表示选择id是box元素的上面所有的同级元素
  • $('#box').next(); 表示选择id是box元素的下一个的同级元素
  • $('#box').nextAll(); 表示选择id是box元素的下面所有的同级元素
  • $('#box').parent(); 表示选择id是box元素的父元素
  • $('#box').children(); 表示选择id是box元素的所有子元素
  • $('#box').siblings(); 表示选择id是box元素的其它同级元素
  • $('#box').find('.myClass'); 表示选择id是box元素的class等于myClass的元素

选择集转移的示例代码:

代码语言:javascript
复制
<script>
    $(function(){
        var $div = $('#div01');

        $div.prev().css({'color':'red'});
        $div.prevAll().css({'text-indent':50});
        $div.next().css({'color':'blue'});
        $div.nextAll().css({'text-indent':80});
        $div.siblings().css({'text-decoration':'underline'})
        $div.parent().css({'background':'gray'});
        $div.children().css({'color':'red'});
        $div.find('.sp02').css({'font-size':30});
    });  
</script>

<div>
    <h2>这是第一个h2标签</h2>
    <p>这是第一个段落</p>
    <div id="div01">这是一个<span>div</span><span class="sp02">第二个span</span></div>
    <h2>这是第二个h2标签</h2>
    <p>这是第二个段落</p>
</div>

3. 小结

  • prev() 表示获取上一个同级元素
  • prevAll() 表示获取上面所有同级元素
  • next() 表示获取下一个同级元素
  • nextAll() 表示获取下面所有同级元素
  • parent() 表示获取父元素
  • children() 表示获取所有的子元素
  • siblings() 表示获取其它同级元素
  • find("选择器名称") 表示获取指定选择器的元素

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 选择集转移介绍
  • 2. 选择集转移操作
    • 选择集转移的示例代码:
    • 3. 小结
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档