1.操作内容
- 获取：
- 设置：
- 双标签：html('新内容')
- input:val('新内容')
2.操作属性
* 获取：attr('属性名')
* 设置：attr('属性名','新的值')
3.样式操作
* 获取：css('样式名')
* 设置：css('样式名','新的值') css({"样式名1":"新的值","样式名2":"新的值"})
4.额外封装的
- css操作类操作：
- addClass()：添加类名
- removeClass()：删除类名
- toggleClass()：切换类名
- 尺寸操作：
- height()：高度
- width()：宽度
- scrollTop()：滚动高度
- scrollLeft()：滚动距左边距离
5.代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作内容，属性，样式</title>
<style>
#box {}
.content {}
</style>
</head>
<body>
<div>div的内容</div>
<input type="text" value="input的标签" />
<script src=" https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script>
//获取内容
console.log($("div:eq(0)").html())
console.log($("input:eq(0)").html())
//设置内容
$('div:eq(0)').html('新的值')
$('input:eq(0)').html('新的input值')
//设置属性
$("div:eq(0)").attr('id', 'box').attr('class', 'content')
//获取属性
console.log($("div:eq(0)").attr('id'))
//获取样式
console.log($("div:eq(0)").css('fontsize'))
//设置样式
$("div:eq(0)").css('color', 'red').css('fontsize', '30px')
$("div:eq(0)").css({
'border': '1px solid #000',
'background': 'skyblue',
'margin': '10px auto',
'height': '400px',
'width': 300,
'padding': "20px"
})
</script>
</body>
</html>