一、函數傳參

? ? 1、函數傳參：參數就是占位符----函數里定不下來的東西 var a1=function(){ alert(123); }; function a(f){ // 相當于 f=a1 f(); }; a(a1); function skip(skipPath){ var oLink1 = document.getElementById('link1'); ?oLink1.href=skipPath; } function setStyle(name,value){ var oDiv1 = document.getElementById('div1'); ?oDiv1.style[name]=value; } 二、操作屬性的第二種方式?????? ? ? ? ? ? ? ? ? ? ? 1、兩種設置屬性的方法 obj.value="abcd" --------- ? obj['value']="abcd" ? ? ? ??[ ]可以代替所有的.?? ?oDiv.style.background 和 oDiv[style]['background']一樣? .后面只能帶原本就有的屬性，不能帶字符串。即使a是個參數，它也以為是個屬性a。 [ ]具體屬性名可隨意改變，可存變量、參數、字符串。 屬性可以變時用[ ]；其他都可以用.? function fn(a,b){ var oBox=document.getElementById('box'); oBox.style.a=b; ? //這樣不行 oBox.style[a]=b; ?//正確寫法 } 2、什么時候用：要改的屬性不固定 字符串和變量——區別和聯系 3、樣式優先級 行內>class>標簽>* 元素.style.屬性=……是修改行間樣式，之后再修改className不會有效果 三、提取行間事件 ??? 1、提取事件的幾種方法 （1）function 名字(){ ? ? } oBtn.οnclick=名字 （2）oBtn.οnclick=function(){ ? ? } 例一： <input id="btn" type="button" οnclick="fn()" /> var oBtn=document.getElementById('btn'); oBtn.value=4444; function fn(){ alert(1); } oBtn.οnclick=fn; ? ? // 只需要放函數名， 不加括號，否則就是執行 例二： var oBtn=document.getElementById('btn'); //讀到此行時，input還沒加載，所以找不到元素 var oBox=document.getElementById('box'); oBtn.value=444; ?//報錯 oBtn.οnclick=function(){ oBox.style.background='blue'; } <input type="button" id="btn" /> <div id="box"></div> ??? 2、window.onload=function(){ ?}在頁面加載后才開始執行 四、操作一組元素 1. document.getElementsByTagName可從document獲取，也可從某個元素下獲取，縮小選擇范圍；且不限層級。即使只有一個div，獲取出來也是一組。 ? ? 數組：用來存放一組東西，但是不能直接操作數組，下標從0開始 2. document.getElementById只能從document下獲取。 3.?children?子級，只是一級、一組下標，不管是什么標簽只要是子級都獲取。 4、不能直接給一組元素改變樣式： aDiv.style.background='blue'; ?//不能這樣寫，不能直接給一組元素改變樣式。應該用循環while遍歷 改進：aDiv[0].style.background='blue'; 或者：aDiv.style.background='blue'; 四、循環——反復去做一件事 ??? 1、什么時候用循環：給一組元素干同樣的事情。 ??? 2、一個循環的四個部分 ? ? ? ? （1）初始化、條件、語句、自增 ???3、while(條件){語句} [1]下標，代表第幾個，從零開始，0代表第一個，最后一個永遠比length少一個。 i=i+1;即 i++，i+=1; ? ? ? ?i=i--;即i--; i-=1; i=i+2;即i+=2; ? ? ? ?i*=2;即i=i*2; ? ? ? ?i/=2即i=i/2; 例子：var i=0; ? ? while(i<5){ alert(i); i++; } alert('條件已經走完'); ??? 4、for循環-----?for（初始值;條件；自增）{} (1) for(var i=0;m=aLi.length;i<m;i++){}//性能更好一些 ? ? ? ? (2) ?循環里的事件里面不能用i，因為循環結束之后才觸發了事件。變量不進行人為更改，就永遠都不會改。 (3)for循環適合做次數固定（能獲取固定的length）的循環。 五、this ??1. this---->當前用事件函數的對象，觸發事件的元素本身 2. 如果不是事件函數----->window for(var i=0;i<aLi.length;i++) {? aLi[i].οnmοuseοver=function() {? function fn1() {? alert(this); //window?只會去找包著this的第一層函數 }; fn1(); }; }; 頂部菜單： window.οnlοad=function(){ aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ aLi[i].οnmοuseοver=function(){ ?var oDiv=this.children[0]; if(oDiv){ oDiv.style.display='block'; var oA=oDiv.children[0]; if(oA){ oA.οnclick=function(){ oDiv.style.display='none'; } } } } aLi[i].οnmοuseοut=function(){ var oDiv=this.children[0]; if(oDiv){ oDiv.style.display='none'; } } } }? 七、焦點問題和鼠標按下抬起 自動聚焦：<input type="text" autofocus /> 1. onfocus 獲得焦點 var aInput=document.getElementByTagName('input'); for(var i=0;i<aInput.length;i++){ aInput[i].onfocus=function(){ alert(this.value); } } 2.?onblur 失去焦點 例一：搜索框 var oSpan=document.getElementById('span1'); var oTex=document.getElementById('tex'); var oUl=document.getElementById('ul1'); var aLi=oUl.children; oTex.οnfοcus=function(){ oSpan.style.display='none'; oUl.style.display='block'; }; oTex.οnblur=function(){ if(this.value==''){ oSpan.style.display='block'; }; oUl.style.display='none'; }; for(var i=0;i<aLi.length;i++){ aLi[i].οnmοusedοwn=function(){ var str=this.children[0].innerHTML; oTex.value=str; }; }; <div> <span id="span1">請輸入文本</span> <input type="text" id="oInput" /> <ul> <li><a href="javascript:;">菜單1</a></li> <li><a href="javascript:;">菜單2</a></li> <li><a href="javascript:;">菜單3</a></li> </ul> </div> 3.?onmousedown ?鼠標按下的時候 ? ? onmouseup 鼠標抬起 oTxt.οnmοusedοwn=function(){ alert(111); } 4. innerHTML----獲取或修改html內容（該元素必須是雙標簽的）如果內容有標簽，則連標簽一起返回 window.οnlοad=function(){ var oBox=document.getElementById('box'); oBox.οnclick=function(){ oBox.innerHTML=333333; //會覆蓋原來的內容 oBox.innerHTML=''; ? //清空 oBox.innerHTML='<h1>標題</h1>'; ?//創建標簽 } } js簡易日歷 例子：乘法表 oUl=document.getElementsById('ul1'); for(var i=0;i<9;i++){ var s='<li>'; //循環嵌套i不能同名 for(j=0;j<i+1;j++){ s+='<span>'+(j+1)+'*'+(i+1)+'='+(i+1)*(j+1)+'</span>'; } s+='</li>'; oUl.innerHTML+=s; } 八、全選反選不選 window.οnlοad=function(){ ?var oBtn1=document.getElementById('btn1'); ?var oBtn2=document.getElementById('btn2'); ?var oBtn3=document.getElementById('btn3'); ?var aInput=document.getElementById('box').getElementsByTagName('input'); ?oBtn1.οnclick=function(){ ? for(var i=0;i<aInput.length;i++){ ? ?aInput[i].checked=this.checked; ? }; ? oBtn2.checked=false; ? oBtn3.checked=false; ? if(!this.checked){ ? ?oBtn2.checked=true; //點全選切換 如果達到全不選的效果 第二個全選框得勾上 ? }; ?}; ?for(var i=0;i<aInput.length;i++){ ? aInput[i].οnclick=function(){ ? ?var count=0; ? ?for(var j=0;j<aInput.length;j++){ ? ? if(aInput[j].checked){ ? ? ?count++; ? ? } ? ?} ? ?if(count==aInput.length){ ? ? oBtn1.checked=true; ? ?}else{ ? ? oBtn1.checked=false; ? ?} ? } ?} ?oBtn2.οnclick=function(){ ? for(var i=0;i<aInput.length;i++){ ? ?aInput[i].checked=false; ? }; ? oBtn1.checked=false; ? oBtn3.checked=false; ?}; ?oBtn3.οnclick=function(){ ? for(var i=0;i<aInput.length;i++){ ? ?/*if(aInput[i].checked){ ? ? aInput[i].checked=false; ? ?}else{ ? ? aInput[i].checked=true; ? ?};*/ ? ?aInput[i].checked=!aInput[i].checked; ? }; ? oBtn1.checked=false; ? oBtn2.checked=false; ? ? ? ? ?}; }; 九、選項卡 ? ??在循環的事件里，不要用i，改用this,index 1. <input a="0" 在標題里直接寫自定義屬性，只有IE8及以下才能直接獲取xxx.a 2. HTML加載順序： 加載HTML——>高級瀏覽器過濾掉自定義屬性（不等于取不著）——>)JS 解決：自定義屬性在第三步走js的時候才加上 多個選項卡? window.onloadd=function(){ f('box','div','onclick'); f('box2','p','onmouseover'); f('box3','div','onclick'); //每調用一次函數，都是一個新的函數，相當于復制函數。 function f(id,tagname,mouse){ var oBox=document.getElementById(id); var aBtn=oBox.getElementsByTagName('input'); var aDiv=oBox.getElementsByTagName(tagname);? for(var i=0;i<aBtn.length;i++){ aBtn[i].index=i; aBtn[i][mouse]=function(){ for(var i=0;i<aDiv.length;i++){ aBtn[i].className=''; aDiv.className=''; } this.className='active'; aDiv[this.index].className='show'; } } } } 十. 焦點圖 window.οnlοad=function(){ var oBox=document.getElementById('box'); var oPic=oBox.children[0]; var oNum=oBox.children[1]; var aLi1=oPic.children; var aLi2=oNum.children; for(var i=0;i<aLi2.length;i++){ aLi2[i].index=i; aLi2[i].οnmοuseοver=function(){ for(var i=0;i<aLi2.length;i++){? aLi2[i].className='';? aLi1[i].className=''; } this.className='active'; aLi1[this.index].className='active'; } } };

總結

以上是生活随笔為你收集整理的JS一起学02：函数传参、操作属性第二种方式、提取行间事件、循环、this、焦点问题、联动选择、选项卡焦点图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。