2021-06-07-操作DOM

创建节点：

js: document.createElement(“tagName”);
利用原生的jS创建元素节点效率大于jQuery
jq: jQuery(html)=jQuery("<div…“)

插入节点

原生js: appendChild(newchild)
在指定的元素后面添加对应的newchild
jq: append(字符串)
向每个匹配的元素内部追加内容
jq: prepend(字符串)
向每个匹配的元素的最前面添加内容，前者是在内部的后面，后者是在内部的前面

删除节点

原生js:removeChild(node)
可以删除指定的节点及其包含所有的子节点
jQ:
remove()
从DOM中删除所有匹配的元素，连自身也进行删除
empty()
删除匹配的元素集合中所有的子节点，自身不进行删除

复制节点

原生js:
nodeObject.cloneNode(true/false)
当为true:把节点的自身以及所有的子节点都进行复制
当为false:只把自身进行复制
再利用追加的方法把元素追加到对应的节点上
jQ:
clone(boolean)
可以为true/false,用来设置是否复制事件处理函数等数据

包裹元素

jQ:
外包：wrap():
表示能再每一个匹配的元素上外层包裹上一个元素，可以是字符串或者是对象
内包：wrapInner()
表示能够在匹配元素的内容外（注意是元素内的内容被包裹）包裹上一个元素，参数可以是字符串或者对象
卸包：unwrap()
能在匹配元素的父级元素删除，与之对应的是wrap()

操作属性

jQ:
prop(name,value);
prop(name,function(){})
能为匹配的元素设置一个或者更多的属性,一般用于元素自身拥有的属性，参数为空时即为获得jQ对象的第一个匹配元素的属性
attr(name,value);
attr(name,function(){})
能为匹配的元素设置一个或者更多的属性,一般用于自定义属性较多，参数为空时即为获得jQ对象的第一个匹配元素的属性
删除属性：
removeProp();主要用来删除有prop()方法设置的属性集，参数也可以用于删除指定属性
同理使用：removeAttr()

操作类

addClass(className):
为指定的元素添加指定的类
removeClass(className):
将匹配元素的的类移除
toggleClass();
切换类，当匹配的元素没有该类那就添加，如果有那就移除
当参数为true时，只会添加类，当参数为false时，只会移除相关的类
hasClass():
判断是否含有该类，返回值是布尔值

操作内容

读写HTML内容：html()

参数	意味
空	获得匹配元素的内容值
html字符串	即为封装成为对应的HTML结构

读写文本：text()
不包含参数时，表示以字符串形式陬指定节点给下所有的文本内容
包含参数时，表示向指定节点下写入文本字符串 ，同时会覆盖该节点原来的所有的文本内容

读写值：val( )
读写指定表单对象包含的值
不包含参数时，表示将读取指定表单元素的值
包含参数的时候，表示向指定表单元素写入值

操作样式表

css()
用来设置单个或者多个样式
设置单个样式：css(“xx”,“xx”)；
设置多个样式：css({“xx”：“xx”，“xx” : “xx”);注意是以对象的形式修改，并且以键值对的形式，注意双引号，如果是数字值可以不加上双引号

绝对定位：offset()
可以用来获取相对于文档的定位，其中left的值是相对于左侧，top的属性是相对于头部的值

相对定位：position()
可以用来获取相对于带有定位的父盒子的定位，其中left的值是相对于父级元素左侧的值，top的属性是相对于父级元素头部的值

控制大小：width()/height()
不含有参数时，表示获得width的属性值
含有参数时，可以设置匹配元素的大小