JAVA-HTML——jQuery之DOM操作

最新推荐文章于 2023-04-23 17:02:11 发布

Mr,helios

最新推荐文章于 2023-04-23 17:02:11 发布

阅读量239

点赞数

分类专栏： Java html

本文链接：https://blog.csdn.net/amieelingbo/article/details/107441623

版权

Java 同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

html

11 篇文章 0 订阅

订阅专栏

attr属性操作

attr(name|properties|key,value|key,fn)：设置或返回被选元素的属性值。
1、获取值

<script>
	console.log($("#title").attr("id"));
</script>
<div id="title">zzu</div>

运行结果：
在这里插入图片描述

在这里插入图片描述
2、改变值
eg：

<a id="link"> 百度一下，你就知道</a>
<script>
	$("#link").attr("href","http://www.baidu.com");//用于给a标签添加所指向网址
</script>

运行结果：
在这里插入图片描述

3、删除
removeAttr(name)：删除name属性，如下例子：

<a id="link" href="http://www.baidu.com"> 百度一下，你就知道</a>
<script>
	$("#link").removeAttr("href");
</script>

运行结果：
在这里插入图片描述
并无链接效果，即代码发生作用

class属性操作

1、addClass(class|fn)：为匹配元素设置class属性的属性值，多个属性值使用空格间隔

<style>
			.zzu{
				background-color: aqua;
			}
</style>
<script>
	$("#title").addClass("zzu");//用于为id为title元素添加类zzu
</script>			
<div id="title">zzu</div>//本身没有类名

在这里插入图片描述
2、removeClass([class|fn])：删除匹配元素class属性的属性值，多个属性值使用空格间隔

<style>
			.zzu{
				background-color: aqua;
			}
</style>
<script>
	$("#title").removeClass("zzu");//用于为id为title元素添加类zzu
</script>			
<div id="title" class="zzu">zzu</div>//本身没有类名

在这里插入图片描述
即没有背景色
3、toggleClass(class|fn[,sw])：切换样式——如果类名存在则删除它，如果类名不存在则添加它。
4、hasClass()：判断元素中是否含有某个 class，如果有，则返回 true；否则返回 false；

HTML代码/文本

html([val|fn])：获取或设定匹配元素的html内容，fn函数返回一个HTML字符串，该函数有两个参数：第一个参数为元素在集合中的索引位置，第二个参数为旧HTML标签；


<script>
	$("#test").html("<b>郑州大学</b>");
</script>
<span id="test"></span>

在这里插入图片描述
添加成功，注意此时b标签生效
2、text([val|fn]) ：获取或设置匹配元素的内容，结果是匹配元素包含的文本内容组合起来的文本；

<script>
	$("#test").text("<b>郑州大学</b>");
</script>
<span id="test"></span>

在这里插入图片描述
注意：此时标签不生效，只是添加文本

值

val([val|fn|arr])：获取或设置匹配元素当前值；fn返回一个要设置的值，该函数有两个参数：index为元素在集合中的索引位置，text为原先的text值；arr用于选中单选、复选、下拉列表，注意：必须为JavaScript数组。

eg：

		<input type="checkbox" name="ball" value="0"/>篮球
		<input type="checkbox" name="ball" value="1"/>乒乓
		<input type="checkbox" name="ball" value="2"/>足球
		<input type="radio" name="sex" value="0"/>男
		<input type="radio" name="sex" value="1" />女
		<script>
			$("[name='sex']").val(["0"]);//自动选中value为0的项
			$("[name='ball']").val(["1","2"]);//自动选中value为1和2的项
		</script>

在这里插入图片描述

css样式

css(name | properties | [,val|fn])：返回或设置元素样式：
1、name：获取css属性值：
在这里插入图片描述
2、name,value：设置css属性值：

3、properties：设置css属性值：

位置

scrollTop([val])：返回或设置匹配元素相对滚动条顶部的偏移，常用来实现“返回顶端”，如下例子：
eg：

<style>
		#button{
				cursor: pointer;
				height: 50px;
				width: 50px;
				position: fixed;
				right: 10px;
				bottom: 10px;
				background-color: aquamarine;				
			}
</style>
<script>
			function tt(){
				$(document).scrollTop(0);
			}
