jQuery 操作DOM

最新推荐文章于 2022-12-22 23:23:59 发布

weixin_30919571

最新推荐文章于 2022-12-22 23:23:59 发布

阅读量85

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sun-kang/p/7542211.html

版权

上一篇jQuery笔记中介绍了选择器，会了选择器之后咱就可以操作DOM了，jQuery操作DOM也是很简单的。

1 获取

我们一般常用的获取是：

text()：获取/修改DOM元素中的文本内容。
html()：获取/修改DOM元素中的所有内容，包括HTML的标记。
val()：获取/修改表单字段的值。
attr()：获取/修改DOM元素的属性。

<!DOCTYPE html>
<html>
<head>
    <title>learn javascript</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <p id="p">段落中有<b>B标签</b></p>
    <p>表单字段：<input id="input" type="text" value="ohoho~~"></p>
    <a href="https://www.cnblogs.com" id="a">链接</a>
    <br />
    <button id="btn1">显示text</button>
    <button id="btn2">显示html</button>
    <button id="btn3">显示val</button>
    <button id="btn4">显示attr</button>
</body>
{{--js--}}
<script>
    $(document).ready(function() {
        $("#btn1").click(function (){
            alert("Text：" + $("#p").text());
        });

        $("#btn2").click(function () {
            alert("HTML：" + $("#p").html());
        });

        $("#btn3").click(function () {
            alert("Val：" + $("#input").val());
        });
        $("#btn4").click(function () {
            alert("Attr：" + $("#a").attr("href"));
        });
    })
</script>
</html>

2 设置

2.1 普通更改

<!DOCTYPE html>
<html>
<head>
    <title>learn javascript</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <p id="p">段落中有<b>B标签</b></p>
    <p>表单字段：<input id="input" type="text" value="ohoho~~"></p>
    <a href="https://www.cnblogs.com" id="a">链接</a>
    <br />
    <button id="btn1">更改text</button>
    <button id="btn2">更改html</button>
    <button id="btn3">更改val</button>
    <button id="btn4">更改attr</button>
</body>
{{--js--}}
<script>
    $(document).ready(function() {
        $("#btn1").click(function (){
            $("#p").text("新的文本内容");
        });

        $("#btn2").click(function () {
            $("#p").html("新的文本内容 并包含<b>b标签</b>");
        });

        $("#btn3").click(function () {
            $("#input").val("我们正在学jQuery");
        });
        $("#btn4").click(function () {
            $("#a").attr("href", "https://www.baidu.com");
        });
    })
</script>
</html>

2.2 添加回调

text()等方法可以接受回调函数，这个回调函数接受两个参数：第一个参数是当前元素的下标，第二个参数是修改之前的值。

<!DOCTYPE html>
<html>
<head>
    <title>learn javascript</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <p id="p">段落中有<b>B标签</b></p>
    <p>表单字段：<input id="input" type="text" value="ohoho~~"></p>
    <a href="https://www.cnblogs.com" id="a">链接</a>
    <br />
    <button id="btn1">更改text</button>
    <button id="btn2">更改html</button>
    <button id="btn3">更改val</button>
    <button id="btn4">更改attr</button>
</body>
{{--js--}}
<script>
    $(document).ready(function() {
        $("#btn1").click(function (){
            $("#p").text(function (i, oldValue) {
                return "这个标签的下标：" + i + "。 " + "旧的文本：" + oldValue;
            });
        });

        $("#btn2").click(function () {
            $("#p").html(function (i, oldValue) {
                return "这个标签的下标：" + i + "。 " + "旧的HTML：" + oldValue;
            });
        });

        $("#btn3").click(function () {
            $("#input").val(function (i, oldValue) {
                return i + "新的值：jQuery" + "旧的值：" + oldValue
            });
        });
        $("#btn4").click(function () {
            $("#a").attr("href", function (i, oldValue) {
                return oldValue + "/sun-kang/";
            });
        });
    })
</script>
</html>

2.3 attr属性设置多个值

        $("#btn4").click(function () {
            $("#a").attr({
                "href" : "https://www.baidu.com",
                "target" : "_blank"
            });
        });

3 插入元素

添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

3.1 append和prepend

<!DOCTYPE html>
<html>
<head>
    <title>learn javascript</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <p id="p">一些段落</p>
    <ul id="test">
        <li>jQuery</li>
    </ul>
    <button id="btn1">点击添加文本</button>
    <button id="btn2">点击列表项目</button>
</body>
{{--js--}}
<script>
    $(document).ready(function() {
        $("#btn1").click(function () {
            $("#p").prepend("<p> 添加一些文本 </p>");
        });
        $("#btn2").click(function () {
            var li = $("<li></li>").text("另一个新的列表项");
            $("#test").append("<li>新的列表项 </li>", li);
        });
    });
</script>
</html>

3.2 after和before

其实它和append和prepend是不同的，after和before呢是在元素的结束符的后面添加、而append和prepend实在元素的结束符里面添加。还是不明白的可以写一下以下代码，然后看HTML的源代码来看：

<!DOCTYPE html>
<html>
<head>
    <title>learn javascript</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <ul id="test">
        <li>jQuery</li>
    </ul>
    <button id="btn1">after</button>
    <button id="btn2">append</button>
</body>
{{--js--}}
<script>
    $(document).ready(function() {
        $("#btn1").click(function () {
            var li = $("<li></li>").text("另一个after");
            $("#test").after("<li>after </li>", li);
        });
        $("#btn2").click(function () {
            var li = $("<li></li>").text("另一个append");
            $("#test").append("<li>append </li>", li);
        });
    });
</script>
</html>

4 删除

jQuery提供两种删除方法：

empty()：清空一个元素的子元素，但是不删除元素。
remove()：删除一个元素以及其子元素，可给定选择器过滤。

4.1 remove

<!DOCTYPE html>
<html>
<head>
    <title>learn javascript</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<p id="p">一些段落<b>包含一个B标签</b></p>
<p class="paragraph">一些段落</p>
<p class="paragraph1">另一些段落</p>
<p class="paragraph">第三个段落</p>

<button id="btn1">点击删除文本</button>
<button id="btn2">点击删除文本(过滤)</button>
</body>
{{--js--}}
<script>
    $(document).ready(function() {
        $("#btn1").click(function () {
            $("#p").remove();
        });
        $("#btn2").click(function () {
            // 首先取到所有p标签 然后只删除class为paragraph的。
            $("p").remove(".paragraph");
        });
    });
</script>
</html>

4.2 empty

<!DOCTYPE html>
<html>
<head>
    <title>learn javascript</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="demo">
    <h1>一些内容</h1>
    <p>一些内容</p>
</div>

<button id="btn1">点击清空div</button>
</body>
{{--js--}}
<script>
    $(document).ready(function() {
        $("#btn1").click(function () {
            $(".demo").empty();
        });
    });
</script>
</html>

转载于:https://www.cnblogs.com/sun-kang/p/7542211.html

weixin_30919571

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 操作DOM

上一篇jQuery笔记中介绍了选择器，会了选择器之后咱就可以操作DOM了，jQuery操作DOM也是很简单的。1 获取我们一般常用的获取是：text()：获取/修改DOM元素中的文本内容。html()：获取/修改DOM元素中的所有内容，包括HTML的标记。val()：获取/修改表单字段的值。attr()：获取/修改DOM元素的属性。<...
复制链接

扫一扫