服务大众草根站长,在服务器上少走弯路!网址速记:主机测评->zhjcp.com(声母)
站内公告:祝大家新年快乐,龙年大吉!

使用jquery选择器如何获取父级元素、同级元素、子元素

时间:2024-02-23 14:13 分类:技术分享

一、下面推荐JQUERY的父,子,兄弟节点查找办法

查找$(jquery)的父节点


$(jquery).parent() 

查找$(jquery)的统统父元素,不限于父元素


$(jquery).parents()

查找$(jquery)的子节点,只会找子节点,不会找统统子节点


$(jquery).children()

查找$(jquery)上一个兄弟节点,不是统统的兄弟节点


$(jquery).prev()

查找$(jquery)之前的统统兄弟节点


$(jquery).prevAll()

查找$(jquery)的下一个兄弟节点,不是统统的兄弟节点


$(jquery).next()

查找$(jquery)之后的统统兄弟节点


$(jquery).nextAll()

查找$(jquery)兄弟姐妹节点,不分前后


$(jquery).siblings()

二、简易的测试代码

HTML
<div class="box">
    <div class="content" data-content="这是内容">
        <p>jquery上级,同级,属下</p>
        <ul class="li-parent">
            <li>jpg <input type="text" value="1"></li>
            <li>png <input type="text" value="2"></li>
            <li>pdf <input type="text" value="3"></li>
            <li>jpeg <input type="text" value="4"></li>
        </ul>
    </div>
</div>
Jquer——本案例中的$("li")即是$(jquery)
<script>
    $(function () {
        // 作用于li去查找
        $("li").click(function () {
            // 打印本身的文本内容
            console.log($(this).text()); 
            //打印父级ul的class属性的值:li-parent, parent这个例子里父级只能是指”ul“,
            console.log($(this).parent().attr("class"));   
            //打印父级class="content"的属性 data-content的值:这是内容, parents可以指ul,也可以指 class="content"的div, class="box"的div
            console.log($(this).parents(".content").data("content"));    
            //打印属下input的值
            console.log($(this).children("input").val());

            #其他的我就不演示,列位本身探索吧...
        })
    })
</script>

声明:

1、本博客不从事任何主机及服务器租赁业务,不参与任何交易,也绝非中介。博客内容仅记录博主个人感兴趣的服务器测评结果及一些服务器相关的优惠活动,信息均摘自网络或来自服务商主动提供;所以对本博客提及的内容不作直接、间接、法定、约定的保证,博客内容也不具备任何参考价值及引导作用,访问者需自行甄别。

2、访问本博客请务必遵守有关互联网的相关法律、规定与规则;不能利用本博客所提及的内容从事任何违法、违规操作;否则造成的一切后果由访问者自行承担。

3、未成年人及不能独立承担法律责任的个人及群体请勿访问本博客。

4、一旦您访问本博客,即表示您已经知晓并接受了以上声明通告。

本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 0人参与,0条评论
查看更多

【免责声明】:主机测评网所有内容均来自网络,安全性未知,使用前请自行甄别。因个人自愿选择使用本站介绍的资源造成的损失由使用者承担!本站不销售产品、不代购、不提供技术支持,仅分享信息,请遵纪守法、文明上网。

© 2012-2024  Powered by:thinkphp8  蜀ICP备18021953号-3

广告联系:QQ:1564952 注明:广告联盟评测网广告