JQuery选择器

  JQuery选择器API允许你使用选择器从DOM中选择一个或多个元素,与CSS中所使用的选择器类似。

  在CSS中,可以通过编写一个样式应用于一个或多个元素。

        body table tbody tr th

        {

            background-color: Blue;

        }

  使用选择器API,在JQuery使用选择器API是非常简单的。首先,我们必须知道:JQuery的一切功能都来源于一个非常简单的称为$的命名对象。美元符号既代表了一个方法,也同时代表了一个对象。

View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="JS/jquery-1.6.1.min.js" type="text/javascript"></script>

    <style type="text/css">

        .test

        {

            background-color: Green;

        }

    </style>

    <script type="text/javascript">

        function test() {

            $('tr#Tr1').addClass("test");

        }

    </script>

</head>

<body>

    <table>

        <tbody>

            <tr>

                <th>

                    姓名

                </th>

                <th>

                    性别

                </th>

                <th>

                    学号

                </th>

            </tr>

            <tr id="Tr1" >

                <td>

                    1

                </td>

                <td>

                    2

                </td>

                <td>

                    3

                </td>

            </tr>

            <tr id="Tr2">

                <td>

                    4

                </td>

                <td>

                    5

                </td>

                <td>

                    6

                </td>

            </tr>

            <tr id="Tr3">

                <td>

                    7

                </td>

                <td>

                    8

                </td>

                <td>

                    9

                </td>

            </tr>

        </tbody>

    </table>

    <button id="btn" onclick="test()">

        test

    </button>

</body>

</html>

find()方法

        function test() {

            $('table').find('tr').addClass("test");

        }

siblings()方法查找当前元素的所有兄弟节点

        function test() {

            $('table tr td').siblings().addClass("test");

        }

find()方法和siblings()方法比较类似,但find()范围大些,siblings()只能找到同级节点。

next()方法,指定元素的下一个兄弟节点

        function test() {

            $('tr#Tr1').next().addClass("test");

        }

prev()方法,指定元素的上一个兄弟节点

        function test() {

            $('tr#Tr1').prev().addClass("test");

        }

nextAll()方法,指定元素的下面所有兄弟节点

        function test() {

            $('tr#Tr1').nextAll().addClass("test");

        }

prev()All()方法,指定元素的上面所有兄弟节点,我就不写例子了

parents()方法和parent()方法选取祖先元素

  parents()方法的方法来选取一个元素的所有祖先元素,其中可以包含一直回溯到根元素的所有祖先元素。如果只想取当前元素的直接父元素,可以使用parent()方法

运行下面2个例子,你回找到不同之处

        function test() {

            $('table tr td').parent().addClass("test"); 

        }
        function test() {

            $('table tr td').parents().addClass("test");

        }

children()选取一个元素的子元素

        function test() {

            $('table tr').children('th').addClass("test");

        }

not()反选元素

        function test() {

            $('table tr').not('tr#Tr1').addClass("test");

        }

slice()选取区域,slice()方法是从该指定参数的编号位置开始,直到结束的所有元素,编号从0开始

        function test() {

            //$('table tr').slice(0,1).addClass("test");

            $('table tr').slice(1).addClass("test");

        }

eq()方法支持在一个结果集中,基于元素位置来选取元素

        function test() {

            $('table tr').eq(0).addClass("test");

        }

 

 

 

你可能感兴趣的:(jquery选择器)