jquery選擇器（原創）二 - caofangsheng－IT工程師數位筆記本

文章出處

jquery選擇器，選擇接著學：

前面學習了基本選擇器中的CSS選擇器，現在學層級選擇器：

1.子元素選擇器

子元素選擇器，用于在給定的父元素下，查找這個父元素下面的所有的子元素，語法格式，如下：

$("parent>child")

其中，參數parent是任意有效的選擇器；child也是一個選擇器，并且它是第一個選擇器的子元素，用于篩選子元素。兩個參數之間，用“>”分隔：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jquery子元素選擇器</title>
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script type="text/javascript">

        $(function () {
            $("form>input");

        });
    </script>
</head>
<body>
    <form>
         <label>標題</label>
        <input name="title" type="text"/>
        <div>
            <input name="content" type="text"/>
        </div>
    </form>
</body>
</html>

結果是;<input name="title" type="text"/>

2,后代元素選擇器

后代元素選擇器，用于在給定祖先元素下匹配所有的后代元素，語法格式：

$("ancestor descendant")

其中，參數ancestor是任意有效的選擇器，descendant也是一個選擇器，用于篩選后代元素，后代元素可能是ancestor元素的子元素，孫元素，重孫元素等，兩個參數之間用空格分隔。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>后代元素選擇器</title>
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $("form input");

        });

    </script>
</head>
<body>
    <form>
         <label>label</label>
        <input name="news" type="text" value="text1"/>
        <label>label3</label>
        <div>
            <label>label2</label>
            <input type="text" name="news2" value="text1"/>
        </div>
    </form>
</body>
</html>

結果是：

3，緊鄰同輩元素選擇器

緊鄰同輩元素選擇器，用于匹配所有緊接在Prev元素后的next元素，語法格式：

$("prev+next")

其中，prev（selector）表示任意有效的選器器；next(selector)表示一個有效選擇器并且緊接著第一個選擇器，兩者用“+”分隔.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>緊鄰同輩元素選擇器</title>
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script type="text/javascript">
        $(function () {
            $("div+span")

        });

    </script>
</head>
<body>
    <form>
        <div>div1</div>
        <span>span1</span>
        <div>
            <span>span2</span>
        </div>
        <span>span3</span>
    </form>
</body>
</html>

結果是：

4.相鄰同輩元素選擇器

相鄰同輩元素選擇器，用于選擇某元素后面的所有的同輩元素，語法格式：

$("prev~siblings")

其中，參數prev表示任意有效的選擇器，siblings也是一個選擇器，用于篩選prev后面的所有同輩元素，兩者之間用破浪線（~）分隔，

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>相鄰同輩元素選擇器</title>
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    
    <script type="text/javascript">

        $(document).ready(function () {
            $("div~input").css("border", "2px solid blue");
            $("input~p").css("color", "red");

        });
    </script>
    <style type="text/css">
        p 
        {
            color:blue;
            font-size:14px;
        }
        div, input 
        {
            border:1px solid red; width:200px;height:100px;
        }

    </style>
</head>
<body>
    <div></div>
    <input type="text" value=""/>
    <input type="text" value=""/>
    <p>段落標記</p>
</body>
</html>