首先说,学习js先学关于对象的操作,包括获取对象,操作对象等。
获取对象:
getElementById():根据id获取对象。
getElementsByTagName():根据标签名获取对象。
getElementsByClassName():根据class获取对象。
值得一提的是:getElementById()获取到的是一个对象。(毕竟同id只有一个╮(╯▽╰)╭)
一个对象集合,所以对应的也就有了getElementsByTagName()[0]和 getElementsByTagName().length等。 so当只有一个属性时候也必须用getElementsByTagName()[0]而不是getElementsByTagName()来获取。
下面给个例子:
View Code
再来一个
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title>特效</title>
7 <style type="text/css">
8
9
10 </style>
11 <script type="text/javascript">
12 function ch() {
13 var div1 = document.getElementById('test1');
14 //注意这里的大于等于0
15 if(div1.src.indexOf('13')>=0){
16 div1.src = '../img/12.jpg';
17 }
18 else{
19 div1.src = '../img/13.jpg';
20 }
21 }
22 </script>
23 </head>
24
25 <body>
26 <img id="test1" src="../img/13.jpg" alt="" onclick="ch();" />
27 </body>
28
29 </html>
View Code
第二个例子贴出来的主要是为了说一下,indexOf()方法,这里用它实现了图片可以切换多次。indexOf()方法是寻找,找到则为0,否则为负数。注意这里加了>=0,这点经常出错,因为if里面的语句返回值是应该是true或false,而由于js里面数据都是var型的,而indexOf()返回都是数字,不像其他语言(除1外都是false)。小细节O(∩_∩)O哈!。
下面说一下,js联系css:
先贴代码吧
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title>编辑对象</title>
7 <style type="text/css">
8 .ktest1 {
9 width: 300px;
10 height: 300px;
11 background-color: coral;
12 }
13
14 .ktest2 {
15 width: 300px;
16 height: 300px;
17 background-color: blueviolet;
18 }
19 </style>
20 </head>
21
22 <body>
23 <!--<div class="ktest1" onclick="sk()" style="width: 300px; height: 300px;"></div>-->
24 <div class="ktest1" onclick="sk()" ></div>
25 </body>
26 <script type="text/javascript">
27 // 解决用css写style后不能调用style问题(以前只能在标签里面写style/(ㄒoㄒ)/~~)
28 function getStyle(obj,attr){
29 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,null)[attr];
30 }
31 function sk() {
32 var sks = document.getElementsByTagName('div')[0];
33 if (sks.className.indexOf('ktest1') >= 0) {
34 sks.className = 'ktest2';
35 } else {
36 sks.className = 'ktest1';
37 }
38 // 这里的400 不用加单位(px)
39 // alert(getStyle(sks,'width'));
40 if (parseInt(getStyle(sks,'width')) < 400) {
41 sks.style.width = parseInt(getStyle(sks,'width')) + 20 + 'px';
42 sks.style.height = parseInt(getStyle(sks,'width')) + 20 + 'px';
43 // alert(parseInt(sks.style.width));
44 } else {
45 sks.style.width = this.parseInt(sks.width) + 'px';
46 sks.style.height = this.parseInt(sks.height) + 'px';
47 }
48 }
49 </script>
50
51 </html>
View Code
主要是应用.style
小细节:js应用样式时候,如background-color这种,js不识别-,它里面的写法是backgroundColor。
上面的代码中也实现了,用currentStyle和getComputedStyle来解决.style获取不到css里面的参数问题(没有他俩,js只能识别标签里面的style╮(╯▽╰)╭)。
下面在贴一个联动菜单例子(值得一看):
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title>联动菜单</title>
7 <script type="text/javascript">
8 var area = [
9 ['朝阳', '海淀', '门头沟'],
10 ['裕华', '晋州', '藁城']
11 ];
12
13 function ld() {
14 var sel = document.getElementById('pro');
15 // alert(sel.value);
16 var opt = '';
17 // 解决选择"请选择"时候,右边菜单不为空问题
18 if (sel.value == '-1') {
19 document.getElementById('city').innerHTML = opt;
20 return;
21 }
22 // 把每个area里的元素加起来显示
23 //len表示area中每行的长度
24 for (var i = 0, len = area[sel.value].length; i < len; i++) {
25 opt = opt + '<option value=" ' + i + ' ">' + area[sel.value][i] + '</option>';
26 }
27 document.getElementById('city').innerHTML = opt;
28 }
29 </script>
30 </head>
31
32 <body>
33 <select id="pro" onchange="ld();">
34 <option value="-1">请选择</option>
35 <option value="0">北京</option>
36 <option value="1">石家庄</option>
37 </select>
38 <select id="city">
39 </select>
40 </body>
41
42 </html>
View Code
myGitgub https://github.com/mfx55 希望我的博客能帮到你