jquery選擇器（原創(chuàng)）&lt;二&gt;

2024-04-27 15:00:59

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

jquery選擇器，選擇接著學(xué)：

前面學(xué)習(xí)了基本選擇器中的CSS選擇器，現(xiàn)在學(xué)層級(jí)選擇器：

1.子元素選擇器

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

$("parent>child")

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

<!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>標(biāo)題</label>        <input name="title" type="text"/>        <div>            <input name="content" type="text"/>        </div>    </form></body></html>

結(jié)果是;<input name="title" type="text"/>

2,后代元素選擇器

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

$("ancestor descendant")

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

<!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>

結(jié)果是：

3，緊鄰?fù)呍剡x擇器

緊鄰?fù)呍剡x擇器，用于匹配所有緊接在PRev元素后的next元素，語法格式：

$("prev+next")

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

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>緊鄰?fù)呍剡x擇器</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>

結(jié)果是：

4.相鄰?fù)呍剡x擇器

相鄰?fù)呍剡x擇器，用于選擇某元素后面的所有的同輩元素，語法格式：

$("prev~siblings")

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

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>相鄰?fù)呍剡x擇器</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>段落標(biāo)記</p></body></html>