JQuery中的DOM操作

今天主要说说JQuery中的DOM操作，涉及增、删、改、查和each遍历5个方面

一.增(插入节点)

append是增加到父元素的尾部

prepend是增加到父元素的头部

clone()：复制节点，在方法中传递一个参数true，复制元素的同时复制元素中所绑定的事件

二.删(删除节点)

1.remove()方法：可以在remove中传入参数用于筛选元素进行删除

2.detach()方法：不会把匹配的元素从JQuery对象中删除，可以复原，所有绑定的事件，附加数据都会保留下来。

3.empty()方法：清空元素中的所有后代节点

三.改

1.属性操作：

attr()方法获取和设置属性（读写非布尔值的标签属性），

pro()方法读写布尔值的标签属性

removeAttr()删除元素属性

//设置单个的属性值
$("p").attr("title","your title");

//一次性为同一个元素设置多个属性值
$("span").attr({"title":"your title","name":"test"});

//删除p元素的title属性
$("p").removeAttr("title");

 

2.样式操作

//追加样式,合并样式，若设置了同一样式，则后者覆盖前者
$("p").addClass("another");

//移除样式
$("p").removeClass("high another");

//判断是否含有某个样式
$("p").hasClass("another");

 

3.HTML、文本和值

//html()方法：读取或设置某个元素的html内容
$("p").html("<span>这是新增的html内容</span>");

//text()方法: 读取或设置某个元素的文本内容
$("p").text("这是新增的文字");

//val()方法：多用于表单元素
$("input[name='one']").val();          //读 val()
$("input[name='one']").val("写入");    //写 val(value)

4.查(遍历节点)

子：children（）

后代：find（）

兄弟：上一个prev（）、下一个next（）

父：parent（）

祖先：parents（）这是一条链式的，返回多个父节点

           closest（）只返回匹配的第一个父元素节点