摘要：<!DOCTYPE html>
<html>
<head>
<title>jQuery操作屬性</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.0.0/jqu
<!DOCTYPE html>
<html>
<head>
<title>jQuery操作屬性</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
.red {
color: red;
}
.bold {
font-weight: bold;
font-size: 40px;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('#red').click(function(){
$('p').addClass('red')//通過點擊id為red的標簽為p標簽添加class名為red的屬性值
})
$('#bold').click(function(){
$('p').addClass('bold')
})
$('#noRed').click(function(){
$('p').removeClass('red')//通過點擊id為noRed的標簽為p標簽刪除class名為noRed的屬性值
})
$('#noBold').click(function(){
$('p').removeClass('bold')
})
$('#alert').click(function(){
$('#attr').attr('title','php中文網(wǎng)的標題被修改了')//通過點擊id為alert的標簽修改id為attr的標簽下title的屬性值
alert($('#attr').attr('title'))
})
$('#noTitle').click(function(){
$('#attrs').removeAttr('src')//通過點擊id為noTitle的標簽去除id為attrs標簽的src屬性
})
$('#hasClass').click(function(){
alert($('.one').hasClass('one'))//通過點擊id為hasClass的標簽查看class為one的標簽是否含有one這個class屬性值
})
$('#toggle').click(function(){
$('#color,.color1, #color2').toggleClass('red')//通過點擊id為toggle的標簽來回切換id為color/class為color1/id為color2標簽的顏色
})
$('#color').text('我內(nèi)容被被修改了')//text只能修改當前標簽的內(nèi)容
$('.color1').html('<h1>我不光內(nèi)容被修改了，標簽也被修改了</h1>')//html既可以修改內(nèi)容，又可以修改標簽元素
$('input').click(function(){
$(this).val('button')//通過點擊input標簽改變當前標簽下的value屬性值為button
})
})
</script>
<p>php中文網(wǎng)</p>
<button id="red">變紅</button>
<button id="bold">變粗、變大</button>
<button id="noRed">取消變紅</button>
<button id="noBold">取消變粗、變大</button>
<hr>
<div id="attr" title="這里是php中文網(wǎng)的標題">這里是php中文網(wǎng)</div>
<img id="attrs" src="images/1.jpg" width="20px">
<button id="alert">彈出修改后的標題</button>
<button id="noTitle">去除src的值</button>
<hr>
<div class="one">hello world</div>
<button id="hasClass">點擊查看</button>
<hr>
<div id="color">這個字體會變色</div>
<p class="color1">我也會變</p>
<span id="color2">我還會變</span>
<button id="toggle">切換</button>
<hr>
<input value="點擊" type="button" name="">
</body>
</html>
