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>
