1.大小写转换
1 <script> 2 var a='aaa'; 3 var b='AaA'; 4 var c='BbB'; 5 //alert(c.toLowerCase()); 6 //把含有大写的字母转换为小写； 7 //alert(b.toUpperCase()); 8 //小写转换为大写 9 alert(a.toLowerCase()==b.toLowerCase()); 10 </script>
2.查找相应元素的位置
1 <script> 2 var str='abcdef'; 3 alert(str.search('f')); 4 //返回5，从0开始计数；返回元素所在的位置； 5 //没有找到换回-1； 6 </script>
3.split分割字符串+search查询
1 <script> 2 var str='paxster boychik'; 3 var arr=str.split(' '); 4 //使用空格来分割字符串，也就是把字符串装换为数组 5 //alert(arr); 6 var str2='paxster is a man'; 7 var bFound=false; 8 //定义一个变量，首先为false; 9 for(i=0;i<arr.length;i++) 10 { 11 if(str2.search(arr[i])!=-1) 12 { 13 bFound=true; 14 break; 15 } 16 } 17 alert(bFound); 18 </script>
4.获取表格元素
1 window.onload=function () 2 { 3 var oTab=document.getElementById('tab1'); 4 //alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[2].getElementsByTagName('td')[1].innerHTML); 5 alert(oTab.tBodies[0].rows[2].cells[1].innerHTML);//row代表行，cell代表列 6 }; 7 </script>
5.onsubmit+onreset事件
1 <script> 2 window.onload=function () 3 { 4 var oForm=document.getElementById('form1'); 5 var oUser=document.getElementsByName('user')[0]; 6 var oPass=document.getElementsByName('pass')[0]; 7 oForm.onsubmit=function () 8 //在提交之前提示 9 { 10 if(oUser.value=='' || oPass.value=='') 11 { 12 alert('您填错了'); 13 return false; 14 } 15 }; 16 oForm.onreset=function () 17 //在重置表单之前提示 18 { 19 /*if(confirm('是否要清空？')) 20 { 21 return true; 22 } 23 else 24 { 25 return false; 26 }*/ 27 //return confirm('是否要清空？'); 28 confirm('是否要清空？')?true:false; 29 }; 30 }; 31 </script> 32 </head> 33 <body> 34 <form id="form1" action="http://www.paxst.com/" method="get"> 35 用户名：<input type="text" name="user" /> 36 密码：<input type="password" name="pass" /> 37 <input type="submit" value="提交" /> 38 <input type="reset" value="重置" /> 39 </form> 40 </body>
6.移动ul里面的li
1 <script> 2 window.onload=function () 3 { 4 var oBtn=document.getElementById('btn1'); 5 var oUl1=document.getElementById('ul1'); 6 var oUl2=document.getElementById('ul2'); 7 //把ul1添加到ul2; 8 oBtn.onclick=function () 9 { 10 var aLi=oUl1.getElementsByTagName('li'); 11 //appendChild 12 //1.先移除父级 2.添加到新的父级 13 oUl2.appendChild(aLi[0]); 14 }; 15 }; 16 </script>
1 <script> 2 window.onload=function () 3 //给自己添加 4 { 5 var oBtn=document.getElementById('btn1'); 6 var oUl1=document.getElementById('ul1'); 7 8 oBtn.onclick=function() 9 { 10 var aLi=oUl1.getElementsByTagName('li'); 11 oUl1.appendChild(aLi[0]); 12 }; 13 }; 14 </script>
7.对数字进行排序sort()函数
1 <script> 2 window.onload=function () 3 { 4 var oBtn=document.getElementById('btn1'); 5 var oUl=document.getElementById('ul1'); 6 oBtn.onclick=function () 7 { 8 var aLi=oUl.getElementsByTagName('li'); 9 var arr=[]; 10 var i=0; 11 //1.转成数组 12 for(i=0;i<aLi.length;i++) 13 { 14 arr[i]=aLi[i]; 15 } 16 //2.数组排序 17 arr.sort(function (li1, li2){ 18 return parseInt(li1.innerHTML)-parseInt(li2.innerHTML); 19 //parseInt函数，把字符串转换为数值 20 }); 21 //3.重新插入 22 for(i=0;i<arr.length;i++) 23 { 24 oUl.appendChild(arr[i]); 25 } 26 }; 27 }; 28 </script>
8.表单隔行变色
1 <script> 2 window.onload=function () 3 { 4 //隔行变色 5 var oTab=document.getElementById('tab1'); 6 var oldBgColor=''; 7 var i=0; 8 9 for(i=0;i<oTab.tBodies[0].rows.length;i++) 10 { 11 oTab.tBodies[0].rows[i].style.background=i%2?'#CCC':''; 12 13 oTab.tBodies[0].rows[i].onmouseover=function () 14 { 15 oldBgColor=this.style.background; 16 this.style.background='yellow'; 17 }; 18 19 oTab.tBodies[0].rows[i].onmouseout=function () 20 { 21 this.style.background=oldBgColor; 22 }; 23 } 24 }; 25 </script>
9.升序+降序
1 window.onload=function () 2 { 3 var oBtn=document.getElementById('btn1'); 4 var oTab=document.getElementById('tab1'); 5 var bAsc=true; //是否是升序排列 6 7 oBtn.onclick=function () 8 { 9 var arr=[]; 10 var i=0; 11 //1.转成数组 12 for(i=0;i<oTab.tBodies[0].rows.length;i++) 13 { 14 arr[i]=oTab.tBodies[0].rows[i]; 15 } 16 17 //2.数组排序 18 arr.sort(function (tr1, tr2){ 19 if(bAsc) 20 { 21 return parseInt(tr1.cells[0].innerHTML)-parseInt(tr2.cells[0].innerHTML); 22 } 23 else 24 { 25 return parseInt(tr2.cells[0].innerHTML)-parseInt(tr1.cells[0].innerHTML); 26 } 27 }); 28 29 //3.重新插入 30 for(i=0;i<arr.length;i++) 31 { 32 oTab.tBodies[0].appendChild(arr[i]); 33 } 34 35 bAsc=!bAsc; 36 37 /*if(bAsc) 38 { 39 bAsc=false; 40 } 41 else 42 { 43 bAsc=true; 44 }*/ 45 }; 46 };
10.表格增加/删除功能
1 window.onload=function () 2 { 3 var oTab=document.getElementById(·2'tab1'); 4 var oBtn=document.getElementById('btn1'); 5 var oTxt=document.getElementById('txt1'); 6 var iNowId=oTab.tBodies[0].rows.length+1; 7 8 oBtn.onclick=function () 9 { 10 var oTr=document.createElement('tr'); 11 var oTd=null; 12 13 oTd=document.createElement('td'); 14 oTd.innerHTML=iNowId++; 15 oTr.appendChild(oTd); 16 17 oTd=document.createElement('td'); 18 oTd.innerHTML=oTxt.value; 19 oTr.appendChild(oTd); 20 21 oTd=document.createElement('td'); 22 oTd.innerHTML='<a href="javascript:;">删除</a>'; 23 oTr.appendChild(oTd); 24 25 oTd.getElementsByTagName('a')[0].onclick=function () 26 { 27 oTab.tBodies[0].removeChild(this.parentNode.parentNode); 28 }; 29 30 oTab.tBodies[0].appendChild(oTr); 31 }; 32 };
11.搜索表格元素/高亮显示
1 window.onload=function () 2 { 3 var oBtn=document.getElementById('btn1'); 4 var oTab=document.getElementById('tab1'); 5 var oTxt=document.getElementById('txt1'); 6 7 oBtn.onclick=function () 8 { 9 var i=0; 10 11 for(i=0;i<oTab.tBodies[0].rows.length;i++) 12 { 13 var sValueInTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase(); 14 var sValueInTxt=oTxt.value.toLowerCase(); 15 var arr=sValueInTxt.split(' '); 16 17 var bFound=false; 18 19 for(var j=0;j<arr.length;j++) 20 { 21 if(sValueInTab.search(arr[j])!=-1) 22 { 23 bFound=true; 24 break; 25 } 26 } 27 28 if(bFound) 29 { 30 oTab.tBodies[0].rows[i].style.background='yellow'; 31 } 32 else 33 { 34 oTab.tBodies[0].rows[i].style.background=''; 35 } 36 } 37 }; 38 };