jQuery自学教程（三）——DOM操作

DOM有三种形式，标准DOM、HTML DOM、CSS DOM，大部分进行了封装，然而jQuery中并不需要深刻理解它们。

其中最重要的DOM操作，就是元素及内容的操作和元素的属性操作。

一、元素及内容操作



Ps：text方法可以自动滤掉html标签直接获得文本内容。同理，当用text方法设置内容时，会自动将html标签转义为普通文本。

二、属性操作



Ps：这里第四个写法是一个带function的写法。这种方式在attr()，html()，text()，val()，is()，filter()中都有应用。





注意其中的function()可以不传参数，可以只传一个参数index，表示当前元素索引号(从0开始)，并不断自增；也可以传递两个参数index和value，value表示属性原始的值。

这种写法也并不适用于所有方法，比如removeAttr。

三、CSS操作











其中有很多方便的用法。toggleClass()常和动作（比如click）结合，用于样式的切换。

jQuery除了提供核心的css操作方法，还封装了一些特殊功能的css操作方法：

1、width(方法内部自动完成了类型转换，直接获得number类型结果)

width()获取某个元素的长度

width(value)设置某个元素的长度

width(function(index,value) {}) 通过匿名函数设置某个元素的宽度

eg：$('div').width(function(index,value){

return value-500+;

})

2、height

height()获取某个元素的高度

height(value)设置某个元素的高度

height(function(index,value) {}) 通过匿名函数设置某个元素的高度

eg：$('div').height(function(index,value){

return value-500+;

})

3、内外边距和边框尺寸



4、元素偏移方法



四、DOM节点操作

1、创建，插入节点

创建节点→插入节点

下面是几种插入节点的方法：





所谓内部外部，就是在标签的内部还是标签的外部加入内容。

2、包裹节点





Ps：unwrap()方法是从内部往外部取出包裹

wrapAll()方法是将所有元素当做独立体包裹在一起，而wrap()是将每个元素分别包装起来

3、增删节点

复制节点：clone()复制一个节点，但是如果clone(false)或缺省，则不会复制元素的事件处理，如果为true，则会同时复制事件响应。

删除节点：remove()，其中可以简单选择器，特定的删除某些节点（eg:$('div').remove('#id')删除指定id的div），其方法本身返回jQuery对象，因此可

以在加回来，但是其不保留之前所绑定的事件。

detach()，同remove，但是删除之后保留之前所绑定的事件。

清空节点：empty()，清空节点内的内容

替换节点：replaceWith() /replaceAll() 二者效果相同，就是用的时候替换节点和被替换节点位置互换。且被替换之后节点所绑定的事件都消失了。