jQuery操作属性实践
<!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中文网的标题被修改了')//通过点击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('我内容被被修改了')//text只能修改当前标签的内容
$('.color1').html('<h1>我不光内容被修改了，标签也被修改了</h1>')//html既可以修改内容，又可以修改标签元素
$('input').click(function(){
$(this).val('button')//通过点击input标签改变当前标签下的value属性值为button
})
})
</script>
<p>php中文网</p>
<button id="red">变红</button>
<button id="bold">变粗、变大</button>
<button id="noRed">取消变红</button>
<button id="noBold">取消变粗、变大</button>
<hr>
<div id="attr" title="这里是php中文网的标题">这里是php中文网</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>
