摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQuery属性测试</title>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery属性测试</title>
<style type="text/css">
.box{font-size:20px;color:red;font-weight: bold; font-style:italic;}
</style>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('.bt1').click(function(){
$('.test1').text('修改文本内容');
})//可以设置或取出所有标签中所有的文本
$('.bt2').click(function(){
$('.test2').html('<h1>Hello,Html!</h1>');
})//和text的区别在于可以使用html标签
$('.bt3').click(function(){
$('input').val('<h1>Hello,VAL!</h1>');
})//设置或者返回被选元素的值
$('.bt4').click(function(){
//alert($('span').text());
$('span').addClass('box');
$('.test4').addClass('box');
})//增加样式
$('.bt5').click(function(){
//alert($('span').text());
//$('span').addClass('box');
$('.test4').removeClass('box');
})//增加样式
$('.bt6').click(function(){
//alert($('span').text());
//$('span').addClass('box');
alert($('.test6').attr('title'));
//alert($('.test6').attr('title','hello'));
})//
$('.bt7').click(function(){
//alert($('span').text());
//$('span').addClass('box');
$('img').removeAttr('src');
})//移除一个属性或类
$('.bt8').click(function(){
alert($('p').hasClass('test8'));
})//是否有相应的类
$('.bt9').click(function(){
$('p,div').toggleClass('box');;
}) //对被选中元素进行添加/删除类的切换操作
});
</script>
<div class="test1">这是一个测试文本</div>
<p class="test2">测试二</p>
<p class="test3">测试三<input type="text" value="我是可以修改的"></p>
<p class="test4">测试四<span>class</span></p>
<p class="test5">测试五</p>
<p class="test6" title="测试attr">测试attr</p>
<p class="test7"><img src="logo1.png"></p>
<p class="test8">测试八</p>
<p class="test9">测试九</p>
<button class="bt1">设置文本TEXT</button>
<button class="bt2">设置HTML</button>
<button class="bt3">设置VAL</button>
<button class="bt4">设置addclass</button>
<button class="bt5">设置移除removeClass</button>
<button class="bt6">设置attr</button>
<button class="bt7">设置removeAttr</button>
<button class="bt8">设置hasClass</button>
<button class="bt9">设置toggleClass</button>
</body>
</html>测试了好半天，一开始没有注意大小写，浪费了好多的时间。
