JQUERY DOM总结

一、访问元素

　　在访问页面时，需要与页面中的元素进行交互式的操作。在操作中，元素的访问是最频繁、最常用的，主要包括对元素属性、内容、值、CSS的操作。

　　1、 元素属性操作

　　在jQuery中，可以对元素的属性执行获取、设置、删除的操作，通过attr()方法可以对元素属性执行获取和设置操作，而removeAttr()方法则可以轻松删除某一指定的属性。

　　1.1、 获取元素的属性

　　获取元素属性的语法格式如下：

　　[javascript] view plaincopyprint?attr(name)

　　其中，参数name表示属性的名称。

　　1.2、设置元素的属性

　　在页面中，attr()方法不仅可以获取元素的属性值，还可以设置元素的属性，其设置属性语法格式如下所示：

　　[javascript] view plaincopyprint?attr(key, value)

　　其中，参数key表示属性的名称，value表示属性的值。如果要设置多个属性，也可以通过attr()方法实现，其语法格式如下所示：

　　[javascript] view plaincopyprint?attr({key0:value0,key1:value1})

　　另外，attr()方法还可以绑定一个function()函数，通过该函数返回的值作为元素的属性值，其语法格式如下所示：

　　[javascript] view plaincopyprint?attr(key,function(index))

　　其中，参数index为当前元素的索引号，整个函数返回一个字符串作为元素的属性值。

　　1.3、删除元素的属性

　　jQuery中通过attr()方法设置元素的属性后，使用removeAttr()方法可以将元素的属性删除，其使用的语法格式为：

　　[javascript] view plaincopyprint?removeAttr(name)

　　其中，参数name为元素属性的名称。

　　2、 元素内容操作

　　在jQuery中，操作元素内容的方法包括html()和text()。前者与JavaScript中的innerHTML属性类似，即获取或设置元素的HTML内容;后者类似于JavaScript中的innerHTML属性，即获取或设置元素的文本内容。二者的格式与区别如下表所示。

　　html()和text()方法的区别语法格式参数说明功能描述

　　html()无参数用于获取元素的HTML内容

　　html(val)val参数为元素的HTML内容用于设置元素的HTML内容

　　text()无参数用于获取元素的文本内容

　　text(val)val参数为元素的文本内容用户设置元素的文本内容

　　说明：html()方法仅支持XHTML的文档，不能用于XML文档，而text()则既支持HTML文档，也支持XML文档。

　　3、 获取或设置元素值

　　在jQuery中，如果要获取元素的值，是通过val()方法实现的，其语法格式如下所示：

　　[javascript] view plaincopyprint?val(val)

　　其中，如果不带参数val，则是获取某元素的值;反之，则是将参数val的值赋给某元素，即设置元素的值。该方法常用于获取或设置对象的值。

　　另外，通过val()方法还可以获取select标记中的多个选项值，其语法格式如下所示：

　　[javascript] viewplaincopyprint?val().join(",")

　　4、 元素样式操作

　　在页面中，元素样式的操作包括：直接设置样式、增加CSS类别、类别切换、删除类别几部分。

　　4.1、直接设置元素样式值

　　在jQuery中，可以通过css()方法为某个指定的元素设置样式值，其语法格式如下所示：

　　[html] view plaincopyprint?css(name, value)

　　其中，name为样式名称，value为样式的值。

　　4.2、增加CSS类别

　　通过addClass()方法增加元素类别的名称，其语法格式如下：

　　[html] view plaincopyprint?addClass(class)

　　其中，参数class为类别的名称，也可以增加多个类别的名称，只需要用空格将其隔开即可，其语法格式为：

　　[html] view plaincopyprint?addClass(class0 class1 ...)

　　注意：使用addClass()方法仅是追加样式类别，即它还保存原有的类别。

　　4.3、类别切换

　　通过toggleClass()方法切换不同的元素类别，其语法格式如下：

　　[html] view plaincopyprint?toggleClass(class)

