jquery选择器（原创）<二>

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>

变化前：

变化后：

好了，时间不早了，今天就学到这～～～。

巴特西

jquery选择器（原创）<二>

最新文章

热门文章