JS一起学02：函数传参、操作属性第二种方式、提取行间事件、循环、this、焦点问题、联动选择、选项卡焦点图...-CSDN博客

本文链接：https://blog.csdn.net/u011587845/article/details/84685895

一、函数传参

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>

<ul>

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

}

}