一、创建节点
js创建节点:document.createElement("tagName");
window.onload=function(){
var div =document.createElement("div");
document.body.append(div);
}
1.JQuery创建节点:$(html)
JQuery简化了DOM操作,直接使用jQuery构造函数$()创建元素对象。
$(function(){
var $div=$("<div></div>");
$("body").append($div);
})
2.创建文本
JS: var div=document.createElement("div");
var text= docuemnt.createTextNode("dom");
div.appendChild(text);
JQuery: $(function(){
var $div=$("<div>DOM</div>");
$("body").append($div);
})
3.创建属性:
JS: div.setAttribute("title","盒子"); JQuery: var $div= $("<div title='盒子'>DOM</div>")
二、插入节点:
1 JQuery定义了4个方法用来在元素中插入内容
append() 向每个匹配的元素内部追加内容
appendTo()把所有匹配的元素追加到另一个指定的元素集合中,实际上,该方法颠倒了append()的用法
$(A).append(B)== $(B).appendTo(A);
prepend() 向每个匹配的元素内部前置内容
prependTo()同上颠倒了 prepend()方法
2,外部插入
after(content) after(function(index){})content 表示一个元素,HTML字符串,或者JQuery对象
函数表示一个返回HTML字符串的函数。这个字符串会被插入到每个匹配元素的后面
insertAfter(target)
before(content ) before(function(index){})
insertBefore(target)
三、删除节点
remove()删除匹配的所有节点
empty() 删除匹配节点中的所有子节点
detach()分离并返回该节点的DOM对象,注意返回的不是JQuery对象
demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
p{
background: yellow;
margin: 6px;
cursor: pointer;
}
p.off{
background: red;
}
</style>
<script type="text/javascript" src="../jquery-3.3.1.js" ></script>
<script type="text/javascript">
$(function(){
$("p").click(function(){
$(this).toggleClass("off");
});
})
var p;
$(function(){
$("button").click(function(){
if(p){
p.appendTo("body");
p=null;
}else{
p=$("p").detach();
}
});
})
</script>
</head>
<body>
<p>春眠不觉晓</p>
<div>处处蚊子咬</div>
<p>一咬一个包</p>
<button>再咬不得了</button>
</body>
</html>
四、复制对象
JS: div.cloneNode(true); JQuery: div.clone(true)
五、替换节点
JS:nodeObject.replaceChild(new_node,old_node);
JQuery:replaceWith(newContent/function);
六、包裹元素
1.外包:$("a").wrap("<li></li>");所有a标签用li包裹
2.内包:$("body").wrapInner("<ul></ul>")
3.总包:wrapAll() 4.卸包 unwrap()删除父级元素,位置不变
七、操作属性
1.prop({}) 为匹配的元素设置多个属性
2.attr()也能为匹配的元素设置一个或者多个属性
(1)访问属性
3.prop(propertyName)只能获得JQuery对象中的第一个匹配元素的属性值
4.attr() 同prop()如果想获取对个属性值,可以通过map或者each()循环
(2)删除属性
5.DOM:removeAttribute(name) 删除属性 JQuery :removeProp(propertyName);
八:操作类
1、添加类样式 addClass("");
2、删除类样式 removeClass();
3、切换类样式 toggleClass(classname) toggleClass(classname,switch); toggleClass(function(){},switch)
4、操作HTML $("p").html();
5、读写文本
text(textString)不设置索引的话会覆盖原来的所有文本内容
text(function(){index,text})
6 、读写值
val()不包含参数时,表示将读取指定表单元素的值,
val(value)表示向指定表单写入值
val(function({index,value}))
7、读写CSS样式
CSS(propertyName)CSS(propertyName,value)CSS(propertyName,function(){index,value}) CSS(map)
demo:CSS(''color,'red')
CSS({'color':'red','background-color':'black'})
九 、遍历文档
children()获取当前元素包含的所有子元素。
next()获取下一个同级元素
prev()获取上一个同级元素
parent()获取当前的父级元素