06jquery操作DOM

06 jquery操作DOM

样式操作：

​ css()
​ $(“”).css(“属性”) 获取对应属性的css值
​ $(“”).css(“属性”, “值”)
​ $(“”).css({“属性”: “值”, “属性2”: “值2”, …})

addClass()
removeClass()
hasClass(“类名”) 判断是否有指定的类样式

内容操作：

html():
$(“”).html() 获取指定元素的内容，如果内容中有标签，直接连标签一起获取文本
$(“”).html(“内容”) 设置指定元素的内容，如果内容中有标签，会直接解析标签
text()
$(“”).text() 获取指定元素的内容，如果内容中有标签，不会获取标签，只获取标签中的文本
$(“”).text(“内容”) 设置指定元素的内容，如果内容中有标签，不会解析标签，直接显示标签文本
val()
$(“表单对象”).val() 获取表单元素的值
$(“表单对象”).val(“内容”) 设置表单元素的值

属性操作：

attr()
$(“”).attr(“属性”) 获取指定属性的值
$(“”).attr(“属性”, “值”) 设置指定属性的值

节点操作：

获取节点：$(“选择器”)

创建节点：$(“<节点名></节点名>”)

添加节点：

添加同辈节点：

​ A.after(B) 在A节点的后面添加同辈节点B
​ B.insertAfter(A) 把B节点作为同辈添加到A节点的后面
​ A.before(B) 在A节点的前面添加同辈节点B
​ B.insertBefore(A) 把B节点作为同辈添加到A节点的前面

添加子节点：

​ A.append(B) A是父节点，在A节点中添加B子节点，B子节点在最后面
​ B.appendTo(A) 把B作为子节点添加到父节点A的最后面
​ A.prepend(B) A是父节点，在A节点中添加B子节点，B子节点在最前面
​ B.prependTo(A) 把B作为子节点添加到父节点A的最前面

删除节点：

​ A.remove() 直接删除A节点，恢复后绑定的事件没了
​ A.empty() 清空A节点的内容
​ A.detach() 删除A节点，恢复后绑定的事件还在

替换节点：

​ A.replaceWith(B) 用B节点替换A节点
​ B.replaceAll(A) 用B节点替换A节点

复制节点：

​ A.clone([boolean]) 复制一个A节点，可以有一个boolean类型参数，true:连带着事件一起复制，false：不复制事件，默认为false

属性操作：

​ A.attr(“属性”) 获取A节点的指定属性值
​ A.attr(“属性”, “值”) 设置A节点的指定属性值
​ A.removeAttr(“属性”) 删除A节点的指定属性

节点遍历：

​ A.children() 获取A节点的所有子节点，返回一个集合
​ A.next() 获取A节点的下一个节点
​ A.prev() 获取A节点的上一个节点
​ A.slibings() 获取A节点的所有同辈节点，返回一个集合
​ A.parent() 获取A节点的父节点
​ A.parents() 获取A节点的所有祖先节点，返回一个集合
​ A.each(function([index, value]){
​ …
​ }) 循环集合A
​ A.find(B) 在A节点的后辈节点中查询并获取B节点
​ A.eq(index) 获取指定下标的A标签