jquery层级选择器

日期:2018-02-25 15:30:40 章节:  jquery选择器

jquery层级选择器主要有一下几个:

(1)匹配祖先元素下所有后代,采用空格  例如$("#idBox p")

(2)匹配父元素下所有子元素,例如“父元素>子元素”

(3)匹配上一个元素后面的下一个元素,必须挨着的元素,例如“prev+next”

(4)匹配上一个元素后面所有平辈元素,例如“prev~next”

首先,新建一个页面demo2.html,引入jquery文件

<head>
    <meta charset="UTF-8">
    <title>www.isoftvip.com</title>
    <script src="js/jquery-3.2.1.min.js"></script>
</head>

写好待测试用的html标签元素

<div id="idBox">
    <div id="idSonBox">
        <p>文章内容1</p>
        <p>文章内容2</p>
    </div>
    <p>文章内容3</p>
</div>
<div>刘德华</div>
<div>王力宏</div>

在body结尾处,写js脚本代码如下:

<script>
    $(function () {
        //匹配祖先元素下所有后代
        $("#idBox p").css('color','red');
        //匹配父元素下所有子代
        $("#idBox > p").css('font-size','22px');
        //匹配上一个元素的下一个元素
        $("#idBox + div").css('color','blue');
        //匹配所有平辈元素
        $("#idBox ~ div").css('font-size','28px');
    });
</script>

这里做了如下操作:

(1)将id为idBox下的所有p元素内容颜色变为红色

(2)将id为idBox子代p文字大小改为22px,这里可以看出与(1)的区别

(3)将刘德华 字颜色变为蓝色

(4)将id为idBox的所有平辈元素内容字体大小变为28px

最后的效果就如下图所示:

TIM截图20180225154643.png