html选中行按钮事件,js最基础知识回顾2（函数传参，操作属性的第二种方式，提取行间事件，操作一组元素，this，焦点问题和鼠标按下抬起，选项卡）...

一、函数传参

1、函数传参：参数就是占位符----函数里定不下来的东西

a. var a1=function(){

alert(123);

};

function a(f){

// 相当于 f=a1

f();

};

a(a1);

b.  function skip(skipPath){  //换肤

var oLink1 = document.getElementById(‘link1‘);

oLink1.href=skipPath;

}

c.   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不会有效果，className与style不要混用，出问题不报错，难找

三、提取行间事件

1、提取事件的几种方法

(1)function 名字(){     }

oBtn.οnclick=名字

(2)oBtn.οnclick=function(){     }

例一：

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‘;

}

2、window.οnlοad=function(){  }在页面加载后才开始执行

四、操作一组元素

1. document.getElementsByTagName可从document获取，也可从某个元素下获取，缩小选择范围；且不限层级。即使只有一个div，获取出来也是一组。

数组：用来存放一组东西，但是不能直接操作数组，下标从0开始

2. document.getElementById只能从document下获取。

3. children 子级，只是一级、一组下标，不管是什么标签只要是子级都获取。

4、不能直接给一组元素改变样式：

aDiv.style.background=‘blue‘;  //不能这样写，不能直接给一组元素改变样式。应该用循环while遍历

改进：aDiv[0].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;i

(2)  循环里的事件里面不能用i，因为循环结束之后才触发了事件。变量不进行人为更改，就永远都不会改。

(3)for循环适合做次数固定(能获取固定的length)的循环。

五、this

1. this---->当前用事件函数的对象，触发事件的元素本身

2. 如果不是事件函数----->window

for(var i=0;i

aLi[i].οnmοuseοver=function() {

alert(this);   //鼠标移入的那个li

function fn1() {

alert(this);

//window 只会去找包着this的第一层函数

};

fn1();

};

};

顶部菜单：

window.οnlοad=function(){

aLi=document.getElementsByTagName(‘li‘);

for(var i=0;i

aLi[i].οnmοuseοver=function(){

var oDiv=this.children[0];

if(oDiv){     //判断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‘;

}

}

}

}

七、焦点问题和鼠标按下抬起

自动聚焦：

1. onfocus 获得焦点

var aInput=document.getElementByTagName(‘input‘);

for(var i=0;i

aInput[i].οnfοcus=function(){

alert(this.value);

}

}

2. onblur 失去焦点

例一：搜索框

var oSpan=document.getElementById(‘span1‘);

var oTex=document.getElementById(‘text1‘);

var oUl=document.getElementById(‘ul1‘);

var aLi=oUl.children;       //oUl的直接子集

oTex.οnfοcus=function(){

oSpan.style.display=‘none‘;

oUl.style.display=‘block‘;

};

oTex.οnblur=function(){

if(this.value!=‘‘){   //输入框的值不为空，让oSpan,oUl都隐藏

oSpan.style.display=‘none‘;

oUl.style.display=‘none‘;

};

};

for(var i=0;i

aLi[i].οnmοusedοwn=function(){

oTex.value=this.children[0].innerHTML;

};

};

请输入文本

• 菜单1
• 菜单2
• 菜单3

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(){

this.innerHTML=333333; //会覆盖原来的内容

this.innerHTML=‘‘;   //清空

this.innerHTML=‘

标题

‘;  //创建标签

}

}

八、全选反选不选

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[i].checked=this.checked;

};

oBtn2.checked=false;

oBtn3.checked=false;

if(!this.checked){    //如果全选按钮checked为false，则反选按钮选中

oBtn2.checked=true;

};

};

for(var i=0;i

aInput[i].οnclick=function(){

var count=0;

for(var j=0;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[i].checked=false;

};

oBtn1.checked=false;

oBtn3.checked=false;

};

oBtn3.οnclick=function(){

for(var i=0;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. 在标题里直接写自定义属性，只有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[i].index=i;

aBtn[i][mouse]=function(){

for(var i=0;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[i].index=i;

aLi2[i].οnmοuseοver=function(){

for(var i=0;i

aLi2[i].className=‘‘;

aLi1[i].className=‘‘;

}

this.className=‘active‘;

aLi1[this.index].className=‘active‘;

}

}

};