jquery之Dom操作

一、节点的创建

1.Dom创建流程(js中)

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

2.jq创建节点

jq通过$()创建节点

(1)直接创建节点

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

(2)创建带文本的节点

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

(3)创建带属性的节点

var 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");

//给表单元素传入值。

你可能感兴趣的:(jquery,javascript,前端)