10、jQuery遍历操作(each(callback)、each()）、jQuery的CSS操作（属性操作）

最新推荐文章于 2023-03-16 15:27:10 发布

天阳在线€

最新推荐文章于 2023-03-16 15:27:10 发布

阅读量156

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/yangbo_csdn/article/details/119644530

版权

Web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Web目录标题

1、jQuery遍历操作
- 01_each(callback)
- 02_$.each()
2、jQuery的CSS操作
- 01_属性操作_CSS类

1、jQuery遍历操作

01_each(callback)

使用对象访问方式遍历请选择您的爱好
全选/全不选
足球篮球游泳唱歌

在这里插入图片描述

02_$.each()

使用工具类遍历方式 ![在这里插入图片描述](https://img-blog.csdnimg.cn/e6049511cec1433a84ec930d8fe52708.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdib19DU0RO,size_16,color_FFFFFF,t_70)

2、jQuery的CSS操作

01_属性操作_CSS类

<head>
	<meta charset="UTF-8">
	<title>属性操作_CSS类</title>
	<style type="text/css">
		.divclass {
			color: red;
		}
		
		.div1 {
			background-color: yellow;
		}
		
		#div1 {
			border: 1px solid black;
			width: 400px;
			height: 250px;
			margin: auto;
		}
		
		#father {
			border: 1px solid white;
			width: 450px;
			height: 300px;
			margin: auto;
			text-align: center;
		}
	</style>
	<script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
	<script>
		/**
		 * 需求：
		 * 1.点击button，使一个div的背景颜色变为绿色
		 * 2.点击button，使一个div的背景颜色变为绿色以及里面内容的字体颜色变成红色
		 */

		/**
		 * 方法分析：
		 *  1.css(name, value) 设置一个CSS样式属性
		 *  2.css(properties) 传递key - value对象， 设置多个CSS样式属性
		 */

		/**
		 * CSS操作方法汇总：
		 * 1.通过attr属性设置 / 获取 style属性
		 * 	attr('style', 'color:red'); // 添加style属性
		 * 2.设置CSS样式属性
		 * 	css(name, value) 设置一个CSS样式属性
		 * 	css(properties) 传递key - value对象， 设置多个CSS样式属性		
		 * 3.设置class属性
		 * 	addClass(class) 添加一个class属性
		 * 	removeClass([class]) 移除一个class属性
		 * 	toggleClass(class) 如果存在(不存在)就删除(添加) 一个类
		 */

		/**
		 *代码实现 
		 */
		$(function() {
			// 1.点击button，使一个div的背景颜色变为绿色
			//方式一
			/*$("#button1").click(function() {
				$("#div1").css("background-color","green");
			});*/
			
			//方式二：
			$("#button1").click(function() {
				$("#div1").attr("style","background-color:green");
			});

			// 2.点击button，使一个div的背景颜色变为绿色，内容字体颜色变成红色
			$("#button2").click(function() {
				$("#div1").css({"background-color":"green","color":"red"});
			});
		});
	</script>
</head>

<body>
	<div id="father">
		<div id="div1">AAAAAA</div><br />
		<input type="button" value="背景颜色变为绿色" id="button1" />
		<input type="button" value="背景颜色变为绿色内容字体变成红色" id="button2" />
	</div>
</body>

在这里插入图片描述

天阳在线€

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10、jQuery遍历操作(each(callback)、each()）、jQuery的CSS操作（属性操作）

Web目录标题1、jQuery遍历操作01_each(callback)02_$.each()1、jQuery遍历操作01_each(callback) 使用对象访问方式遍历请选择您的爱好全选/全不选足球篮球游泳唱歌 02_$.each() 使用工具类遍历方式 ![在这里插入图片描述](https://img-blog.csdnimg.cn/e6049511cec1433a84ec93
复制链接

扫一扫