摘要：js操作屬性 操作屬性的原理還是對DOM的操作 常用的操作方法 注意操作類時，方法內(nèi)是操作的類名，不帶“.”，操作屬性也一樣。 addClass()和removeClass()方法： 為某個元素添加或刪除某個類，可以用這種方法改變元素的 css 樣式，如果有多各類，需要用逗號隔開。如給 div 元素加上一個可以改變其背景色的類：&nb
js操作屬性
操作屬性的原理還是對DOM的操作
常用的操作方法 注意操作類時，方法內(nèi)是操作的類名，不帶“.”，操作屬性也一樣。
addClass()和removeClass()方法：
為某個元素添加或刪除某個類，可以用這種方法改變元素的 css 樣式，如果有多各類，需要用逗號隔開。如給 div 元素加上一個可以改變其背景色的類：
.bgcolor{ background:red; }
$("div").addClass("bgcolor")attr()和removeAttr()方法：
attr()用來返回元素的某個屬性值，如果傳入兩個參數(shù)，則第一個是屬性名，第二個是需要修改成的屬性值。如輸入框獲取焦點時改變占位符：
$("input").focus(function ({ $("input").attr("placeholder", "你好") })同理，如果要刪除占位符屬性，則代碼改為：
$("input").removeAttr("placeholder")hasClass()方法：
用來返回布爾值，判斷某個元素是否包含某個類。
toggleClass() 方法 用事件配合，對某個元素進(jìn)行添加和刪除某個類的切換操作：
$("div").click(function(){ $("div").toggleClass("bgcolor") })text()/html()/var()方法 ：
這三個方法分別用來返回元素的文本、html內(nèi)容（類似js的innerhtml()方法）、元素的值。
練習(xí)代碼效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.3.1.js"></script>
<style>
input,
button,
div {
display: block;
margin: 20px auto;
}
input {
width: 200px;
transition: 0.5s;
}
div {
text-align: center;
background: grey;
transition: 0.3s;
}
.bgcolor {
background: red;
border-radius: 50%;
transition: 0.3s;
}
</style>
</head>
<body>
<script>
$(document).ready(function () {
$("input").focus(function () {
$("input").attr("placeholder", "你好")
$("input").css("width", "150px")
})
$("div").click(function () {
$("div").toggleClass("bgcolor")
$("div").html("這里是添加進(jìn)去的內(nèi)容")
})
$("button").click(function () {
alert($("div").attr("style"))
})
})
</script>
</body>
<input placeholder="獲取焦點后改變文字（attr 方法）">
<div style="width:200px;height:200px">點擊切換樣式和添加內(nèi)容（toggleClass 方法和 html()方法）</div>
<button>點擊獲取 div元素的寬度和高度</button>
</html>