摘要：通過練習(xí)，對addClass、removeClass、toggleClass、text、html及val進(jìn)行了復(fù)習(xí)<!DOCTYPE html><html><head> <meta charset=utf-8" /> <title>jquery操作屬性練習(xí)</title> <scrip
通過練習(xí)，對addClass、removeClass、toggleClass、text、html及val進(jìn)行了復(fù)習(xí)
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>jquery操作屬性練習(xí)</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js" ></script>
<style type="text/css">
div{width:200px;height:200px;text-align:center;line-height:200px;}
.aa{background-color:red;}
.bb{border-radius:50%;}
.cc{width:400px;height:400px;text-align:center;line-height:400px;}
input{width:400px;height:35px;margin:40px 0px 0px 70px; }
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('#button1').click(function(){
$('div').addClass('aa')
})
$('#button2').click(function(){
$('div').toggleClass('bb')
})
$('#button3').click(function(){
$('div').addClass('cc')
})
$('#button4').click(function(){
$('div').removeClass('aa bb cc')
})
$('#button5').click(function(){
$('div').text('happy new year')
})
$('#button6').click(function(){
$('div').removeClass('div aa bb cc')
$('div').html('<input type="text" name="" value="輸入登錄名">')
})
$('#button7').click(function(){
$('input').val('輸入密碼')
})
})
</script>
<div>新年快樂</div><br />
<button id="button1">添加背景色</button>
<button id="button2">形狀變化</button>
<button id="button3">變大</button>
<button id="button4">重置所有</button>
<button id="button5">改變內(nèi)容</button>
<button id="button6">改變樣式</button>
<button id="button7">更改val</button>
</body>
</html>