jQuery中的元素操作

最新推荐文章于 2023-03-10 16:13:26 发布

聪聪的学习笔记

最新推荐文章于 2023-03-10 16:13:26 发布

阅读量194

点赞数 1

分类专栏： jQuery 文章标签： jquery html css

本文链接：https://blog.csdn.net/weixin_42773097/article/details/120353084

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、元素内容操作

元素内容操作是jQuery对元素文本的DOM操作。

获取html中的内容
在这里插入图片描述

二、元素属性操作、元素样式操作

在这里插入图片描述

添加样式类

toggleClass()比较特别，如果代码中本身存在，则不添加样式。如果没有再添加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.c1{
				width: 100px;
				height: 100px;
				background-color: aquamarine;
			}
		</style>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function(){
				//动态添加一个样式给t6
				$("#t6").addClass("c1");
				//动态移出样式
				$("#t6").removeClass("c1");
				//动态添加或删除样式
				$("#t6").toggleClass("c1");
				
			});
		</script>
	</head>
	<body>
		<div id="t6"></div>
	</body>
</html>

在这里插入图片描述

元素CSS操作

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function(){
				$("#t1").attr("style","width:100px;height:100px;background:red");
				$("#t1").css({"background":"green","color":"white"})
			});
		</script>
	</head>
	<body>
		<div id="t1"></div>
	</body>
</html>

聪聪的学习笔记

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
jQuery中的元素操作

一、元素内容操作元素内容操作是jQuery对元素文本的DOM操作。获取html中的内容二、元素属性操作、元素样式操作添加样式类toggleClass()比较特别，如果代码中本身存在，则不添加样式。如果没有再添加<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/
复制链接

扫一扫