jQuery学习笔记：DOM属性操作和DOM 的增删改

最新推荐文章于 2023-07-16 20:05:13 发布

Serein_Pt

最新推荐文章于 2023-07-16 20:05:13 发布

阅读量243

点赞数 1

分类专栏： JavaWeb 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_49019244/article/details/122070370

版权

JavaWeb 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

学习内容：DOM属性操作和DOM 的增删改

1. DOM属性操作

html() 它可以设置和获取起始标签和结束标签中的内容。跟 dom 属性 innerHTML 一样。
text() 它可以设置和获取起始标签和结束标签中的文本。跟 dom 属性 innerText 一样。
val() 它可以设置和获取表单项的 value 属性值。跟 dom 属性 value 一样

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            // 不传参数，是获取，传递参数是设置
            alert( $("div").html() );// 获取
            $("div").html("<h1>我是div中的标题 1</h1>");// 设置

            // 不传参数，是获取，传递参数是设置
            alert( $("div").text() ); // 获取
            $("div").text("<h1>我是div中的标题 1</h1>"); // 设置

            // 不传参数，是获取，传递参数是设置
            $("button").click(function () {
                alert($("#username").val());//获取
                $("#username").val("超级程序猿");// 设置
            });
        });
    </script>
</head>
<body>
    <div>我是div标签 <span>我是div中的span</span></div>
    <input type="text" name="username" id="username" />
    <button>操作输入框</button>
</body>
</html>

attr() 可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等等。attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            //attr
             alert( $(":checkbox:first").attr("name") ); // 获取
             $(":checkbox:first").attr("name","abc") ; // 设置
             alert( $(":checkbox:first").attr("name") );
        });
    </script>
</head>
<body>
<body>
    多选：
    <input name="checkbox" type="checkbox" checked="checked" value="checkbox1" />checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
</body>
</body>
</html>

在这里插入图片描述

prop() 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等

1、a.prop('id')  取出a的id值  
 2、a.prop('id',"bj")  设置a的id值为bj

2. DOM 的增删改

内部插入：
appendTo() ，创建一个节点，向已存在的节点追加一个子节点，并且是最后一个节点

$('<li>1</li>').appendTo('ul')

prependTo() ，父节点存在，父节点添加一个子节点，并且是第一个子节点

$('ul').prepend('<li>1</li>')

外部插入：
insertAfter() ，把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

$(A).after(B);//而是把A插入到B后面

insertBefore() ，把所有匹配的元素插入到另一个、指定的元素元素集合的前面

$(A).before(B);//把A插入到B前面

替换:
replaceWith() ，用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
一段HTML代码：

<div>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
</div>

替换第二段的节点与内容：

$("p:eq(1)").replaceWith('<a style="color:red">替换第二段的内容</a>')

结果：

<div>
    <p>第一段</p>
    <a style="color:red">替换第二段的内容</a>'
    <p>第三段</p>
</div>

replaceAll() ，用集合的匹配元素替换每个目标元素
.replaceAll()和.replaceWith()功能类似，但是目标和源相反，用上述的HTML结构，我们用replaceAll处理

$('<a style="color:red">替换第二段的内容</a>').replaceAll('p:eq(1)')

.replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别
.replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序
.replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用
.replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点

删除：
remove() ，删除选中元素及其子节点