jquery-dom_jQuery DOM

cumt30111

于 2020-08-02 09:37:21 发布

阅读量120

点赞数

文章标签：列表 java js jquery javascript ViewUI

原文链接：https://www.includehelp.com/code-snippets/jquery-dom.aspx

版权

jquery-dom

Let's create a simple application that displays a list of your upcoming exams,

让我们创建一个简单的应用程序，其中显示您即将参加的考试的列表，

index.html:

index.html：

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <title>schedule</title>
    <style>
        body {
            background: linear-gradient(#ffe57f, #ffc400);
        }
        
        .card-image img {
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<script>
    var id = 0;
</script>

<body>
    <div class="container">
        <h2 class="center title">Exam Schedule</h2>
        <div class="container">
            <ul class="collection center #ffff8d" id="subject-list">
                <h4 class="subject-name"><li class="collection-item ">English</li></h4>
                <h4 class="subject-name"><li class="collection-item ">Maths</li></h4>
                <h4 class="subject-name"><li class="collection-item ">Physics</li></h4>
                <h4 class="subject-name"><li class="collection-item ">Chemistry</li></h4>

            </ul>
        </div>

    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="index.js"></script>
</body>

</html>

Output

输出量

Let's see how the DOM Tree would like for this application?

让我们看看该应用程序的DOM树如何？

<h2>
    <div>
        <ul>
        <h4> <h4>	<h4>	<h4>
        <li> <li> <li> <li>

<h2> is the sibling of the <div> which has a children <ul> which has 4 children, the <h4> each containing a child <li>. All these <h4> share a sibling relationship with each other. Let's see how to traverse the DOM using this DOM relationship?

<h2>是<div>的同级项，它有一个子级<ul> ，有四个子级，每个<h4>都包含一个子级<li> 。所有这些<h4>彼此共享同级关系。让我们看看如何使用这种DOM关系遍历DOM？

    console.log($('h2')[0]);

Output

输出量

    <h2 class="center title">Exam Schedule</h2>

We can traverse from the title to our <ul> by calling the sibling method,

我们可以通过调用同级方法从标题移至<ul> ，

    console.log($('h2').siblings()[0]);

Output

输出量

    <div class="container">
        ...
    </div>

The siblings() method gets us all the siblings of that element which is a single <div> element.

siblings()方法为我们获取该元素的所有同级元素，该元素是单个<div>元素。

    console.log($('h2').siblings().children()[0]);

Output

输出量

    <ul class="collection center #ffff8d" id="subject-list">
        ...
    </ul>

The children() method returns us all the children of that element. So now we're on the <ul> and we can further access the <h4> by calling the children method again.

children()方法将向我们返回该元素的所有子级。因此，现在我们在<ul>上，可以通过再次调用children方法来进一步访问<h4> 。

    console.log($('h2').siblings().children().children()[0]);

Output

输出量

    <h4 class="subject-name"><li class="collection-item ">English</li></h4>

Notice how we only get the first child element because this method only taverses down the DOM one level. If we target the <ul> directly we can get all the children using the children() method,

请注意，我们如何仅获取第一个子元素，因为此方法仅将DOM停在一个级别上。如果我们直接定位<ul> ，我们可以使用children()方法获取所有子级，

    console.log($('#subject-list').children());

Output:

输出：

	k.fn.init(4) [h4.subject-name, h4.subject-name, h4.subject-name, h4.subject-name, prevObject: k.fn.init(1)]
	0: h4.subject-name
	1: h4.subject-name
	2: h4.subject-name
	3: h4.subject-name
	length: 4
	prevObject: k.fn.init [ul#subject-list.collection.center.#ffff8d]
	__proto__: Object(0)

Let's say you're done with the Maths paper and want to remove this item from the list.

假设您已完成“数学”论文，并希望将其从列表中删除。

    $('#subject-list').children()[1].remove();

Output

输出量

You can remove an element from the DOM using the remove() method.

您可以使用remove()方法从DOM中删除元素。

    console.log($('#subject-list').parent());

Output

输出量

    k.fn.init [div.container, prevObject: k.fn.init(1)]

Thus we can traverse upwards the DOM using the parent() method.

因此，我们可以使用parent()方法向上遍历DOM。

    console.log($('#subject-list').children().first()[0]);
    console.log($('#subject-list').children().last()[0]);

Output

输出量

    <h4 class="subject-name"><li class="collection-item ">English</li></h4>
    <h4 class="subject-name"><li class="collection-item ">Chemistry</li></h4>

We can also use some filter methods like first() and last() to get the first and last elements of that collection.

我们还可以使用一些过滤方法，例如first()和last()来获取该集合的第一个和最后一个元素。

翻译自: https://www.includehelp.com/code-snippets/jquery-dom.aspx

jquery-dom

cumt30111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