</script>
		<div id="button" onclick="tt()">回到顶部</div>

在这里插入图片描述
点击之后：

过滤DOM节点

jQuery中过滤DOM节点常用方法如下：
1、first() ：获取第一个元素的jQuery对象；
2、last() ：获取最后个元素的jQuery对象；

<div id="button" onclick="tt()">回到顶部</div>
<div>郑州大学</div>
<div id="title" class="zzu">zzu</div>
<script>
	console.log($("div").first()[0]);
	console.log($("div").last()[0]);
</script>

在这里插入图片描述
即输出第一个div元素和最后一个div元素

查找

jQuery中查找DOM节点常用方法如下：
1、find(e|o|e) ：搜索所有与指定表达式（可以是选择器、jQuery对象或DOM元素）匹配的元素；

<div id="button" onclick="tt()">回到顶部</div>
<div>郑州大学</div>
<div id="title" class="zzu">zzu</div>
<script>
		$("html").find("div").each(function(){
			console.log(this);
		});
</script>

运行结果：
在这里插入图片描述
2、parent([expr]) ：取得一个包含着所有匹配元素的唯一父元素的元素集合。
3、parents([expr]) ：取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。
4、children([expr]) ：获取匹配元素的所有子元素组成的集合；该方法只考虑子元素而不考虑任何后代元素。
5、next([expr]) ：取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
6、nextAll([expr])：查找当前元素之后所有的同辈元素。
7、prev([expr])：取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
8、prevAll([expr])：查找当前元素之前所有的同辈元素。
7和8 举例说明：

<div id="button" onclick="tt()">回到顶部</div>
<div>郑州大学</div>
<div id="title" class="zzu">zzu</div>
<script>
			$("script").prev().each(function(){
				console.log(this);
			});
			console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@");
			$("script").prevAll().each(function(){
				console.log(this);
			});
</script>

在这里插入图片描述
9、siblings([expr])：取得匹配元素前后所有的同辈元素。

添加DMO节点

1、内部插入
append(content|fn) ：向每个匹配元素内部的末尾处插入内容；//举例说明
appendTo(content) ：将每个匹配的元素追加到指定的元素中的内部的末尾；
prepend(content|fn) ：向每个匹配元素内部的开始处插入内容；//举例说明
prependTo(content)：将每个匹配的元素插入到指定的元素内部的开始处；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
	</head>
	<body>
		<div id="title">
			<span>郑州</span>
		</div>
		<script>
			$("#title").prepend("<i>大学</i>")//在id为title的元素
			$("#title").append("<i>大学</i>");
		</script>
	</body>
</html>

在这里插入图片描述
2、外部插入
after(content|fn) ：向每个匹配的元素后插入内容；//举例说明
before(content|fn) ：向每个匹配的元素前插入内容；//举例说明
insertAfter(content)：将匹配的元素插入到另一个、指定的元素后面；
insertBefore(content)：将匹配的元素插入到另一个、指定的元素前面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
	</head>
	<body>
		<b>河南</b>
		<script>
			$("b").before("<i>我爱</i>");
			$("b").after("<i>省</i>");
		</script>
	</body>
</html>

在这里插入图片描述
3、包裹
wrap(html|ele|fn)：把所有匹配的元素用其他元素的结构化标记包裹起来。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
	</head>
	<body>
		<img src="img/cheng_lin.jpg" />
		<script>
			$("img").wrap("<a href='http://www.baidu.com' target='_blank'></a>");
		</script>
	</body>
</html>

在这里插入图片描述
wrapAll(html|ele) ：将所有匹配的元素用一个元素来包裹，而 wrap() 方法是将所有的元素进行单独包裹。
wrapInner(html|ele|fn)：将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来.
unwrap() ：移出匹配元素的父元素，用于取消 .wrap()方法的效果。

Mr,helios

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JAVA-HTML——jQuery之DOM操作

attr属性操作attr(name|properties|key,value|key,fn)：设置或返回被选元素的属性值。1、获取值<script> console.log($("#title").attr("id"));</script><div id="title">zzu</div>运行结果：2、改变值eg：<a id="link"> 百度一下，你就知道</a><script> $("#l
复制链接

扫一扫

专栏目录