操作节点
- 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节点及其属性。