jQuery16(内容过滤器,子元素过滤器)

最新推荐文章于 2017-04-12 10:52:39 发布

天赋进行时

最新推荐文章于 2017-04-12 10:52:39 发布

阅读量308

点赞数

分类专栏： JS-Dom-Jquery

本文链接：https://blog.csdn.net/xbc1213/article/details/50641374

版权

JS-Dom-Jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

内容过滤器

表示所有层内包含哈哈内容的层,注意,fontSize S大写

$('div:contains(哈哈)').css('fontSize', '50px');

空的层,注意,实例ie11及谷歌无效

$('div:empty').text('我也不为空啦');

所有层中包含a标签的

$('div:has(a)').css('backgroundColor', 'red');

父亲元素

$('div:parent').css('backgroundColor', 'red');

兄弟元素

$('div:sibling').css('backgroundColor', 'red');

完整实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //表示所有层内包含哈哈内容的层
                // $('div:contains(哈哈)').css('fontSize', '50px');
                //空的层,实测ie11及谷歌无效
                //div中没有任何元素(文本)
                //$('div:empty').text('我也不为空啦');
                //所有div中包含a标签的div背景为红色
                //$('div:has(a)').css('backgroundColor', 'red');
                //父亲元素 sibling兄弟元素
                $('div:parent').css('backgroundColor', 'red');
            });
        });
    </script>
    <style type="text/css">
        div
        {
            width: 300px;
            height: 300px;
            background-color: Green;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <input type="button" name="name" value="显示效果" id='btn' />
    <div>
        哈哈,天气好晴朗 <a href="#">蓝色</a>
    </div>
    <div>
    </div>
    <div>
        德玛西亚
    </div>
</body>
</html>

子元素过滤器

每个ul里的第一个li

$('ul li:first-child').css('backgroundColor', 'red');

每个ul里的最后一个li

$('ul li:last-child').css('backgroundColor', 'red');

注意,如果这里面的没有-child,则指的只有一个

每个ul中只有一个li的

$('ul li:only-child').css('backgroundColor', 'red');

例外nth-child详见完整代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        //hr标签,下划线
        $(function () {
            $('#btn').click(function () {
                //每个ul里面的第一个li
                // $('ul li:first-child').css('backgroundColor', 'red');
                //每个ul里面的最后一个li
                // $('ul li:last-child').css('backgroundColor', 'red');
                //每个ul中只有一个li元素
                $('ul li:only-child').css('backgroundColor', 'red');
                //nth-child 对比eq来理解,eq()值匹配一个,nth-child()为每个父元素都
                //要匹配一个子元素
                /*
                nth-child(index) 注意index从1开始
                nth-child(even)
                nth-child(odd)
                nth-child(3n),选取3的倍数+1的元素
                nth-child(3n+1) 满足3的倍数+1的元素
                children() 方法,只考虑子元素,不考虑后代元素
                */
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="显示效果" id='btn' />
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <hr color='gray' />
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
        <li>55</li>
    </ul>
    <hr color='gray' />
    <ul>
        <li>31</li>
    </ul>
</body>
</html>

天赋进行时

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery16(内容过滤器,子元素过滤器)

内容过滤器表示所有层内包含哈哈内容的层,注意,fontSize S大写$('div:contains(哈哈)').css('fontSize', '50px');空的层,注意,实例ie11及谷歌无效$('div:empty').text('我也不为空啦');所有层中包含a标签的$('div:has(a)').css('backgroundColor', 'red');父亲元素$('div:paren
复制链接

扫一扫