摘要:<!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>
测试了好半天,一开始没有注意大小写,浪费了好多的时间。