目标：

1.使用jQuery操作CSS样式（重点）

2.使用jQuery操作网页元素（重点）

3.操作文本与属性值内容

4.操作DOM节点

5.遍历DOM节点

6.操作CSS-DOM

样式操作：

一、设置和获取样式值

使用CSS()为指定的元素设置样式值或获取样式值：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
		<style type="text/css">
			div{
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
	</body>
	<script type="text/javascript">
	// css 获取css样式
		console.log($("#d1").css("display"));
	</script>
</html>

使用addClass()和removeClass()追加或移除样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
		<style type="text/css">
			.sb{
				width : 100px;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
	</body>
	<script type="text/javascript">
	// addClass 追加类
		$("#d1").addClass("sb");
	// remove 移除
		$("#d1").removeClass("sb");
	</script>
</html>

切换样式：

   使用 toggleClass() 模拟了addClass()与removeClass()实现样式切换的过程                       

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div{
			width: 90px;
			height: 90px;
			border: 1px red solid;
			}
			
			.po{
				background-color: yellow;
				border: 5px aqua solid;
			}
			
		</style>
		
	</head>
	<body>
		<div id="d1">
			
		</div>
		<button onclick="changeColor()">变换颜色和边框</button>
		
	</body>
	<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
	<script type="text/javascript">
		//点击响应函数
		function changeColor(){
			$("#d1").toggleClass("po");
		}
		
	</script>
</html>

判断是否含指定的样式：

hasClass( )方法来判断是否包含指定的样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div{
			width: 90px;
			height: 90px;
			border: 1px red solid;
			}
			
			.po{
					background-color: yellow;
					border: 5px aqua solid;
			}
			
		</style>
		
	</head>
	<body>
		<div id="d1">
			<p>saldhjdbajsckjasdbas</p>
		</div>
		<button onclick="haspo()">有没有po样式</button>
		
	</body>
	<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
	<script type="text/javascript">
		
		function haspo(){
			console.log($("#d1").hasClass("po"));
		}
		
	</script>
</html>

内容及Value值操作：

html()可以对HTML代码进行操作，类似于JS中的innerHTML；

text()可以获取或设置元素的文本内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div{
			width: 90px;
			height: 90px;
			border: 1px red solid;
			}
			
		</style>
		
	</head>
	<body>
		<div id="d1">
			<p>saldhjdbajsckjasdbas</p>
		</div>
		
	</body>
	<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
	<script type="text/javascript">
		
		// html获取#d1 里的东西
		$("#d1").html();
		//  html将#d1 里的东西设为空
		$("#d1").html("");
		//  html将#d1 里的东西改变
		console.log($("#d1").html("<a>scasca</a>"));
		
		//  text将文本改变
		$("#d1").text("scas");
		
		
	</script>
</html>

html( ) 和text( )方法的区别：

语法格式

参数说明

功能描述

html( )

无参数

用于获取第一个匹配元素的HTML内容或文本内容

html(content)

content为元素的HTML内容

用于设置所有匹配元素的HTML内容或文本内容

text( )

无参数

用于获取所有匹配元素的文本内容

text (content)

content为元素的文本内容

用于设置所有匹配元素的文本内容

属性值操作：

val()可以获取或设置元素的value属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" name="age" id="inp1" value="18" />
		<button type="button" onclick="getvalues()">获取input值</button>
	</body>
	<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
	<script type="text/javascript">
		function getvalues(){
			// 获取input里的值并输出
			alert($("input[name = age]").val());
			// 获取input里的值并修改
			$("input[name=age]").val("300");
		}
	</script>
</html>

节点及节点属性操作

创建节点

语法


$(selector)：通过选择器获取节点 $(element)：把DOM节点转化成jQuery节点 $(html)：使用HTML字符串创建jQuery节点


举例

var $newNode=$("<li></li>");
 var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了！</li>");

插入节点

语法

功能

append(content)

$(A).append(B)表示将B追加到A中

如：$("ul").append($newNode1);

appendTo(content)

$(A).appendTo(B)表示把A追加到B中

如：$newNode1.appendTo("ul");

prepend(content)

$(A). prepend (B)表示将B前置插入到A中

如：$("ul"). prepend ($newNode1);

prependTo(content)

$(A). prependTo (B)表示将A前置插入到B中

如：$newNode1. prependTo ("ul");

元素外部插入同辈节点

语法

功能

after(content)

$(A).after (B)表示将B插入到A之后

如：$("ul").after($newNode1);

insertAfter(content)

$(A). insertAfter (B)表示将A插入到B之后

如：$newNode1.insertAfter("ul");

before(content)

$(A). before (B)表示将B插入至A之前

如：$("ul").before($newNode1);

insertBefore(content)

$(A). insertBefore (B)表示将A插入到B之前

如：$newNode1.insertBefore("ul");

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				width:200px;
				height: 200px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<a href="">adnkjsdnkasdn</a>
			<p>4565116</p>
			<p>4565116</p>
		</div>
		<button id="bt1" onclick="plk()" name="">点我</button>
		
	</body>
	<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
	<script type="text/javascript">
	
		// $(A).append(B)表示将B追加到A中
		var str = $("<p>sdad</p>");
		$("#d1").append(str);
		
		// $(A). prepend (B)表示将B前置插入到A中
		var str2 = $("<p>sdad1111</p>");
		$("#d1").prepend(str2);
		
		// $(A).after (B)表示将B插入到A之后
		var str3 = $("<p>sdad1265265</p>");
		$("#d1").after(str3);
		
		// $(A). before (B)表示将B插入至A之前
		var str4 = $("<p>sdad265</p>");
		$("#d1").before(str4);
		
	</script>
</html>

删除节点

remove()：删除整个节点

empty()：清空节点内容

detach()：删除整个节点，保留元素的绑定事件、附加的数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				width:200px;
				height: 200px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<a href="">adnkjsdnkasdn</a>
			<p>4565116</p>
			<p>4565116</p>
		</div>
		
	</body>
	<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
	<script type="text/javascript">
    // 删除节点
		$("#d1").remove();//删除整个节点
		
		$("#d1").empty();//删除节点内容

	</script>
</html>

替换节点

使用replaceWith()替换现有节点：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				width:200px;
				height: 200px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<a href="">adnkjsdnkasdn</a>
			<p>4565116</p>
			<p>4565116</p>
		</div>
		
	</body>
	<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
	<script type="text/javascript">
    //使用 replaceWith替换节点
		$("#d1>a").replaceWith($("<p>这是被替换的</p>"));
    </script>
</html>

当然replaceWith() 与replaceAll() 方法都可以实现元素节点的替换，二者最大的区别在 于替换字符的顺序，前者是用括号中的字符替换所选择的元素，后者是用字符串替换括号中所选择的元素。同时，一旦完成替换，被替换元素中的全部事件都将消失。

复制节点

clone()用于复制某个节点：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<button id="bt1" onclick="plk()" name="">点我</button>
		
	</body>
	<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
	<script type="text/javascript">
    // 使用clone，用于复制某个节点
		function plk(){
			alert("我出来了！")
		}
        var tpo=$("#bt1").clone();
		$("#bt1").after(tpo);
    		
	</script>
</html>

节点遍历

语法：

$(selector).children();//遍历子元素
$(selector).next();//遍历同辈之后的
$(selector).prev();//遍历同辈之前的
$(selector).slibings();//遍历同辈前后的
$(selector).parent();//遍历父级
$(selector).parents();//遍历父级和以上的
$(selector).each( );//遍历每一个

属性操作

语法：

$(selector).attr([name]) ;//获取
//或
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;//设置
$(selector).removeAttr(name) ;//删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				width:200px;
				height: 200px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<button id="bt1" onclick="plk()" name="">点我</button>
	</body>
	<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
	<script type="text/javascript">
		// 使用attr()获取与设置属性
		$("#bt1").attr({["name":"btname"]});
        //使用aatr()删除属性
		$("#bt1").remove("name");
		console.log($("#d1").attr("name"));
	</script>
</html>