一、css()方法
jQuery中设置css样式方法：
第一种：
$(this).css("background-color", "blue")
第二种：
$(this).css({
"background-color":"blue",
"colorr":"red"
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 650px;
height: 430px;
margin: 0 auto;
background-color: #000;
}
ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 10px;
}
ul li {
list-style: none;
margin-bottom: 20px;
opacity: 0.8;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="#"><img src="img/01.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/02.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/03.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/04.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/05.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/06.jpg" alt=""></a>
</li>
</ul>
</div>
<script>
$(function() {
// 给li标签绑定鼠标移入的事件
$("ul li").mouseover(function() {
// 如何获取到当前鼠标移入li标签，this
$(this).css("opacity", 1).siblings().css("opacity", 0.5)
// 给鼠标移入的li标签的opacity设置为1，将其它的兄弟标签li的opacity设置为0.5
})
$("ul li").mouseout(function() {
// 设置opacity的值为1/0.5
$("ul li").css("opacity", 1)
})
})
</script>
</body>
</html>
二、class操作方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<style>
li {
list-style: none;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
float: left;
margin: 10px;
border: 1px solid #999;
}
.basic {
background-color: blue;
font-size: 32px;
color: red;
}
.bigger {
color: #fff;
}
</style>
</head>
<body>
<input type="button" style="margin-left:60px;" value="添加basic类">
<input type="button" value="添加bigger类">
<input type="button" value="移除bigger类">
<input type="button" value="判断bigger类">
<input type="button" value="切换类">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
$(function() {
// 添加basic类
// addClass():给元素添加class，如果元素上已经有其他的classname，
// 那么会将新增加的追加到现有的classname后面
// 找到第一个input标签，绑定单击事件
$("input:first").click(function() {
// 先获取到所有的li
// 然后再给这些li添加class
$("ul li").addClass("basic")
})
// 添加bigger类
$("input:eq(1)").click(function() {
// 先获取到所有的li
// 然后再给这些li添加class
$("ul li").addClass("bigger")
})
// 移除bigger类
// removeClass():可以将元素的某个class移除，如果为传参数，则可以将元素上的所有class移除掉
$("input:eq(2)").click(function() {
// 先获取到所有的li
// 然后再移除li上面的class
$("ul li").removeClass("bigger") //移除class为bigger的
$("ul li").removeClass() //将元素上所有class移除掉
})
// 判断bigger类
$("input:eq(3)").click(function() {
// 先获取到所有的li
// hasclass(类名)：用来判断元素上是否又来某个class，如果有，则返回true，反之则返回false
// alert($("ul li").hasclass("bigger"))
// 如下代码用来判断是否有tigger，如果没有则进行添加
if ($("ul li").hasClass("bigger")) {
$("ul li").addClass("bigger")
}
})
// 切换类
$("input:eq(4)").click(function() {
// 先获取到所有的li
$("ul li").toggleClass("bigger")
})
})
</script>
</body>
</html>
三、jQuery添加元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<style>
ul {
list-style: none;
line-height: 30px;
width: 600px;
padding: 0px;
}
ul li:nth-child(even) {
background: #f1c40f;
}
ul li:nth-child(odd) {
background: green;
}
span {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<button id="btn1">append添加</button>
<button id="btn2">appendTo添加</button>
<button id="btn3">prepend添加</button>
<button id="btn4">prependTo添加</button>
<button id="btn5">before添加</button>
<button id="btn6">after添加</button>
<ul>
<li>香蕉</li>
<li class="aa">苹果</li>
<li>菠萝</li>
</ul>
<script>
$(function() {
/*
append() appendTo(),prepend(),prependTo(),都是给某元素前面/后面添加子元素
before()/after():指的是给某元素前面/后面添加兄弟元素
*/
$("#btn1").click(function() {
$("ul").append("<li>榴莲</li>")
})
$("#btn2").click(function() {
$("<li>西瓜</li>").appendTo("ul")
})
$("#btn3").click(function() {
$("ul").prepend("<li>葡萄</li>")
})
$("#btn4").click(function() {
$("<li>哈密瓜</li>").prependTo("ul")
})
$("#btn5").click(function() {
$("ul").before("<h2>水果清单</h2>")
})
$("#btn6").click(function() {
$("ul").after("<span>注意：水果不易保存，请及时食用！</span>")
})
})
</script>
</body>
</html>