jquery选择器（原创）&lt;二&gt;

2024-04-27 15:00:59

字体：大中小

来源：转载

供稿：网友

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>