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

来源：互联网发布：阿里云金融云vpc专线编辑：程序博客网时间：2024/06/06 09:43

内容过滤器

表示所有层内包含哈哈内容的层,注意,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