版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Sxx312/article/details/82356513
DOM操作
- DOM Core
- HTML-DOM
- CSS-DOM
添加元素
append() 向每个匹配的元素内部追加内容
appendTo()
prepend() 向每个匹配的元素内部前置内容
prependTo()
after() 向每个匹配的元素之后插入内容
insterAfter()
before() 在每个匹配的元素之前插入内容
insertBefore
删除节点remove(), detach(), empty()
1. remove() 该节点所包含的所有后代节点将同时被删除
返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素
var $li = $('ul li:eq(1)').remove();
$li.appendTo("ul");
remove()方法可以通过传递参数选择性的删除元素
2. detach() 该方法也不会把匹配的元素从JQuery对象中删除，与remove()方法不同的是所有绑定时间、附加数据都会保留下来
3. empty() 该方法不是删除节点，而是清空节点，能清空元素中的所有后代节点
复制节点
clone()
Clone(true) 复制元素，同时复制元素中的所有绑定事件
替换节点
replaceWith()
replaceAll()
包裹节点
wrap()
wrapAll()
warpInner()
属性操作
attr() 获取和设置元素属性，removeAttr()删除元素属性
prop()和removeProp()，分别用来获取在匹配的元素集中的第一个元素的属性值和为匹配的元素删除设置的属性
样式操作
1. 获取样式、设置样式
var p_class = $('p').attr('class'); //获取<p>元素的class
$('p').attr('class', 'height'); //为<p>元素设置class为hegith
2. 追加样式
addClass()
3. 移除样式
removeClass()
4. 切换样式
toggle()
toggleClass()
5. 判断是否含有某个样式
hasClass()
设置和获取HTML、文本和值
1. html()方法 读取或设置某个元素中的HTML内容
2. text()方法 读取或设置某个元素的文本内容
3. val()方法 设置和获取元素的值
通常配合focus(),blur()事件，为文本框等设置默认值，和清空值
$('#address').focus(function() {
var txt_value = $(this).val();
if (txt_value == "请输入邮箱地址") {
$(this).val('');
}
});
遍历节点
1. children()方法 获取匹配元素的所有子元素的个数
配合.length，for循环实现许多需求
2. next()方法 获取匹配元素后面紧邻的同辈元素
3. prev()方法 获取匹配元素前面紧邻的同辈元素
4. siblings()方法 获取匹配元素前后所有的同辈元素
parent(),parents()与closest()的区别
**parent()** 获得集合中每个匹配元素的父级元素
$('item-1').parent().css('background-color', 'red'); 从指定类型的直接父节点开始查找，返回一个元素节点
**parents()** 获得集合中每个匹配元素的祖先元素
$('item-1').parents('ul').css('background-color', 'red');
与parent()不同在于，当它找到第一个父节点时并没有停止查找，而是继续查找，最后返回多个父节点
**closest()** 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素