文章目录

jQuery DOM
- 概述
- 操作元素
- - 创建元素
  - 插入节点
  - - prepend()
    - prependTo()
    - append()
    - appendTo()
    - before()
    - insertBefore()
    - after()
    - insertAfter()
  - 删除元素
  - - remove()
    - detach()
    - empty()
  - 复制元素
  - - clone()
  - 替换元素
  - - replaceWith()
    - replaceAll()
  - 包裹元素
  - - wrap()
    - wrapAll()
    - wrapInner()
  - 遍历元素
- 属性操作
- - 获取属性
  - 设置属性
  - 删除属性
  - prop()方法

jQuery DOM

概述

DOM，全称“Document Object Model（文档对象模型）”，它是由W3C（World Wide Web Consortium，万维网联盟）定义的一个标准。

DOM采用的是“树形结构”，用“树节点”的形式来表示页面中的每一个元素。

操作元素

创建元素

语法

$().append("字符串")

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				var $li = "<li>jQuery</li>";
				$("ul").append($li);
			})
		</script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ul>
	</body>
</html>

在这里插入图片描述

插入节点

在jQuery中插入节点的方法有以下4组：

prepend() 和 prependTo()
append() 和 appendTo()
before() 和 insertBefore()
after() 和 insertAfter()

prepend()

语法

$(父元素).append(子元素)

说明

在父元素里添加子元素。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				var $strong = "<strong style='color:red;'>jQuery</strong>";
				$("p").prepend($strong);
			})
		</script>
	</head>
	<body>
		<p> hello</p>
	</body>
</html>

在这里插入图片描述

prependTo()

语法

$(子元素).prependTo(父元素)

说明

将子元素添加到父元素内部。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				var $strong = "<strong style='color:red;'>jQuery</strong>";
				$($strong).prependTo("p");
			})
		</script>
	</head>
	<body>
		<p> hello</p>
	</body>
</html>

在这里插入图片描述

append()

语法

$(父元素).append(子元素)

说明

父元素内部添加子元素。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				var $strong = "<strong style='color:red;'>jQuery</strong>";
				$("p").append($strong);
			})
		</script>
	</head>
	<body>
		<p>hello </p>
	</body>
</html>

在这里插入图片描述

appendTo()

语法

$(子元素).appendTo(父元素)

说明

将子元素添加到父元素内部。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				var $strong = "<strong style='color:red;'>jQuery</strong>";
				$($strong).appendTo("p");
			})
		</script>
	</head>
	<body>
		<p>hello </p>
	</body>
</html>

在这里插入图片描述

before()

语法

$(元素A).before(元素B)

说明

在元素A的外部前面插入元素B。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				var $strong = "<strong style='color:red;'>jQuery</strong>";
				$("p").before($strong);
			})
		</script>
	</head>
	<body>
		<p>hello </p>
	</body>
</html>

在这里插入图片描述

insertBefore()

语法

$(元素A).insertBefore(元素B)

说明

将元素A插入元素B外部的前面。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				var $strong = "<strong style='color:red;'>jQuery</strong>";
				$($strong).insertBefore("p");
			})
		</script>
	</head>
	<body>
		<p>hello </p>
	</body>
</html>

在这里插入图片描述

after()

语法

$(元素A).after(元素B)

说明

在元素A外部的后面插入元素B。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				var $strong = "<strong style='color:red;'>jQuery</strong>";
				$("p").after($strong);
			})
		</script>
	</head>
	<body>
		<p>hello </p>
	</body>
</html>

在这里插入图片描述

insertAfter()

语法

$(元素A).insertAfter(元素B)

说明

将元素A插入到元素B外部的后面。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				var $strong = "<strong style='color:red;'>jQuery</strong>";
				$($strong).insertAfter("p");
			})
		</script>
	</head>
	<body>
		<p>hello </p>
	</body>
</html>

在这里插入图片描述

删除元素

在jQuery中删除元素有以下3种：

remove()
detach()
empty()

remove()

语法

$(元素).remove()

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("li:nth-child(3)").remove();
			})
		</script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>jQuery</li>
		</ul>
	</body>
</html>

在这里插入图片描述

detach()

在jQuery中，detach()和remove()的功能虽然相似，都是将某个元素及其内部所有内容删除，但是两者也有明显的区别。

remove()方法用于“彻底”删除元素。所谓的“彻底”，指的是不仅会删除元素，还会把元素绑定的事件删除。
detach()方法用于“半彻底”删除元素。所谓的“半彻底”，指的是只会删除元素，不会把元素绑定的事件删除。

empty()

语法

$(父元素).empty()

说明

清空后代元素。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("li:nth-child(4)").empty();
			})
		</script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>jQuery</li>
		</ul>
	</body>
</html>

在这里插入图片描述

复制元素

clone()

语法

$(元素).clone(取值)

取值

