文本主要内容
-
样式和类操作
-
节点操作
#样式操作和类操作
作用：设置或获取元素的样式属性值。
#样式操作
1、设置样式：
//设置单个样式： css(属性，值);
$("div").css("background-color","red");
//设置多个样式： css(json);
$("div").css({"width":100,"height":100,"background-color":"pink"});
2、获取样式：
//获取样式：css(属性);
//获取的时候如果有很多个，那么获取jquery对象中的第一个
alert($("div").css("width"));
举例如下：
#类操作（className）
1、添加类样式：
$(selector).addClass("liItem"); //为指定元素添加类className
注意：此处类名不带点，所有类操作的方法类名都不带点。
2、移除类样式：
$(selector).removeClass("liItem"); //为指定元素移除类 className
$(selector).removeClass(); //不指定参数，表示移除被选中元素的所有类
3、判断有没有类样式：
$(selector).hasClass("liItem"); //判断指定元素是否包含类 className
此时，会返回true或false。jquery对象中，只要有一个带有指定类名的就是true，所有都不带才是false。
举例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.current {
background-color: red;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
$("button").eq(0).click(function () {
//添加类
$("div").addClass("current");
//判断类
alert($("div").hasClass("current"));
});
$("button").eq(1).click(function () {
//删除类
$("div").removeClass("current");
//判断类
alert($("div").hasClass("current"));
});
//alert($("div").hasClass("current"));//jquery对象中只要有一个带有类名的就是true，所有都不带才是false。
})
</script>
</head>
<body>
<button>添加</button>
<button>删除</button>
<div></div>
<div></div>
<div></div>
<div class="current"></div>