　　其中，参数class为类别名称，其功能是当元素中含有名称为class的CSS类别时，删除该类别，否则增加一个该名称的CSS类别。

　　4.4、删除类别

　　与增加CSS类别的addClass()方法相对应，removeClass()方法则用于删除类别，其语法格式如下：

　　[html] view plaincopyprint?removeClass(class)

　　其中，参数class为类别名称，该名称是可选项，当选该名称时，则删除名称是class的类别，有多个类别时用空格隔开。如果不选名称，则删除元素中的所有类别。

　　如果要删除p标记是cls0的类别，可以使用如下的代码：

　　[javascript] viewplaincopyprint?$("p").removeClass("cls0");

　　注意：toggleClass()方法可以实现类别间的切换，而css()或addClass()方法仅是增加新的元素样式，并不能实现类别的切换功能。

　　二、创建节点元素

　　我们知道，整个页面是一个DOM模型，页面中的各元素通过模型的节点相互关联形成树状，因此，如果要在页面中增加某个元素，只需要找到元素的上级节点，通过函数$(html)完成元素的创建后，增加到该节点中。

　　函数$()用于动态创建页面元素，其语法格式如下：

　　[javascript] view plaincopyprint?$(html)

　　其中，参数html表示用于动态创建DOM元素的HTML标记字符串，即如果要在页面中动态创建一个div标记，并设置其内容和属性，可以加入如下代码：

　　[javascript] view plaincopyprint?var $div = $("WriteLess Do More");

　　$("body").append($div);

　　执行上述代码后，将在页面文档body中创建一个div标记，其内容为“Write Less Do More”，属性title的值为“jQuery 理念”。

　　三、插入节点

　　在页面中动态创建元素需要执行节点的插入或追加操作。而在jQuery中，有多种方法可以实现该功能，append()方法仅是其中之一，按照插入元素的顺序来分，可以分为内部和外部两种插入方法。下面将分别对这些方法进行详细介绍。

　　3.1、 内部插入节点方法

　　内部插入节点的方法如下表所示：

　　内部插入节点语法格式参数说明功能描述

　　append(content)content表示追加到目标中的内容向所选择的元素内部插入内容

　　append(function(index, html))通过function函数返回追加到目标中的内容想所选择的元素内部插入function函数所返回的内容

　　appendTo(content)content表示被追加的内容把所选择的元素追加到另一个指定的元素集合中

　　prepend(content)content表示插入目标元素内部前面的内容向每个所选择的元素内部前置内容

　　prepend(function(index, html))通过function函数返回插入目标元素内部前面的内容向所选择的元素内部前置function函数所返回的内容

　　prependTo(content)content表示用于选择元素的jQuery表达式将所选择的元素前置到另一个指定的元素集合中

　　3.2、 外部插入节点方法

　　外部插入节点语法格式参数说明功能描述

　　after(content)content表示插入目标元素外部后面的内容向所选择的元素外部后面插入内容

　　after(function)通过function函数返回插入目标外部后面的内容向所选择的元素外部后面插入function函数所返回的内容

　　before(content)content表示插入目标元素外部前面的内容向所选择的元素外部前面插入内容

　　before(function)通过function函数返回插入目标外部前面的内容向所选择的元素外部前面插入function函数所返回的内容

　　insertAfter(content)content表示插入目标元素外部后面的内容将所选择的元素插入另一个指定的元素外部后面

　　insertBefore(content)content表示插入目标元素外部前面的内容将所选择的元素插入另一个指定的元素外部前面

　　四、复制节点

　　在页面中，有时需要将某个元素节点复制到另外一个节点后，如购物网站中购物车的设计。在传统的javaScript中，需要编写较为复杂的代码，而在jQuery中，可以通过方法clone()轻松实现，该方法的语法格式为：

　　[javascript] view plaincopyprint?clone()

　　其功能为复制匹配的DOM元素并且选中复制成功的元素，该方法仅是复制元素本身，被复制后的新元素不具有任何元素行为。如果需要在复制时将该元素的全部行为也进行复制，可以通过方法clone(true)实现，其格式为：

