码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-07-24 10:28:38      阅读:547      评论:0      收藏:0      [点我收藏+]

标签:

一、函数传参

    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.onclick=名字
          (2)oBtn.onclick=function(){     }
例一:
    <input id="btn" type="button" onclick="fn()" />
    var oBtn=document.getElementById(‘btn‘);
    oBtn.value=4444;
    function fn(){
        alert(1);
    }
    oBtn.onclick=fn;     // 只需要放函数名, 不加括号,否则就是立即执行
例二:
    var oBtn=document.getElementById(‘btn‘); //读到此行时,input还没加载,所以找不到元素
    var oBox=document.getElementById(‘box‘);
    oBtn.value=444;  //报错
    oBtn.onclick=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‘;
、循环——反复去做一件事
    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<aLi.length;i++){}
        (2)  循环里的事件里面不能用i,因为循环结束之后才触发了事件。变量不进行人为更改,就永远都不会改。
        (3)for循环适合做次数固定(能获取固定的length)的循环。
五、this
    1. this---->当前用事件函数的对象,触发事件的元素本身
    2. 如果不是事件函数----->window
for(var i=0;i<aLi.length;i++) { 
    aLi[i].onmouseover=function() { 
   alert(this);   //鼠标移入的那个li
         function fn1() { 
             alert(this);
            //window 只会去找包着this的第一层函数
        };
       fn1();
    };
 };
顶部菜单:
    window.onload=function(){
        aLi=document.getElementsByTagName(‘li‘);
        for(var i=0;i<aLi.length;i++){
            aLi[i].onmouseover=function(){
                var oDiv=this.children[0];
                if(oDiv){     //判断oDiv是否存在,存在则执行下面
                    oDiv.style.display=‘block‘;
                    var oA=oDiv.children[0];
                        if(oA){
                             oA.onclick=function(){
                                  oDiv.style.display=‘none‘;
                             }
                        }
                  }
              }
              aLi[i].onmouseout=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(‘text1‘);
 var oUl=document.getElementById(‘ul1‘);
 var aLi=oUl.children;       //oUl的直接子集
 oTex.onfocus=function(){
  oSpan.style.display=‘none‘;
  oUl.style.display=‘block‘;
 };
 oTex.onblur=function(){
  if(this.value!=‘‘){   //输入框的值不为空,让oSpan,oUl都隐藏
   oSpan.style.display=‘none‘;
   oUl.style.display=‘none‘;
  }; 
 };
 for(var i=0;i<aLi.length;i++){
  aLi[i].onmousedown=function(){
       oTex.value=this.children[0].innerHTML;
  };
 };
<div>
    <span id="span1">请输入文本</span>
    <input type="text" id="text1" />
    <ul id="ul1">
        <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.onmousedown=function(){
        alert(111);
    }
4. innerHTML----获取或修改html内容(该元素必须是双标签的)如果内容有标签,则连标签一起返回
window.onload=function(){
    var oBox=document.getElementById(‘box‘);
    oBox.onclick=function(){
        this.innerHTML=333333; //会覆盖原来的内容
        this.innerHTML=‘‘;   //清空
        this.innerHTML=‘<h1>标题</h1>‘;  //创建标签
    }
}

八、全选反选不选
window.onload=function(){
 var oBtn1=document.getElementById(‘btn1‘);
 var oBtn2=document.getElementById(‘btn2‘);
 var oBtn3=document.getElementById(‘btn3‘);
 var aInput=document.getElementById(‘box‘).getElementsByTagName(‘input‘);
 oBtn1.onclick=function(){
  for(var i=0;i<aInput.length;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.length;i++){
  aInput[i].onclick=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.onclick=function(){
  for(var i=0;i<aInput.length;i++){
   aInput[i].checked=false;
  };
  oBtn1.checked=false;
  oBtn3.checked=false;
 };
 oBtn3.onclick=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.onload=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].onmouseover=function(){
             for(var i=0;i<aLi2.length;i++){ 
                  aLi2[i].className=‘‘; 
         aLi1[i].className=‘‘;
   }
             this.className=‘active‘;
             aLi1[this.index].className=‘active‘;
        }
    }
};

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

标签:

原文地址:http://www.cnblogs.com/yang0902/p/5700113.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!