jq语法中的类选择器

钱端攻城狮

已于 2022-04-02 21:46:14 修改

阅读量487

点赞数

分类专栏： jQuery 文章标签：前端

于 2022-04-02 21:34:03 首次发布

本文链接：https://blog.csdn.net/m0_54932975/article/details/123929500

版权

jQuery 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用JavaScript和jQuery来操作DOM元素的class属性。内容包括添加、删除和切换class，以及如何根据元素的索引添加不同的class。示例代码中展示了对div元素的class进行操作，并通过按钮实现class的切换效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.root{
				background-color: salmon;
			}
		</style>
	</head>
	<body>
		<!--div{div$}*4-->
		<div>div1</div>
		<div>div2</div>
		<div>div3</div>
		<div>div4</div>
		
		<button id="btn">点击切换样式</button>
	</body>
</html>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
	//js中如何给标签设置class选择器  只能一个一个 获取标签对象才能.className
	var div1 = document.querySelector("div:first-child");
	div1.className = "c1";
	
	
	
	//jq中  既可以给1个标签设置 也可以同时设置多个标签  因为不写for循环
	$("div").addClass("one");
	//想添加不同的class
	$("div").addClass(function(index, value){  //value 是当前标签正在显示的class值
		console.log(index, value);
		return "div" + (index + 1);
	});
	//如果添加的值 没有规律!!
	var classArray = ["root", "box", "header", "content"]; //0--3
	$("div").addClass(function(index, value){
		return classArray[index]; //标签下标刚好也是0--3  
	})
	//---------------------------------
	//删除class 
	$("div").removeClass("c1");
	$("div").removeClass("one");
	//怎么添加的就怎么删掉!!!
	$("div").removeClass(function(index, value){
		return "div" + (index + 1);
	})
	$("div").removeClass(function(index, value){
		return classArray[index];
	})
	//---------------------------------------------
	//既能添加还能删除     如果不存在此class值,就是添加! 如果已存在此class值,就是删除!
   $("#btn").click(function(){
   	$("div").toggleClass("root");
   })

	//写法同上!!!
	
	
</script>