1. 跟CSS操作相关的内容:
1.1 类名操作：()里面填写的是类名，记得类名是字符串格式的。
addClass();// 添加指定的CSS类名。例如：$('.c1').addClass('hide');
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
示例：自定义模态框
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自定义模态框</title>
<style>
.cover {
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.modal{
400px;
height:200px;
background-color:white;
position:absolute;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-100px; /*居中*/
}
.c1:hover{
color:red;
}
.hide { /*隐藏标签*/
display: none;
}
</style>
</head>
<body>
<div class="c1">点我送迈腾2020款TSI DSG</div>
<div class="cover hide"></div>
<div class="modal hide">
<form action="">
<div>
<lable>用户名<input type="text" name="用户名"></lable>
<lable>密码<input type="password" name="password"></lable>
</div>
<div>
<input type="submit" value="登录">
<input type="button" value="取消" class="cancle">
</div>
</form>
</div>
<script src="jquery-3.4.1.min.js"></script>
<script>
//点c1触发下面的两标签删除类名hide
$('.c1').click(function () {
$(this).nextAll().removeClass('hide');
});
//点cancle触发两标签添加hide
$('.cancle').click(function () {
$('.cover').addClass('hide');
$('.modal').addClass('hide');
});
</script>
</body>
</html>
1.2 CSS操作：注意：属性值就是键值对，要使用引号
$("p").css("color", "red"); //将所有p标签的字体设置为红色
$("p").css('border','red solid 1px');
$("p").css({'color':'green','font-size':'20px'}); //修改多个属性值，要使用键值对。
示例：点击字体，变绿变大。
<style>p{color:red;font-size:15px;}</style>
<p>迈腾2020款</p>
<p>努力追求</p>
<script>
//this是当前点击的p标签
$('p').click(function () {
$(this).css({'color':'green','font-size':'20px'});
});
</script>
1.3 位置操作：注意：属性值就是键值对，但这里的top和left不需要引号。尺寸也不需要px作为单位。
offset() // 获取当前窗口的相对偏移$('div').offset()结果是Object { top: 0, left: 0 }，
//设置位置$('div').offset({top:100,left:50});
position() // 获取相对父元素的偏移,注意body标签也可以是父元素
scrollTop() // 获取相对滚动条顶部的偏移，常用：$(window).scrollTop()；等于一个尺寸。
$(window).scrollTop(0)；窗口滚动条滚动到顶部的距离是0。
scrollLeft() // 获取相对滚动条左侧的偏移
示例：返回顶部
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style>
div{
200px;
height:3000px;
background-color:red;
}
.b1{
position:fixed;
right:30px;
bottom:30px;
font-size:20px;
background:black;
color:white;
}
.hide{
display:none;
}
</style>
</head>
<body>
<div>divdiv</div>
<button class="b1 hide">返回顶部</button>
<script src="jquery-3.4.1.min.js"></script>
<script>
$(window).scroll(function () {
if($(window).scrollTop()>200){//窗口滚动条滚动到顶部的距离大于200
$('.b1').removeClass('hide');//那么返回顶部这四个字出现
}else{$('.b1').addClass('hide');}//距离小于等于200，否则隐藏
});
$('.b1').click(function () {
$(window).scrollTop(0);//窗口滚动条滚动到顶部的距离是0。
});
</script>
</body>
</html>
1.4 尺寸：
height() //$('.c1').height() 内容区的高度
width() //$('.c1').height() 内容区的宽度
innerHeight() //内容区+padding的高度
innerWidth() //内容区+padding的宽度
outerHeight() //内容区+padding+border的高度
outerWidth() //内容区+padding+border的宽度