第二章:JQ操作DOM

2021/8/24 23:06:23

编程Tag： 按钮修改元素 html Dom 获取 jq ## 第二章

本文主要是介绍第二章:JQ操作DOM，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

# DOM文本标签

## 获取和修改元素的文本内容

	元素对象.text() 								//获取

	元素对象.text("xxx") 					   //修改

## 获取和修改元素的html内容

	元素对象.html() 									  //获取

	元素对象.html("<h1>xxx</h1>") 		//修改

## 获取和修改元素的样式

	元素对象.css("color"); //获取样式的值

	元素对象.css("color","red"); 			//赋值

	元素对象.css({xxx:"xx",xxx:"xx"}) 	//批量赋值

## 获取和修改元素的属性

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

	元素对象.attr("属性名","值"); 			//赋值

## 获取与修改元素的父子

### 获取元素的子元素们

	元素对象.children() 

### 获取元素的父元素

	元素对象.parent();

## 案例一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	<body>
		<input type="button" value="文本按钮">
		<input type="button" value="html按钮">
		<input type="button" value="样式按钮"><br>
		<div>div1</div>
		<div>div2</div>
		<div style="color:red">div3</div>
	</body>
</html>
要求:


	1.点击文本按钮,获取div1的text值

	2.点击html按钮,获取div2的html值

	3.点击样式按钮,获取div3的css样式

	4.点击文本按钮,给div1修改成文渊

	5.点击html按钮,给div2修改成(标题一)文渊

	6.点击样式按钮,给div3修改成(蓝色)

	7.点击样式按钮,给div3修改成{(“颜色”:”green”),”高度”:”100px”,”宽度”:”100px”,”背景颜色”:”红色”}

# 操作DOM

## 创建元素

	js:	var d = document.createElement("div");

	jq: 	var d = $("<div id='xxx'>xxxxx</div>");

## 添加元素

	js: 	父元素.appendChild(新元素)

	jq: 	父元素.append(新元素); //添加到最后面

			 父元素.prepend(新元素); //添加到最前面

## 插入元素

	js: 	父元素.insertBefore(新元素,弟弟);

	jq: 	弟弟.before(新元素);

			 哥哥.after(新元素);

## 删除元素

	js: 	父元素.removeChild(被删除的元素);

	jq: 	被删除的元素.remove();

## 案例二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>节点之间的增删改查</title>
	</head>
	<body>
        <input type="text">
        <input type="button" value="添加">
        <input type="button" value="插入">
        <input type="button" value="删除"><br>
        <ul>
        	<li>北京</li>
        	<li id="sh">上海</li>
        	<li id="gz">广州</li>
        </ul>
	</body>
</html>
要求:


	1.添加一个元素(香港)在最前面 

	2.添加一个元素(云南)在最后面

	3.添加一个元素深圳在上海的后面

	4.添加一个元素长沙在广州的前面

	5.删除广州

	6.删除第一个元素

	7.删除最后一个元素

## 案例三

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h4>QQ通讯录</h4>
		<ul>
			<li>我的前任
				<ul>
					<li>王昭君</li>
					<li>西施</li>
					<li>杨玉环</li>
					<li>貂蝉</li>
				</ul>
			</li>
			<li>我的朋友
				<ul>
					<li>文渊</li>
					<li>文化</li>
					<li>文章</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

这篇关于第二章:JQ操作DOM的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

第二章:JQ操作DOM

相关编程文章