jquery之Dom操作

一、节点的创建

1.Dom创建流程(js中)

创建元素节点->给元素添加属性->在标签中添加文本->把该元素放入整个文档中

2.jq创建节点

jq通过$()创建节点

(1)直接创建节点

var div=$("<div></div>");
//创建div元素
$("body").append(div);
//将创建好的div元素放入body中（通过append方法）

(2)创建带文本的节点

var div=$("<div>这里是内容噢</div>");
//创建含有内容的div元素
$("body").append(div);
//将创建好的div元素放入body中（通过append方法）

(3)创建带属性的节点

var div=$("<div style='color:red';>这里是内容噢</div>");
//创建具有属性的div元素
$("body").append(div);
//将创建好的div元素放入body中（通过append方法）

3.元素插入

(1)子级插入（append、appendTo、prepend、prependTo）

<1>append与appendTo:在元素子级的末尾插入元素（以在A元素中插入B为例）

append:$(A).append(B)

appendTo:$(B).apppendTo(A)

作用相同，写法颠倒

<2>prepend与prependTo:在元素子级的开头插入元素（以在A元素中插入B为例）

prepend:$(A).prepend(B)

prependTo:$(B).prependTo(A)

作用相同，写法颠倒

(2)同级插入(before、insertBefore、after、insertAfter)

<1>before与insertBefore:在元素的前边插入元素（以在A前边插入B为例）

before:$(A).before(B)

insertBefore:$(B).insertBefore(A)

作用相同，写法颠倒

<2>after与insertAfter：在元素的后边插入元素（以在A后边插入B为例）

after：$(A).after(B)

insertAfter：$(B).after(A)

作用相同，写法颠倒

4.元素删除

(1)remove:删除指定的元素及其元素

（注意:当用选择器时，返回的是一个数组的形式，不要删多哦）

$("div").remove()删除所有div元素

(2)empty:清空指定元素的后代元素和内容

$("div").empty()清空div下的内容和元素。

5.元素替换

replayWith与replaceAll都可以实现替换，只是使用格式颠倒（以把A替换为B为例）

replayWith:$(A)replayWith(B)

replayAll：$(B)replayAll(A)

6.元素遍历（each）

语法格式：$().each(function(index,element){});

index为索引号，element为当前元素。

7.属性操作

(1)获取指定元素的属性(attr)

jQuery对象.attr("属性名"); // 获取属性

jQuery对象.attr("属性名", "属性值"); // 修改属性

(2)删除指定元素的属性（removeAttr）

jQuery对象.removeAttr("属性名");

8.样式操作

(1)css

// 获取指定属性的属性值

$().css("属性名");

// 设置属性值

$().css("属性名", "属性值");

(2)addClass添加类选择器

$().addClass("类名");

(3)removeClass移出已有的类

$().removeClass("类名");

(3)toggleClass切换类选择器

$().toggleClass("类名");当只有这一个类的时候，有的时候调用这个方法这个类被移除，没有的时候加上这个类。

9.内容操作

(1)html方法：获取元素内部的元素标签以及内容，也可以用来给元素添加内容

// 获取元素内容

$().html();

// 设置元素内容

$().html("内容");

(2)text方法获取指定标签的文本，也可以在标签添加文本

// 获取指定标签中的文本

$().text();

// 给指定标签设置文本

$().text("内容");

(3)val方法获取表单元素的值，也可以给表单元素设置值。

$().val();

//获取表单元素的值

$().val("123456");

//给表单元素传入值。