3、操作节点

最新推荐文章于 2022-07-02 19:03:31 发布

青叶的全栈之路

最新推荐文章于 2022-07-02 19:03:31 发布

阅读量546

点赞数

分类专栏： jQuery 文章标签： js jquery

本文链接：https://blog.csdn.net/dream_AI/article/details/106930227

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

操作节点

DOM操作
节点操作

一、DOM操作

1.1、内容操作

text()：设置或返回所选元素的文本内容（innerText）
html()：设置或返回所选元素的HTML内容（innerHTML）
val()：设置或返回表单的value值（value）

1.2、属性操作

通用属性操作

attr()：获取/设置元素的DOM属性（比如<input>的value、checked等）

取值的时候如果没有该属性，则返回空字符串。
removeAttr()：删除属性
prop()：获取/设置元素的固有属性（比如<table>标签的cellpadding、cellspacing、border等）

取值的时候如果没有该属性，则返回undefind
removeProp()：删除属性

<body>
    <input type="text" name="userName" id="test">
    <input type="text" value="密码" id="passwd">
</body>
<!--JS代码-->
<script>
    var test = $("#test");
    console.log(test.attr("name"));//获取name属性值
    test.attr("value","用户名");//设置value属性
    $("#passwd").removeAttr("value");//删除value属性
</script>

对class属性操作
- addClass()：添加class属性
- removeClass()：删除class属性
- toggleClass()：切换class属性。例：XX.toggleClass(“one”)，判断元素上是否存在属性class=“one”，如果存在则删除class属性，如果不存在则添加class="one"属性。

1.3、CSS操作

语法：jQuery对象.css("key","value")；

<body>
    <div id="div1">AAAA......</div>
</body>
<script>
    $(function(){
       $("#div1").css("color","red"); 
    });
    //运行结果：页面显示红色的 AAAA......
</script>

二、节点操作

2.1、基本操作

append()：末尾追加一个子节点
- A.append(B)，将B添加到A的内部，且处于末尾。
prepend()：开头插入一个子节点
- A.pripend(B)，将B添加到A的内部，且处于开头
after()：在其后添加一个兄弟节点
- A.after(B)，将B添加到A的后面，互为兄弟节点
before()：在其前添加一个兄弟节点
- A.before(B)，将B添加到A的前面，互为兄弟节点
clone()：复制一个该节点
- A.clone()，复制并返回一个A节点（jQuery对象）
remove()：删除该节点
- A.remove()，删除A节点
empty()：删除其所有子节点
- A.empty()，删除A节点的所有后代节点，但保留A节点及其属性。

青叶的全栈之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3、操作节点

操作节点DOM操作节点操作一、DOM操作1.1、内容操作text()：设置或返回所选元素的文本内容（innerText）html()：设置或返回所选元素的HTML内容（innerHTML）val()：设置或返回表单的value值（value）1.2、属性操作通用属性操作attr()：获取/设置元素的DOM属性（比如<input>的value、checked等）取值的时候如果没有该属性，则返回空字符串。removeAttr()：删除属性prop(
复制链接

扫一扫