二、jQuery选择器之层次选择器

jQuery选择器之层次选择器

1、 $(s1 s2) 派生

$('div span').css('color','blue');

2、 $(s1 > s2) 直接子元素

$('div span').css('color','blue');

3、 $(s1 + s2) 兄弟紧紧挨着的第一个s2节点

$('div + span').css('fontSize','30px');

4、 $(s1 ~ s2) 兄弟后续全部兄弟关系的s2节点

$('div ~ span').css('color','yellow');

完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <script type="text/javascript" src="./jquery-1.4.4.js"></script>
        <script type="text/javascript">
        function f1(){
            //① $(s1 s2) 派生
            $('div span').css('color','blue');    //刘备  阿斗  张飞
            //② $(s1 > s2) 直接子元素
            $('div > span').css('background-color','lightblue')     //刘备  张飞

            //③ $(s1 + s2) 兄弟 紧紧挨着的第一个s2节点
            $('div + span').css('fontSize','30px');     //吕布

            //④ $(s1 ~ s2) 兄弟 后续全部兄弟关系的s2节点
            $('div ~ span').css('color','yellow');     //吕布  曹操  孙权
        }
        </script>
        <style type="text/css">
        </style>
    </head>
    <body>
        <h2>jquery基本选择器(思想来之css样式选择器)</h2>
        <span>董卓</span>
        <div>
            <span>刘备</span>
            <p>
                <span>阿斗</span>
            </p>
            <span>张飞</span>
        </div>
        <span>吕布</span>
        <p>貂蝉</p>
        <span>曹操</span>
        <span>孙权</span>
        <div></div>
        <span>黄盖</span>
        <p><input type="button" value="触发" onclick="f1()" /></p>
    </body>
</html>