属性值	说明
true	复制元素，同时复制所有绑定的事件
false	仅复制元素，不会复制绑定的事件

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("li").each(function(index, e) {
					$(e).click(function() {
						alert($(this).text())
					});
				});

				var $ul = $("ul").clone(true);
				$("#box").append($ul);
			})
		</script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>jQuery</li>
		</ul>
		<div id="box"></div>
	</body>
</html>

在这里插入图片描述

替换元素

在jQuery中替换元素有以下2种方法：

replaceWith()
replaceAll()

replaceWith()

语法

$(元素A).replaceWith(元素B)

说明

将元素A替换为元素B。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("#btn").click(function() {
					var $a = "<a href='http://www.baidu.com'>百度</a>";
					$("strong").replaceWith($a);
				});
			})
		</script>
	</head>
	<body>
		<strong>hello jQuery</strong>
		<input id="btn" type="button" value="替换">
	</body>
</html>

replaceAll()

语法

$(元素A).replaceAll(元素B)

说明

用元素A替换元素B。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("#btn").click(function() {
					var $a = "<a href='http://www.baidu.com'>百度</a>";
					$($a).replaceWith("strong");
				});
			})
		</script>
	</head>
	<body>
		<strong>hello jQuery</strong>
		<input id="btn" type="button" value="替换">
	</body>
</html>

包裹元素

在jQuery中包裹元素有以下3种方式：

wrap()
wrapAll()
wrapInner()

wrap()

语法

$(元素A).wrap(元素B)

说明

元素B包裹元素A。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				var $div = "<div style='color:red;'></div>";
				$("p").wrap($div);
			})
		</script>
	</head>
	<body>
		<p>HTML</p>
		<p>CSS</p>
		<p>JavaScript</p>
		<p>jQuery</p>
	</body>
</html>

在这里插入图片描述

wrapAll()

语法

$(元素A).wrapAll(元素B)

说明

将所有的元素A一起被元素B包裹

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				var $div = "<div style='color:red;'></div>";
				$("p").wrapAll($div);
			})
		</script>
	</head>
	<body>
		<p>HTML</p>
		<p>CSS</p>
		<p>JavaScript</p>
		<p>jQuery</p>
	</body>
</html>

在这里插入图片描述

wrapInner()

语法

$(元素A).wrapInner(元素B)

说明

将元素A内部的元素和文本用元素B包裹。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				var $strong = "<strong style='color:red;'></strong>";
				$("p").wrapInner($strong);
			})
		</script>
	</head>
	<body>
		<p>HTML</p>
		<p>CSS</p>
		<p>JavaScript</p>
		<p>jQuery</p>
	</body>
</html>

在这里插入图片描述

遍历元素

语法

$("li").each(function(index, element) {
	
});

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("li").each(function(index, element) {
					var txt = "第" + index + "个元素";
					$(element).text(txt).css("color", "red");
				});
			})
		</script>
	</head>
	<body>
		<div>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</div>
	</body>
</html>

在这里插入图片描述

属性操作

获取属性

语法

$(元素).attr("属性名")

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				var src = $("img").attr("src");
				var alt = $("img").attr("alt");
				console.log(src); //img/a.png
				console.log(alt); //图片1号
			})
		</script>
	</head>
	<body>
		<img src="img/a.png" alt="图片1号">
	</body>
</html>

设置属性

语法

$(元素).attr("属性名", "属性值")
$(元素).attr({"属性名":"属性值","属性名2":"属性值",...})

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("#pic").attr({
					"src": "img/a.png",
					"alt": "图片1号"
				})
			})
		</script>
	</head>
	<body>
		<img id="pic">
	</body>
</html>

在这里插入图片描述

删除属性

语法

$(元素).removeAttr("属性名")

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.select {
				color: red;
			}
		</style>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("#p1").removeAttr("class");
			})
		</script>
	</head>
	<body>
		<p class="select">hello</p>
		<p id="p1" class="select">hello</p>
	</body>
</html>

在这里插入图片描述

prop()方法

prop()方法和attr()方法相似，都可以获取和设置元素的HTML属性。

但是jQuery官方建议：具有true和false这两种取值的属性，如checked、selected和disabled等，建议使用prop()方法来操作，而其他的属性都建议使用attr()方法来操作。

总之，如果某个属性没法使用attr()方法来获取或设置，改换prop()方法就可以实现。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("input[type='radio']").change(function() {
					var b = $(this).prop("checked");
					if (b) {
						$("p").text("您选择的是：" + $(this).val());
					}
				});
			})
		</script>
	</head>
	<body>
		<div>
			<label><input type="radio" name="fruit" value="苹果">苹果</label>
			<label><input type="radio" name="fruit" value="香蕉">香蕉</label>
			<label><input type="radio" name="fruit" value="梨子">梨子</label>
		</div>
		<p></p>
	</body>
</html>