javascript代码实例教程-使用jQuery层次选择器选择元素

发布时间:2019-05-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-使用jQuery层次选择器选择元素脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

<htML XMlns="https://www.w3.org/1999/xhtml">
<head>

&nbsp;   <!--

1.层次选择器: 通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻、兄弟关系,通过其中基类关系可以方便快捷地定位元素


jQuery选择器详解

根据所获取页面中元素的不同,可以将jquery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中,在过滤选择器中有可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种

注:ancestor descendant与parent>child所选择的元素集合是不同的,前者的层次关系是祖先与后代,而后者是父子关系;另外,prev+next可以使用.next()代替,而PRev~siblings可以使用nextAll()代替。
-->
    <tITle></title>
    <!-- 使用jQuery层次选择器选择元素:在页面中,设置4块<p>标记,其中第二块<p>中,添加1个<span>标记,在该<span>标记中又新增1个<span>标记,全部元素初始值均为隐藏,然后通过jQuery层次选择器,显示相应的页面标记。-->
    <script src="jquery-1.9.1.js" tyPE="text/javascript"></script>
    <style type="text/css">
    body{font-Size:12px;text-align:center;}
    p,span{float:left;border:solid 1 px #ccc;margin:8px;display:none}
    .clsFraA{width:65px;height:65px}
    .clsFraP{width:45px;height:45px;background-color:#eee}
    .clsFraC{width:25px;height:25px;background-color:#ddd}
    </style>
    <script type="text/javascript">
        $(function () {
            $('#pMid').css('display', 'block');
            $('p span').css('display', 'block');   //显示p中所有的<span>标记
        })
        $(function () {
            $('#pMid').css('display', 'block');
            $('p>span').css('display', 'block');      //显示<p>中子<span>标记
        })
        $(function () {
            $('#pMid+p').css('display', 'block');     //显示ID为pMid元素后的下一个<p>
            $('#pMid').next().css('display', 'block');
        })
        $(function () {
            $('#pMid ~ p').css('display', 'block');     //显示ID为pMid元素后的所有<p>
            $('#pMid').nextAll().css('display', 'block');
        })
        $(function () {
            $('#pMid').siblings('p').css('display','block');  //显示ID为pMid元素的所有相邻<p>
        })
 
/* siblings()方法与选择器prev~siblings 区别在于,前者获取全部的相邻元素,不分前后,而后者仅获取标记后面全部相邻元素,不能获取前面部分*/


    </script>
</head>
<body>
    <p class="clsFraA">
        Left</p>
    <p class="clsFraA" id="pMid">
        <span class="clsFraP" id="Span1">
            <span class="clsFraC" id="Span2"> </span>
        </span>
    </p>
    <p class="clsFraA">
        Right_1</p>
    <p class="clsFraA">
        Right_2</p>
</body>
</html>

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-使用jQuery层次选择器选择元素全部内容,希望文章能够帮你解决javascript代码实例教程-使用jQuery层次选择器选择元素所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。