3.2.9: jQuery的DOM操作之样式操作

最新推荐文章于 2019-04-27 16:36:40 发布

原创最新推荐文章于 2019-04-27 16:36:40 发布 · 593 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery

1. 获取样式和设置样式：

html代码如下：

<p class="myClass" title="what kind of fruit do you like best?">你最喜欢的水果是?</p>

在上面的代码中，class也是<p>元素的属性，因此获取class和设置class都可以使用attr()方法来完成。

例如使用attr()方法来获取<p>元素的class：

<script type="text/javascript">
	$(document).ready(function(){
		alert($("p").attr("class"));
	});
</script>

也可以使用attr()方法来设置<p>元素的class：

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.myClass{
	color:red
}
.change{
	color:blue
}
</style>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("p").attr("class","change");
	});
</script>
</head>
<body>
<p class="myClass" title="what kind of fruit do you like best?">你最喜欢的水果是?</p>
</body>
</html>

在大多数情况下，它是将原来的class替换为新的class，而不是在原来的基础上追加新的class。如果我们需要的是追加效果，即：

<p class="myClass change" title="what kind of fruit do you like best?">你最喜欢的水果是?</p>

我们该怎么做呢？

2. 追加样式：

jQuery提供了专门的addClass()方法来追加样式。

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.myClass{
	font-weight:bold;
	color:red
}
.another{
	font-style:italic;
}
</style>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("input").click(function(){
			$("p").addClass("another");
		});
	});
</script>
</head>
<body>
<p class="myClass" title="what kind of fruit do you like best?">你最喜欢的水果是?</p>
<input type="button" value="追加class">
</body>
</html>

单击按钮后：

审查元素：

在CSS中有以下两条规定：

a: 如果给一个元素添加了多个class值，那么就相当于合并了它们的样式。

b: 如果有不同的class设定了同一样式属性，则后者覆盖前者。

3. 移除样式：

追加样式使用addClass()方法，移除样式使用removeClass()方法。

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.myClass{
	font-weight:bold;
	color:red
}
.another{
	font-style:italic;
}
</style>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("input").click(function(){
			$("p").removeClass("another");
		});
	});
</script>
</head>
<body>
<p class="myClass another" title="what kind of fruit do you like best?">你最喜欢的水果是?</p>
<input type="button" value="移除样式">
</body>
</html>

单击按钮后：

如果要把两个class都删除，可以这样:

$("p").removeClass("another").removeClass("myClass");

或者：

$("p").removeClass("another myClass");

如果一个元素有多个class，并且要将其全部移除，可以使用不带参的removeClass()方法。

$("p").removeClass();

4. 切换样式：

不带任何参数的toggle()函数的作用是切换元素的可见状态：如果元素为可见的，切换为隐藏的；如果元素为隐藏的，切换为可见的。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">

</style>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#btn").click(function(event){
		$("#d1").toggle();
	});
});
</script>
</head>
<body>
<div style="border:1px solid black;width:160px;height:20px;background-color:purple;" id="d1">我是一个div</div>
<input type="button" id="btn" value="测试toggle()函数">
</body>
</html>

点击按钮，div消失，再次点击按钮，div出现。这就是不带参数的toggle()函数的作用。我们还可以为元素的隐藏和显示设置速度，只要为toggle()函数传一个数字即可，单位为毫秒。

到这里我们可以想到我们经常在网页中碰到的将鼠标移上去显示出来，然后鼠标移开则隐藏掉的效果，这个功能用到了hover(over,out)函数，over是鼠标移上去的事件函数，out是鼠标移开的事件函数。

<script type="text/javascript">
$(document).ready(function(){
	$("#btn").hover(overout, overout);
});
function overout(){
	$("#d1").toggle(1000);
}
</script>

另外jQuery还提供了一个toggleClass()方法控制样式上的重复切换：如果类名存在则删除它，如果类名不存在则添加它。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.selected{
	color:red
}
</style>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("input").click(function(){
			$("p").toggleClass("selected");
		});
	});
</script>
</head>
<body>
<p>hello</p>
<p class="selected">world</p>
<input type="button" value="测试toggleClass()函数">
</body>
</html>

5. 判断是否含有某个样式：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.selected{
	color:red
}
</style>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		alert($("#p1").hasClass("selected"));
		alert($("#p2").hasClass("selected"));
	});
</script>
</head>
<body>
<p id="p1">hello</p>
<p id="p2" class="selected">world</p>
</body>
</html>