【jQuery】操作DOM方法总结

使用JQuery的方法可以快速方便的对DOM对象进行操作，以下简单介绍一些常用的方法：

1 访问元素

对元素的属性、内容、值以及CSS进行操作。

1.1 元素属性操作

1.1.1 获取元素属性

attr(name):name 为属性名，返回属性值。

举例：

var strAlt = $("img").attr("src");

1.1.2 设置元素属性

attr(key,value)：设置属性key的值为value

attr({key1:value1,key2:value2})：设置多个属性

attr(key,function(){})：设置属性key的值为一个函数function的返回值

1.1.3 删除元素属性

removeAttr(name):name为属性名

1.2 元素内容操作

html():获取元素的HTML内容

html(val):设置元素的HTML内容

text();获取元素的文本内容

text(val):设置元素的文本内容

1.3 获取或者设置元素值

val()：获取元素的值，可能是多个

val(val)：设置元素的值val，同样可以是多个

1.4 元素样式操作

css(name,value)：设置样式name的值为value

addClass(class)：增加CSS类别

toggleClass(class)：切换（替换）不同的元素类别

removeClass(class)：删除类别

2 创建节点元素

$(html):html是一个包含标签的字符串，通过$(html)转换为DOM元素。

3 插入节点

3.1 内部插入节点

append(content) ：content为要插入的内容。

append(function())：插入函数返回的值

appendTo(content)：将该元素插入到content节点中

prepend(content)：将content插入到节点内容的前面

prepend(function())：同理

prependTo(content)：同理

3.2 外部插入节点

after(content)：将content插入到节点的后边

after(function())：同理

before(content)：将content插入到节点的前边

before(function())：同理

insertAfter(content)：将节点插入到content的后边

insertBefore(content)：将节点插入到content的前边

4 复制节点

clone()：只是复制一个节点，之后可以进行插入或者其他操作

clone(true)：同时复制节点的事件、行为

5 替换节点

replaceWith(content)：使用content替换节点

$("#span1").replaceWith("<span title='replacewith'>陶国荣</span>");

replaceAll(selector)：将所有选择的元素替换成指定selector的元素，selector为要被替换的元素。

$("<span title='replaceAll'>taotao@163.com</span>").replaceAll("#span2");

6 包裹节点

wrap(html)：将所有选择的元素用其他字符串代码包裹起来。

//用<b>标签将<p>标签包围。
$("p").wrap("<b></b>");

wrap(elem)：同理

wrap(fn)：同理

unwrap()：移除所选元素的父元素或者包裹标记。

wrapAll(html)：把所有元素用一个标签包起来。

$("p").wrapAll("<div></div>");

wrapAll(elem)：同理

wrapInner(html)：把所有选择的元素的子内容用字符串代码包裹起来。

$("#span2").wrapInner("<li></li>");

wrapInner(elem):同理

wrapInner(fn)：同理

7 遍历元素

each(callback)：对同一标记的所有元素进行统一操作。

$("img").each(function(index){

    this.title = "第" + index + "幅图片";
})

其他函数

函数	描述
.add()	将元素添加到匹配元素的集合中。
.andSelf()	把堆栈中之前的元素集添加到当前集合中。
.children()	获得匹配元素集合中每个元素的所有子元素。
.closest()	从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。
.contents()	获得匹配元素集合中每个元素的子元素，包括文本和注释节点。
.each()	对 jQuery 对象进行迭代，为每个匹配元素执行函数。
.end()	结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。
.eq()	将匹配元素集合缩减为位于指定索引的新元素。
.filter()	将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
.find()	获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。
.first()	将匹配元素集合缩减为集合中的第一个元素。
.has()	将匹配元素集合缩减为包含特定元素的后代的集合。
.is()	根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。
.last()	将匹配元素集合缩减为集合中的最后一个元素。
.map()	把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象。
.next()	获得匹配元素集合中每个元素紧邻的同辈元素。
.nextAll()	获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。
.nextUntil()	获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。
.not()	从匹配元素集合中删除元素。
.offsetParent()	获得用于定位的第一个父元素。
.parent()	获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。
.parents()	获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。
.parentsUntil()	获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。
.prev()	获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。
.prevAll()	获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。
.prevUntil()	获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。
.siblings()	获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。
.slice()	将匹配元素集合缩减为指定范围的子集。

8 删除元素

remove([expr])：expr是可选项，如果有，则为筛选元素的表达式，通过该表达式获取指定的元素。

$("ul li").remove("li[title=t]");
$("ul li:eq(1)").remove();

empty():清空所选择的页面元素或所有的后代元素。