jquery样式操作

最新推荐文章于 2024-05-13 01:39:51 发布

this_is_art_of_code

最新推荐文章于 2024-05-13 01:39:51 发布

阅读量831

点赞数

分类专栏： jquery 文章标签： jquery 样式操作

本文链接：https://blog.csdn.net/qq_28596151/article/details/80472151

版权

jquery 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

jquery进行的样式操作方法有addClass()、removeClass()、toggle()和hasClass()。下面我们一一讲解。

1、addClass()追加样式

语法：$(selector).addClass(class);

selector是query选择器，class是待添加的样式。就是给匹配到的元素添加指定的样式。

比如：$("li").addClass("red");

2、removeClass()移除样式

语法：$(selector).removeClass(class);

假如你想让删除匹配到的元素中的样式，就可以使用这个方法。

注意，removeClass()如果不带参数时，会删除匹配到的元素的所有样式。

$(function(){
		$("li").addClass("red");//给li元素添加red样式
		//3秒过后删除元素li的red样式
		setTimeout(function(){
			$("li").removeClass("red");
		},3000);
		
	});

3、toggle()切换样式

语法：$(selector).toggle(function(){},function(){});

该方法会交替执行两个行数中的代码。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery的dom操作</title>
	<script src="../jquery-1.7.2.min.js"></script>
	<style>
		.red{
			color:red;
		}
		.blud{
			color:blue;
		}
	</style>
</head>
<body>
	<p title="选择你喜欢的水果">你最喜欢的水果是?</p>
	<ul> 
		<li title="苹果">苹果</li>
		<li class="" title="橘子title">橘子</li>
		<li title="菠萝">菠萝</li>
		<li title="菠萝2">菠萝2</li>
		<li title="菠萝3">菠萝3</li>
	</ul>
</body>
<script> 
	$(function(){
		//在页面上点击一次就会添加red样式，再点击一次删除red样式。
		//连续点击样式会在有red样式和没有red样式之间来回切换
		$("li").toggle(
			function(){
				$("li").addClass("red");
			},
			function(){
				$("li").removeClass("red");
			}
		);
		
	});
	
</script>
</html>

4、hasClass()判断某个元素是否含有某个样式

结果：如果有就会返回true,否则就会返回false.

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery的dom操作</title>
	<script src="../jquery-1.7.2.min.js"></script>
	<style>
		.red{
			color:red;
		}
		.blud{
			color:blue;
		}
	</style>
</head>
<body>
	<p title="选择你喜欢的水果" οnclick="change()">你最喜欢的水果是?</p>
	<ul> 
		<li title="苹果">苹果</li>
		<li class="" title="橘子title">橘子</li>
		<li title="菠萝">菠萝</li>
		<li title="菠萝2">菠萝2</li>
		<li title="菠萝3">菠萝3</li>
	</ul>
</body>
<script> 
	$(function(){
		//在页面上点击一次就会添加red样式，再点击一次删除red样式。
		//连续点击样式会在有red样式和没有red样式之间来回切换
		/*$("li").toggle(
			function(){
				$("li").addClass("red");
			},
			function(){
				$("li").removeClass("red");
			}
		);*/
		$("li").toggleClass("red");
		
	});
	function change(){
		$("li").toggleClass("red");
		alert($("li").hasClass("red"));
	}
</script>
</html>

this_is_art_of_code

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery样式操作

jquery进行的样式操作方法有addClass()、removeClass()、toggle()和hasClass()。下面我们一一讲解。1、addClass()追加样式语法：$(selector).addClass(class);selector是query选择器，class是待添加的样式。就是给匹配到的元素添加指定的样式。比如：$("li").addClass("red");...
复制链接

扫一扫