• 在线客服

  • 扫描二维码
    下载博学谷APP

  • 扫描二维码
    关注博学谷微信公众号

  • 意见反馈

原创 jQuery选择集转移怎么操作?如何写代码?

发布时间:2022-01-04 16:17:09 浏览 1956 来源:博学谷 作者:小谷

    jQuery选择集转移怎么操作?如何写代码?选择集是通过$()方法获取到的所有标签的集合。选择集转移以选择的标签为参照获取转移后的标签。

    选择集转移学习目标:能够说出2种选择集转移方法

    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的元素

    选择集转移的示例代码:

    <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>

    jQuery选择集转移小结:

    prev() 表示获取上一个同级元素

    prevAll() 表示获取上面所有同级元素

    next() 表示获取下一个同级元素

    nextAll() 表示获取下面所有同级元素

    parent() 表示获取父元素

    children() 表示获取所有的子元素

    siblings() 表示获取其它同级元素

    find("选择器名称") 表示获取指定选择器的元素

    申请免费试学名额    

在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!

上一篇: jQuery选择集过滤的操作方法有几种? 下一篇: Jquery如何获取和设置元素内容?代码怎么写?

相关推荐 更多

热门文章

  • 前端是什么
  • 前端开发的工作职责
  • 前端开发需要会什么?先掌握这三大核心关键技术
  • 前端开发的工作方向有哪些?
  • 简历加分-4步写出HR想要的简历
  • 程序员如何突击面试?两大招带你拿下面试官
  • 程序员面试技巧
  • 架构师的厉害之处竟然是这……
  • 架构师书籍推荐
  • 懂了这些,才能成为架构师
  • 查看更多

扫描二维码,了解更多信息

博学谷二维码