一、函數(shù)傳參

? ? 1、函數(shù)傳參：參數(shù)就是占位符----函數(shù)里定不下來的東西 var a1=function(){ alert(123); }; function a(f){ // 相當(dāng)于 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、兩種設(shè)置屬性的方法 obj.value="abcd" --------- ? obj['value']="abcd" ? ? ? ??[ ]可以代替所有的.?? ?oDiv.style.background 和 oDiv[style]['background']一樣? .后面只能帶原本就有的屬性，不能帶字符串。即使a是個(gè)參數(shù)，它也以為是個(gè)屬性a。 [ ]具體屬性名可隨意改變，可存變量、參數(shù)、字符串。 屬性可以變時(shí)用[ ]；其他都可以用.? function fn(a,b){ var oBox=document.getElementById('box'); oBox.style.a=b; ? //這樣不行 oBox.style[a]=b; ?//正確寫法 } 2、什么時(shí)候用：要改的屬性不固定 字符串和變量——區(qū)別和聯(lián)系 3、樣式優(yōu)先級 行內(nèi)>class>標(biāo)簽>* 元素.style.屬性=……是修改行間樣式，之后再修改className不會(huì)有效果 三、提取行間事件 ??? 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; ? ? // 只需要放函數(shù)名， 不加括號(hào)，否則就是執(zhí)行 例二： var oBtn=document.getElementById('btn'); //讀到此行時(shí)，input還沒加載，所以找不到元素 var oBox=document.getElementById('box'); oBtn.value=444; ?//報(bào)錯(cuò) oBtn.οnclick=function(){ oBox.style.background='blue'; } <input type="button" id="btn" /> <div id="box"></div> ??? 2、window.onload=function(){ ?}在頁面加載后才開始執(zhí)行 四、操作一組元素 1. document.getElementsByTagName可從document獲取，也可從某個(gè)元素下獲取，縮小選擇范圍；且不限層級。即使只有一個(gè)div，獲取出來也是一組。 ? ? 數(shù)組：用來存放一組東西，但是不能直接操作數(shù)組，下標(biāo)從0開始 2. document.getElementById只能從document下獲取。 3.?children?子級，只是一級、一組下標(biāo)，不管是什么標(biāo)簽只要是子級都獲取。 4、不能直接給一組元素改變樣式： aDiv.style.background='blue'; ?//不能這樣寫，不能直接給一組元素改變樣式。應(yīng)該用循環(huán)while遍歷 改進(jìn)：aDiv[0].style.background='blue'; 或者：aDiv.style.background='blue'; 四、循環(huán)——反復(fù)去做一件事 ??? 1、什么時(shí)候用循環(huán)：給一組元素干同樣的事情。 ??? 2、一個(gè)循環(huán)的四個(gè)部分 ? ? ? ? （1）初始化、條件、語句、自增 ???3、while(條件){語句} [1]下標(biāo)，代表第幾個(gè)，從零開始，0代表第一個(gè)，最后一個(gè)永遠(yuǎn)比length少一個(gè)。 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('條件已經(jīng)走完'); ??? 4、for循環(huán)-----?for（初始值;條件；自增）{} (1) for(var i=0;m=aLi.length;i<m;i++){}//性能更好一些 ? ? ? ? (2) ?循環(huán)里的事件里面不能用i，因?yàn)檠h(huán)結(jié)束之后才觸發(fā)了事件。變量不進(jìn)行人為更改，就永遠(yuǎn)都不會(huì)改。 (3)for循環(huán)適合做次數(shù)固定（能獲取固定的length）的循環(huán)。 五、this ??1. this---->當(dāng)前用事件函數(shù)的對象，觸發(fā)事件的元素本身 2. 如果不是事件函數(shù)----->window for(var i=0;i<aLi.length;i++) {? aLi[i].οnmοuseοver=function() {? function fn1() {? alert(this); //window?只會(huì)去找包著this的第一層函數(shù) }; 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'; } } } }? 七、焦點(diǎn)問題和鼠標(biāo)按下抬起 自動(dòng)聚焦：<input type="text" autofocus /> 1. onfocus 獲得焦點(diǎn) var aInput=document.getElementByTagName('input'); for(var i=0;i<aInput.length;i++){ aInput[i].onfocus=function(){ alert(this.value); } } 2.?onblur 失去焦點(diǎn) 例一：搜索框 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 ?鼠標(biāo)按下的時(shí)候 ? ? onmouseup 鼠標(biāo)抬起 oTxt.οnmοusedοwn=function(){ alert(111); } 4. innerHTML----獲取或修改html內(nèi)容（該元素必須是雙標(biāo)簽的）如果內(nèi)容有標(biāo)簽，則連標(biāo)簽一起返回 window.οnlοad=function(){ var oBox=document.getElementById('box'); oBox.οnclick=function(){ oBox.innerHTML=333333; //會(huì)覆蓋原來的內(nèi)容 oBox.innerHTML=''; ? //清空 oBox.innerHTML='<h1>標(biāo)題</h1>'; ?//創(chuàng)建標(biāo)簽 } } js簡易日歷 例子：乘法表 oUl=document.getElementsById('ul1'); for(var i=0;i<9;i++){ var s='<li>'; //循環(huán)嵌套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; //點(diǎn)全選切換 如果達(dá)到全不選的效果 第二個(gè)全選框得勾上 ? }; ?}; ?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; ? ? ? ? ?}; }; 九、選項(xiàng)卡 ? ??在循環(huán)的事件里，不要用i，改用this,index 1. <input a="0" 在標(biāo)題里直接寫自定義屬性，只有IE8及以下才能直接獲取xxx.a 2. HTML加載順序： 加載HTML——>高級瀏覽器過濾掉自定義屬性（不等于取不著）——>)JS 解決：自定義屬性在第三步走js的時(shí)候才加上 多個(gè)選項(xiàng)卡? window.onloadd=function(){ f('box','div','onclick'); f('box2','p','onmouseover'); f('box3','div','onclick'); //每調(diào)用一次函數(shù)，都是一個(gè)新的函數(shù)，相當(dāng)于復(fù)制函數(shù)。 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'; } } } } 十. 焦點(diǎn)圖 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'; } } };

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。