jQuery - 获取并设置 CSS 类 

 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; width: 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>

 

posted on 2018-08-15 11:44  一颗豆豆  阅读(448)  评论(0)    收藏  举报

导航