1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 7 <script> 8 $(function(){ 9 $('#btn1').click(function(){ 10 $('h1,h2').addClass('blue'); 11 $('h3').removeClass('blue'); 12 $('h4').toggleClass('red'); 13 $('#p1').css({'color':'green','background-color':'yellow'}); 14 var txt = ""; 15 txt+="div 的宽度是"+$('#d1').width()+'<br>'; 16 txt+='div的高度是'+$('#d1').height()+'<br>'; 17 // $('#d1').text(txt); 18 $('#d1').html(txt); 19 }); 20 function c(){ 21 $('p:first').addClass('red size'); 22 } 23 c(); 24 25 var myDate = new Date(); 26 document.getElementById('demo').innerHTML=isDate(myDate); 27 function isDate(myDate){ 28 return myDate.constructor.toString().indexOf("Date")>-1; 29 } 30 // string()方法可以将数字转换为字符串 31 var x=111; 32 document.getElementById('demo1').innerHTML= 33 String(x)+"<br>"+ 34 String(111)+"<br>"+ 35 String(100+23); 36 var a = "3.14"; 37 document.getElementById('demo2').innerHTML=Number(a); 38 $('#btn2').click(function(){ 39 var str='Ni helloworld sss'; 40 // i执行对大小写不敏感的匹配 41 var n = str.search(/hello/i); 42 document.getElementById('demo3').innerHTML=n; 43 }); 44 }); 45 </script> 46 <style type="text/css"> 47 .blue 48 { 49 color:blue; 50 } 51 .size 52 { 53 font-family: "宋体"; 54 font-weight: bold; 55 } 56 .red 57 { 58 color: red; 59 } 60 </style> 61 </head> 62 <body> 63 <p>获取并设置CSS类</p> 64 <p>css()设置或返回样式属性</p> 65 <h1>一级标题</h1> 66 <h2>二级标题</h2> 67 <h3 class="blue">三级标题</h3> 68 <h4 class="blue">切换css</h4> 69 <p id="p1">设置多个css属性</p> 70 <div id="d1" style="background-color: blueviolet; 300px; height: 300px;"> 71 <p>高度宽度</p> 72 </div> 73 <br /> 74 <p><button id="btn1" >点击</button></p> 75 <p>判断是否为日期</p> 76 <p id='demo'></p> 77 <p id='demo1'></p> 78 <p>将字符串转为数字</p> 79 <p id='demo2'></p> 80 <p>搜索字符串‘hello’,并显示匹配的起始位置</p> 81 <p id="demo3"></p> 82 <button id="btn2">点击</button> 83 </body> 84 </html>