本文已参与「新人创作礼」活动，一起开启掘金创作之路。
一、JQ操作HTML属性
具体示例通过代码进行展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: #63c7f9;
}
</style>
</head>
<body>
<div></div>
<input type="text" value="87654"><br>
<input type="text" value="12345">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>
<script>
// 1.JQ添加class属性 JS中是ClassName，会覆盖
// addClass不会覆盖之前的class值，会添加
$("div").addClass("box")
$("div").addClass("box1")//会添加，而不是覆盖前面的class属性值
$("div").addClass("box1")//不添加，但是也不会删除相同的属性值
// 2.增加class属性
// $("div").toggleClass("box") //新增
// $("div").toggleClass("box1") //新增
// $("div").toggleClass("box1") //两个相同的属性值就会执行删除操作
// 3.JQ删除属性值
// $("div").removeClass("box1")
// 删除、添加两个方法的结合使用
// $("div").removeClass("box").addClass("box3")
// 4.JQ删除属性
// $("div").removeAttr("class")
// 5.增加其他属性值attr("属性名","属性值")
$("div").attr("id","box")
// 6.删除
$("div").removeAttr("id")
// 7. JS获取value值
// var aipt = document.getElementsByTagName("input")[0]
// console.log(aipt.value);
// 8. JQ获取value值
var aipt = $("input")
// val()作用一：获取值，默认获取第一个value元素值
console.log(aipt.val());
//eq()传下标获取第二个元素值
console.log(aipt.eq(1).val());
// val()作用二：遍历修改值，都会修改，而不是只修改一个
aipt.val(88888)
</script>
</body>
</html>
二、JQ操作CSS样式
具体示例通过代码进行介绍：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
background-color: skyblue;
margin: 20px;
position: relative;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
/*padding: 50px;*/
/*border: 5px red solid;*/
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>
<script>
// 1.JQ获取盒子宽高
console.log($("div").width());
console.log($("div"). height());
// 2.innerWidth:获取盒子宽度+内边距
console.log($("div").innerWidth());
// 3.outerWidth:获取盒子宽度+内边距+边框宽度
console.log($("div").outerWidth());
// 4.JQ修改CSS样式 属性名 属性值
// // 1）修改一个样式
// $("div").css("background","red")
// // 2）修改多个样式：以键值对的方式
// $("div").css({
// "width":"300px",
// "height":"300px",
// "border":"6px solid yellow"
//
// })
// 5.JQ定位元素
// 父级没有定位之前，定位是浏览器窗口
// 父级有定位，定位的是父级
console.log($(".box1").position());
// 不管父级有没有定位，定位的都是浏览器窗口
console.log($(".box1").offset());
</script>
</body>
</html>
