jQuery中的DOM操作

最新推荐文章于 2024-07-30 23:43:41 发布

m_syndra

最新推荐文章于 2024-07-30 23:43:41 发布

阅读量352

点赞数

CC 4.0 BY-SA版权

文章标签： jQuery DOM

本文链接：https://blog.youkuaiyun.com/m_syndra/article/details/79326942

本文详细介绍了使用 jQuery 进行 DOM 操作的方法，包括元素属性、内容和样式的操作，以及节点的创建、插入、复制、替换和遍历等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery中的DOM操作

DOM对象和jQuery对象的区别：

DOM对象：DOM（Document Object Model）,即文本对象模型，每一个页面都是一个DOM对象，通过传统的JavaScript方法访问页面中的元素，就是访问DOM对象。

jQuery对象：jQuery对象就是通过jQuery包装DOM对象后产生的对象。

DOM为文档提供了一种结构化表示方法，通过该方法可以改变文档的内容和展示形式。

1. 访问元素

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

（1）元素属性操作

① 获取元素的属性

attr(name) [name表示属性的名称]

② 设置元素的属性

在页面中，attr()方法不仅可以获取元素的属性值，还可以设置元素的属性

attr(key,value) [key表示属性的名称，value表示属性的值]

如果要设置多个属性

attr({key1:value1, key2:value2})

③ 删除元素的属性

通过attr()方法设置元素的属性后，可以使用removeAttr()方法将元素的属性删除

removeAttr(name) [name为元素属性的名称]

简记

attr(属性)	获取
attr(属性，属性值)	设置
使用JSON方式设置一个属性值	attr({””:””})
使用JSON方式设置多个属性值	attr({””:””,””:””…})
P.S.1 prop()方法使用方法同上
P.S.2 attr()方法可以一次设置多个属性值，但只能获取一个属性值

实例：

<!DOCTYPEhtml>

<html>

<headlang="en">

<scriptsrc="jquery-3.0.0.js"></script>

$(function(){

$("#all").click(function(){

$(".check").attr("checked",true)

})

$("#reverse").click(function(){

$(this).attr({"type":"text", "value": "输入..."});//其可以一次设置多个属性

for(var i=0;i<$(".check").length;i++){

$(".check:eq("+i+")").prop("checked",!$(".check:eq("+i+")").prop("checked"));

//或者也可以写成$(".check").eq(i).prop("checked",!$(".check").eq(i).prop("checked"));

//attr()只能设置checked值，不能获取checked值，所以可以使用prop()

}

})

</script>

</head>

<body>

<inputtype="button" value="全选" id="all"/>

<inputtype="checkbox" class="check"/>唱歌

<inputtype="checkbox" class="check"/>跳舞

<inputtype="checkbox" class="check"/>吃饭

<inputtype="checkbox" class="check"/>睡觉

<inputtype="checkbox" class="check"/>玩耍

<inputtype="button" value="反选" id="reverse"/>

</body>

</html>

（2）元素内容操作

jQuery中，元素内容操作方法包括html()和text()

html()	功能	获取或设置元素的HTML内容
	无参数(括号里没有内容)	获取元素的HTML内容
	有参数(括号里有内容)	设置元素的HTML内容
text()	功能	获取或设置元素的文本内容
	无参数(括号里没有内容)	获取元素的文本内容
	有参数(括号里有内容)	设置元素的文本内容
val()	功能	获取或设置元素的值
	无参数(括号里没有内容)	获取value值
	有参数(括号里有内容)	设置value值
P.S. html()方法仅支持XHTML的文档，不能用于XML文档，而text()方法既支持HTML文档，也支持XML文档

实例：

<!DOCTYPEhtml>

<html>

<headlang="en">

<title>元素内容操作</title>

<scriptsrc="jquery-3.0.0.js"></script>

$(function(){

$(".btn").click(function(){

$(".btn").val("我的value值被设置了");

alert($(".btn").val());

//.val() 全称value 带参设置value值；不带参获取value值

})

alert($(".span").html());

$(".span").html("HELLO WORLD");

//.html() 带参设置html值不带参获取html值

alert($(".span1").text());

$(".span1").text("HELLO WORLD");

//.text() 带参设置text值不带参获取text值

})

</script>

</head>

<body>

<inputtype="button" value="点击设置" class="btn"/>

<spanclass="span"><span>hello world</span></span>

<spanclass="span1"><span>hello world</span></span>

</body>

</html>

（3）元素样式操作

①直接设置元素样式值

通过css()方法为某个指定的元素设置样式值

css(name,value) [name表示样式名称，value表示样式的值]

eg.

.css(“border”)	获取样式
.css(“border”,”1px solid red”)	设置样式
.css({“border”:”1px solid red”,”color”:”yellow”})	设置多个样式

②增加类别（给元素增加类名称）

addClass() [括号内是类别的名称]

其也可以增加多个类别名称，类别之间用空格隔开即可

③删除元素的类名称

removeClass()

removeClass()	无参数	将类名称全删除
removeClass()	有参数	只删除括号内写的类名称

其也可以删除多个类别名称，类别之间用空格隔开即可

④类别切换

toggleClass() [判断有没有括号内写的类名称，有----将其删除；没有----将其添加]

实例：

<!DOCTYPE html>

<html>

<title>元素样式操作</title>

<style>

.addclass{

border: solid 2px yellow;

outline: none;

}

.addclass1{

background-color: #35c7ff;

}

#change{

background-color: #00b262;

border: dotted 2px black;

}

.del{

border: dotted 1px green;

}

.choose{

background-color: #6f47cd;

outline: none;

}

</style>

$(function(){

$("#add").click(function(){

$("#add").addClass("addclass addclass1");

//.addClass() 给元素增加类名称同时追加多个，之间用空格隔开

});

$("#change").click(function(){

$("#change").css({"border":"solid 1pxblue","backgroundColor":"pink","outline":"none"})

//.css(name,value) 获取和设置样式,只有name是获取样式

});

$("#delete").click(function(){

$("#delete").removeClass("del");

////.removeClass() 给元素删除类名称同时删除多个，之间用空格隔开

});

$("#choose").click(function(){

$("#choose").toggleClass("choose");

//.toggleClass() 会判断有没有()中写的东西，有他会将其删除，没有他会将其加上

})

</script>

</head>

<body>

</body>

</html>

2. 元素节点操作

（1）创建节点

$(html)

eg. var block=$(“<div></div>”);

（2）插入节点

按照插入元素的顺序来分，有内部和外部两种插入方法。

① 内部插入节点

给元素内部的内容之后追加

append()

appendTo()

eg. 被加.append(加)

$(“body“).append(block);

加.appndTo(被加)

Block.appendTo($(“body“));

给元素内部的内容之前追加

prepend()

prependTo()

② 外部插入节点

after()	在当前元素外部之后追加
before()	在当前元素外部之前追加
insertAfter()	将当前元素追加到指定元素外部之后
insertBefore()	将当前元素追加到指定元素外部之前

eg. $(this).after(text);

$(this).before(text);

text.insertAfter($(this));

text.insertBefore($(this));

（3）复制节点

clone() 默认值为false

clone()	功能	复制匹配的DOM元素并选中复制成功的元素
	参数true	深度克隆，会克隆它的功能
	参数false	表面克隆，不会克隆它的功能