　　[javascript] view plaincopyprint?clone(true);

　　其中的参数设置为true就可以复制元素的所有事件处理。

　　五、替换节点

　　在jQuery中，如果要替换元素中的节点，可以使用replaceWith()和replaceAll()这两种方法，其语法格式分别如下：

　　[javascript] view plaincopyprint?replaceWith(content)

　　该方法的功能是将所有选择的元素替换成指定的HTML或DOM元素，其中参数content为被所选择元素替换的内容。

　　[javascript] view plaincopyprint?replaceAll(selector)

　　该方法的功能是将所有选择的元素替换成指定selector的元素，其中参数selector为需要被替换的元素。

　 注意：replaceWith()与replaceAll()方法都可以实现元素节点的替换，二者最大的区别在于替换字符的顺序，前者是用括号中的字符替换所选择的元素，后者是用字符串替换括号中所选择的元素。同时，一旦完成替换，被替换元素中的全部事件都将消失。

　　六、包裹节点

　　在jQuery中，不仅可以通过方法替换元素节点，还可以根据需求包裹某个指定的节点，对节点的包裹也是DOM对象操作中很重要的一项，其与包裹节点相关的全部方法如下表所示：

　　包裹节点语法格式参数说明功能描述

　　wrap(html)html参数为字符串代码，用于生成元素并包裹所选元素把所有选择的元素用其他字符串代码包裹起来

　　wrap(elem)elem参数用于包装所选元素的DOM元素把所有选择的元素用其他DOM元素包装起来

　　warp(fn)fn参数为包裹结构的一个函数把所有选择的元素用function函数返回的代码包裹起来

　　unwrap()无参数移除所选元素的父元素或包裹标记

　　warpAll(html)html参数为字符串代码，用于生成元素并包裹所选元素把所有选择的元素用单个元素包裹起来

　　warpAll(elem)elem参数用于宝藏所选元素的DOM元素把所有选择的元素用单个DOM元素包裹起来

　　warpInner(html)html参数为字符串代码，用于生成元素并包裹所选元素把所有选择的元素的自内容(包括文本节点)用字符串代码包裹起来

　　warpInner(elem)elem参数用于包装所选元素的DOM元素把所有选择的元素的子内容(包括文本节点)用DOM元素包裹起来

　　warpInner(fn)fn参数为包裹结构的一个函数把所有选择的元素的自内容(包括文本节点)用function函数返回的代码包裹起来

　　在上述表格中，warp(html)与wrapInner(html)方法较为常用，前者包裹外部元素，后者包裹元素内部的文本字符。

　　七、遍历元素

　　在DOM元素操作中，有时需要对同一标记的全部元素进行统一操作。在传统的JavaScript中，先获取元素的总长度，然后，以for循环语句，递减总长度，访问其中的某个元素，代码相对复杂;而在jQuery中，可以直接使用each()方法实现元素的遍历。其语法格式如下：

　　[javascript] view plaincopyprint?each(callback)

　　其中，参数callback是一个function函数，该函数还可以接受一个形参index，此形参为遍历元素的序号(从0开始);如果需要访问元素中的属性，可以借助形参index，配合this关键字来实现元素属性的设置或获取。

　　八、删除元素

　　在DOM操作页面时，删除多余或指定的页面元素是非常必要的，jQuery提供了两种可以删除元素的方法，即remove()和empty()。严格来说，empty()方法并非真正意义上的删除，使用该方法，仅仅可以清空全部的节点或节点所包括的所有后代元素，并非删除节点和元素。

　　remove()方法的语法格式如下：

　　[javascript] view plaincopyprint?remove([expr])

　　其中，参数expr为可选项，如果接受参数，则该参数为筛选元素的jQuery表达式，通过该表述式获取指定的元素，并进行删除。

　　empty()方法的语法格式如下：

　　[javascript] view plaincopyprint?empty()

　　其功能为清空所选择的页面元素或所有的后代元素。