jQuery基础：DOM遍历及访问

2020-07-14 21:00:31

一、DOM遍历

jQuery 中提供了很多方法，有了这些方法，我们可以很容易地对DOM树进行各种操作。

下面的示例展示了.next()和.nextAll()的用法
示例：

<!DOCTYPE html>
<html>
<head>
    <title>next()和nextAll()</title>
    <style>
        tr {
            background-color: #fff;
        }

        .alt {
            background-color: #ccc;
        }

        .highlight {
            font-weight: bold;
            font-style: italic;
        }
    </style>

    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('tr:nth-child(odd)').addClass('alt');
            $('td:contains(John)').nextAll().addClass('highlight');
            $('td:contains(Rose)').next().addClass('highlight');
        });
    </script>

</head>
<body>
    <div id="container">
        <h2>Personal Infomation 1</h2>
        <table>
            <tr>
                <td>James</td>
                <td>20</td>
                <td>USA</td>
            </tr>
            <tr>
                <td>John</td>
                <td>18</td>
                <td>USA</td>
            </tr>
            <tr>
                <td>Rose</td>
                <td>20</td>
                <td>UK</td>
            </tr>
            <tr>
                <td>Black</td>
                <td>19</td>
                <td>AU</td>
            </tr>
            <tr>
                <td>Bruce</td>
                <td>19</td>
                <td>AU</td>
            </tr>
        </table>
        <h2>Personal Infomation 2</h2>
        <table>
            <tr>
                <td>James</td>
                <td>20</td>
                <td>USA</td>
            </tr>
            <tr>
                <td>John</td>
                <td>18</td>
                <td>USA</td>
            </tr>
            <tr>
                <td>Rose</td>
                <td>20</td>
                <td>UK</td>
            </tr>
            <tr>
                <td>Black</td>
                <td>19</td>
                <td>AU</td>
            </tr>
            <tr>
                <td>Bruce</td>
                <td>19</td>
                <td>AU</td>
            </tr>
        </table>
    </div>
</body>
</html>

二、连缀

在jQuery中，连缀可以对取得的多个元素集合执行多次操作。
如：

$('td:contains(Henry)').parent().children().addClass('class');

三、访问DOM元素

jQuery提供了.get()方法来访问元素。
如：
要访问jQuery对象引用的第一个DOM元素，可以使用.get(0)。
如果想知道带有id="my-element"属性的元素的标签名，则应该：

var myTag = $('#my-element').get(0).tagName;

为了进一步简化这些代码， jQuery还为.get()方法提供了一种简写方式。
比如，可以将$('#my-element').get(0)简写为：

var myTag = $('#my-element')[0].tagName;