样式操作
1、属性操作 2、常规操作add、remove、has（判断是否存在该属性节点） 3、样式直接操作 4、获取、设置单个样式：jquery(obj.css(样式属性名,[值])) 5、设置多个样式：jquery(obj.css(样式对象))
大小与位置操作
位置： offset([obj])：设置或获取在页面中的位置 position()：获取的位置相对与最近的定位祖先的位置 大小：均可添加数值作为参数，有参数时为设置，无参数是获取 获取设置conten的width与height width()、height()、content()
获取设置conten的width+padding innerWidth()、innerHight()+padding
获取设置conten的width+padding+width outerWidth([true/false])、outerHight([true/false])
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.4.1.min.js"></script>
</head>
<style>
ul{
list-style: none;
}
.red{
color: red;
}
.blue{
color: blue;
}
li{
padding: 5px;
border:red solid;
background: burlywood;
}
form{
line-height: 40px;
}
.bg{
background-color: cyan;
font-size:40px;
}
</style>
<body>
<div style="margin: 100px; position: relative; width: 500px; height: 400px;">
<div id="boxIn" style="margin: 100px; position: absolute; top: 30px; left:20px">
大家好
</div>
</div>
<h1>dom节点初识</h1>
<ul id="myUl">
<li class="red">1</li>
<li class="blue">2</li>
<li class="red" id="Li3">
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>
<li class="blue"><a href="" title="我是链接头" id="A1">我是链接</a></li>
</ul>
<form action="">
用户名：<input name="username" type="text"><br>
密码：<input name="pwd" type="password"><br>
爱好：<input name="ins" type="checkbox" value="sing">唱歌
<input name="ins" type="checkbox" value="code">编程<br>
<select name="sl" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">南京</option>
</select><br>
<p><button type="submit">提交</button></p>
</form>
<script>
$(document).ready(function(){
// $("#Li3 li").addClass("bg");
// $("#Li3 li").removeClass("bg");
//hasClass返回值为布尔型
/*if($("#Li3 li").hasClass("bg")){
alert("有bg");
}else{
alert("没有bg");
}*/
//动态添加某一个单独样式，链式添加多个样式
//$("#Li3 li").css("border", "blue dotted 3px").css("font-size", "40px");
//添加一组样式，当有横线的时候，要改写成小驼峰的写法
/*$("#Li3 li:first").css({
backgroundColor:"yellow",
fontSize:"30px"
});*/
//获取相对于页面的位置
// console.log($("#Li3 li:first").offset());
/*console.log($("#boxIn").offset());
console.log($("#boxIn").position());*/
//获取设置conten的width与height
$("#Li3").width(400);
console.log($("#Li3").width(),$("#Li3").height());
//获取设置conten的width+padding
console.log($("#Li3").innerWidth(),$("#Li3").innerHeight());
//获取设置conten的width+padding+width
console.log($("#Li3").outerWidth(),$("#Li3").outerHeight());
//获取设置conten的width+padding+width+margin
console.log($("#Li3").outerWidth(true),$("#Li3").outerHeight(true));
});
</script>
</body>
</html>
