首先说，学习js先学关于对象的操作，包括获取对象，操作对象等。
获取对象：
getElementById()：根据id获取对象。
getElementsByTagName（）：根据标签名获取对象。
getElementsByClassName()：根据class获取对象。
值得一提的是：getElementById()获取到的是一个对象。（毕竟同id只有一个╮(╯▽╰)╭）
getElementsByTagName（）和 getElementsByClassName() 获取的是一个对象集合，所以对应的也就有了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>
第二个例子贴出来的主要是为了说一下，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 300px; 10 height: 300px; 11 background-color: coral; 12 } 13 14 .ktest2 { 15 300px; 16 height: 300px; 17 background-color: blueviolet; 18 } 19 </style> 20 </head> 21 22 <body> 23 <!--<div class="ktest1" onclick="sk()" style=" 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>
主要是应用.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>