元素的样式设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.cls {
width: 200px;
height: 100px;
background-color: crimson;
}
.cls2 {
border:2px solid green;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
$("#btn").click(function(){
// 为div设置类样式,同时应用多个类样式
// $("#dv").addClass("cls");
// $("#dv").addClass("cls").addClass("cls2");
// $("#dv").addClass("cls cls2");
// console.log($("#dv").addClass());
// console.log($("#dv").addClass("cls"));
// addClass()方法,括号里什么也没有,返回来的仍然是这个对象
// 即使在括号中设置内容,返回来的还是这个对象
// removeClass()方法,同上
// 移除类样式
// $("#dv").removeClass("cls");
// $("#dv").removeClass("cls").removeClass("cls2");
// $("#dv").removeClass("cls cls2");
// console.log($("#dv").removeClass());
// console.log($("#dv").removeClass("cls"));
// css方法是不能添加或移除类样式的
// $("#dv").css("class","cls");
});
});
// 总结:设置元素的样式可以使用css()方法,也可以使用addClass()或者是
// removeClass()方法
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div id="dv" class=""></div>
</body>
</html>元素类样式的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.cls {
width: 200px;
height: 100px;
background-color: red;
}
.cls2 {
border: 2px solid green;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
$("#btn").click(function(){
// 判断这个元素是否应用了某个类样式
if($("#dv").hasClass("cls cls2")){
console.log("应用了");
}else{
console.log("没有应用");
}
});
});
// hasClass()是判断元素是否应用了这个类样式的
// addClass()添加类样式
// removeClass()移除类样式
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div id="dv" class="cls cls2"></div>
</body>
</html>开关灯效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.cls {
background-color: black;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
// $(function(){
// $("#btn").click(function(){
// // 判断body是否应用了cls类样式,如果应用了就移除,否则就添加
// if($("body").hasClass("cls")){
// $("body").removeClass("cls");
// $("#btn").val("关灯");
// }else{
// $("body").addClass("cls");
// $("#btn").val("开灯");
// }
// });
// });
// 第二种方式
$(function(){
$("#btn").click(function(){
// 切换----类样式
$("body").toggleClass("cls");
});
});
</script>
</head>
<body>
<input type="button" value="关灯" id="btn">
</body>
</html>获取兄弟元素的几个方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul {
list-style-type: none;
cursor: pointer;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
$("#three").click(function(){
// 获取某个li的下一个兄弟元素
// $(this).next("li").css("backgroundColor","yellowgreen");
// 获取某个li的前一个兄弟元素
// $(this).prev("li").css("backgroundColor","greenyellow");
// 获取某个li的后面的所有的兄弟元素
// $(this).nextAll("li").css("backgroundColor","red");
// 获取某个li的前面的所有的兄弟元素
// $(this).prevAll("li").css("backgroundColor","red");
// 获取当前的li的所有的兄弟元素
$(this).siblings("li").css("backgroundColor","gray");
});
});
</script>
</head>
<body>
<ul id="uu">
<li>凤姐</li>
<li>芙蓉姐姐</li>
<li id="three">犀利哥</li>
<li>大力哥</li>
<li>小月月</li>
<li>小胖</li>
<li>小明</li>
<li>小红</li>
</ul>
</body>
</html>当前元素的兄弟元素样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul {
list-style-type: none;
cursor: pointer;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
$("ul>li").mouseenter(function(){
// 鼠标进入事件
$(this).css("backgroundColor","red").siblings("li")
.css("backgroundColor","");
}).mouseleave(function(){
// 鼠标离开事件
$(this).parent().find("li").css("backgroundColor","");
}).click(function(){
// 点击事件
// $(this).prevAll("li").css("backgroundColor","yellow");
// $(this).nextAll("li").css("backgroundColor","blue");
// 断链:对象调用方法之后,返回的已经不是当前的这个对象了,
// 此时再调用方法,就出现了断链
// .end()方法是修复断链,恢复断链之前的状态
// 不推荐使用链式编程
$(this).prevAll("li").css("backgroundColor","yellow")
.end().nextAll().css("backgroundColor","blue");
});
});
</script>
</head>
<body>
<ul id="uu">
<li>凤姐</li>
<li>芙蓉姐姐</li>
<li>犀利哥</li>
<li>大力哥</li>
<li>小月月</li>
<li>小胖</li>
<li>小明</li>
<li>小红</li>
</ul>
</body>
</html>