DOM操作分为：DOM核心、HTML-DOM、CSS-DOM
1.节点操作
查找
查找元素节点：jquery选择器
查找属性节点：节点.attr(“”)方法，参数为要查询的属性的名字
创建
创建元素节点：$("html")方法，参数为HTML标记字符串，如：<p></p>
注意：（1）动态创建的新元素节点不会被自动添加到文档中，需要用其他方法插入文档中（2）创建元素时注意标签闭合，可以用$("<p></p>")或$("</p>")
创建文本节点：$("<p>文本内容</p>")方法
创建属性节点：$("<p 属性名='属性值'></p>")方法
插入节点
（1）$("A").append("B")方法：将B节点插入到A节点内部的后位 append：末尾附加
$("B").appendTo("A")方法：
（2）$("A").prepend("B")方法：将B节点插入到A节点内部的前置位置
$("B").prependTo("A")方法：
（3）$("A").after("B")方法：将B节点插到A节点外部之后
$("B").insertAfter("A")方法：
（4）$("A").before("B")方法：在B节点插入A节点外部之前
$("B").insertBefore("A")方法：
删除节点
（1）remove()方法：删除某个节点及该节点包含的所有后代节点，返回值是一个指向已被删除的节点的引用，可再次使用
可通过传参选择性的删除节点
（2）detach()方法：该方法不会把匹配元素从jquery对象中删除，可再次使用
和remove的区别：所有绑定的事件、附加的数据等都都会保留下来
相同点：remove和detach都不会把匹配元素从jQuery对象中删除，可再次使用
（3）empty()方法：清空某个节点中的所有后代节点，即：清空后只剩下HTML标记，不可再次使用
复制节点
clone()方法：复制的新元素不具有任何行为
传入参数true可使复制元素的同时复制元素中的绑定事件
替换节点
$("A").replaceWith("B")方法：将所有匹配元素替换成指定的HTML或DOM元素，即：用B节点替换A节点
$("B").replaceAll("A")方法
包裹节点
（1）$("A").wrap("B")方法：将所有的元素进行包裹，用B将A包裹起来
（2）$("A").wrapAll("B")方法：将符合的每个元素进行单独包裹
（3）$("A").wrapInner("B")方法：用B节点将A节点的子内容（包括文本节点）包裹起来
2. 属性操作
获取属性：attr()方法— — 参数为属性名
设置属性：attr()方法— — 参数为“属性名”，“属性值”；或“属性名“：”属性值”，“属性名”：“属性值”
注意：有些方法既能获取元素的值，也能设置元素的值——html()、text()、height()、width()、val()、css()、attr()
删除属性：removeAttr()方法
3.样式操作
获取样式和设置样式（获取和设置class属性）：attr()方法
追加样式：addClass(“class类名”)方法
移除样式：removeClass()方法，参数为class名时，移除相应的样式；参数为空时，移除所有class的值
切换样式：toggle(行为1，行为2)方法— —控制行为的重复切换
toggleClass("class名")方法— —样式的重复切换。如果类名存在删除它，不存在添加它。
判断是否含有某个样式：hasClass("class")方法，如果有true，否则返回false
4.获取和设置HTML、文本和值
获取和设置某个元素中的HTML内容：html()方法，类似于js的innerHTML
获取和设置某个元素中的文本内容：text()方法，类似于js的innerText
注意：（1）Firefox不支持innerText，text()支持所有浏览器（2）text()对HTML和XML都有效
获取和设置元素的值：val()方法，类似于js的value属性（输入框提示文字）。无论元素是文本框，下拉列表还是单选框都可以返回元素的值，如果元素为多选，则返回一个包含所有选择的值得数组。实现输入框提示：文字的显示和隐藏，触发获取和失去鼠标焦点事件
1 $("#address").focus(function(){ 2 var txt_value = $(this).val(); //获取地址文本框的值 3 if(txt_value=="请输入邮箱地址"){ 4 $(this).val(""); 5 } 6 })
1 $("#address").blur(function(){ 2 var txt_value = $(this).val(); //获取地址文本框的值 3 if(txt_value==""){ 4 $(this).val("请输入邮箱地址"); 5 } 6 })
表单元素的defaultValue属性也可实现同样的功能，defaultValue属性包含该表单元素的初始值
1 $("#address").focus(function(){
2 var txt_value = $(this).val(); //获取地址文本框的值
3 if(txt_value==this.defaultValue){
4 $(this).val("");
5 }
6 })
val()方法的另一个用处是能使select（下拉列表框）、checkbox（多选框）和radio（单选框）相应的选项被选中，常用于表单操作
//下拉列表 $("#single").val("选择2号")； $("#multiple").val(["选择2号"，"选择3号"]) //单选框、多选框 $(":checkbox").val(["check2","check3"]); $(":radio").val(["check2"]);
上面的例子，也可使用attr()方法来实现同样的功能
$("#single option：eq(1)").attr("selected"，true]);
$("[value=radio2]:radio").attr("checked"，true);
5.遍历节点
获得元素的直接子元素：children()方法
获得元素后面紧邻的同辈元素：next()方法
获得元素前面紧邻的同辈元素：prev()方法
获取元素前后所有的同辈元素：siblings()方法
从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素：closest()方法
获得集合中每个匹配元素的父级元素：parent()方法
获得集合中每个匹配元素的祖先元素：parents()方法
6.CSS—DOM：获取和设置style对象的属性，style属性无法提取到通过外部css设置的样式属性
获取和设置元素的样式属性：css()方法
//单个样式 $("p").css("color","red"); //多个样式 $("p").css("color":"red","bgColor":"red");
设置透明度：opacity属性(兼容)——$("p").css("opacity","0.9");
获取和设置高宽：height()方法和width()方法，也可使用css()方法设置