javascript学习2

希望把某个元素移除你的视线：
- display:none; 显示为无
- visibility:hidden; 隐藏
- width 或者 height
- 透明度
- left 或者 top
- 拿一个白色DIV盖住它
- margin负值
- ......
事件：鼠标事件、键盘事件、系统事件、表单事件、自定义事件……
- onclick
- onmouseover
- onmouseout
- onmousedown
- onmouseup
- onmousemove 就像是鼠标抚摸一样的事件
- ...
- onload 加载完以后执行…
- window.onload = 事情
- img.onload
- body.onload
- ...
如何添加事件：
- 元素.onmouseover

函数：可以理解为-命令，做一些事~~

function abc(){ // 肯定不会主动执行的！
……
}
- 直接调用：abc();
- 事件调用：元素.事件 = 函数名 oDiv.onclick = abc;
function (){} 匿名函数

元素.事件 = function (){};

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
    li { list-style:none; }
    .lis { 
        width:80px;
        height:30px;
        border:1px solid #333;
        position:relative;
    }
    .lis a { 
        display:block;
        line-height:30px; 
        text-align:center;
        text-decoration:none;
        color:#000;
        background:#f1f1f1;
    }
    ul ul {
        padding:0;
        margin:0;
        width:140px; 
        border:1px solid #333; 
        position:absolute; 
        top:30px; 
        left:-1px; 
        background:#FF9; 
        display:none;
    }
    ul ul li {
        text-align:center;
        line-height:30px;
    }
</style>
</head>
<body>
<ul>
    <li id="lis" class="lis">
        <a id="link" href="#">微博</a>
        <ul id="ul1">
            <li>私信</li>
            <li>评论</li>
            <li>@我</li>
        </ul>
  </li>
</ul>

<script>
    window.onload=function(){
        var li = document.getElementById('lis');
        var ul = document.getElementById('ul1');
        var a = document.getElementById('link');
        
        li.onmouseover = show;
        li.onmouseout = hide;
        
        function show(){
            ul.style.display = 'block';
            a.style.background = 'yellow';
        }
        
        function hide(){
            ul.style.display = 'none';
            a.style.background = '#f1f1f1';
        }
    }
</script>
</body>
</html>

View Code

HTML 的属性操作：读、写

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
/*
    HTML 的属性操作：读、写
        属性名：
        属性值：
        
        读操作：获取、找到
        元素.属性名
        
        写操作：“添加？”、替换、修改
        元素.属性名 = 新的值        
*/
window.onload = function (){
    var oBtn = document.getElementById('btn1');
    var oText = document.getElementById('text1');
    var oSelect = document.getElementById('select1');

    oBtn.onclick = function (){
        //oBtn.value = 'button';
        //oText.value = 123;
        oText.value = oSelect.value;
    };
};
</script>
</head>
<body>
    <input id="text1" type="text" />
    <select id="select1">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="杭州">杭州</option>
    </select>
    <input id="btn1" type="button" value="按钮" />
</body>
</html>

View Code

文字放大缩小例子

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
    window.onload = function (){
        var oBtn1 = document.getElementById('btn1');
        var oBtn2 = document.getElementById('btn2');
        var oP = document.getElementById('p1');
        var num = 14;
        
        oBtn1.onclick = function (){
            if(num>12){
                num -= 2;
                oP.style.fontSize = num + 'px';
            }
        };
        oBtn2.onclick = function (){
            if(num<22){
                num += 2;
                oP.style.fontSize = num + 'px';
            }
        };
    };
</script>
</head>
<body>
    <input id="btn1" type="button" value="-" />
    <input id="btn2" type="button" value="+" />
    <p id="p1" style="font-size:16px;">10月28日晚，中央纪委监察部官网发布消息，贵州省委常委、遵义市委书记廖少华因涉嫌严重违纪违法接受组织调查。3天后中组部宣布对其免职。廖成为十八大后中纪委一连串"打虎"行动中第十一位落马的副省部级以上高官。</p>
</body>
</html>

View Code

js中允许"."替换成"[]"

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width:100px;
                height:100px;
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        请输入属性名称:<input type="text" id="attr"/><br/>
        请输入属性值:<input type="text" id="val"/>
        <input type="button" value="确定" id="btn1"/>
        <div id="div1"></div>
    </body>
    <script type="text/javascript">
        window.onload=function(){
            var oAttr=document.getElementById("attr");
            var oVal=document.getElementById("val");
            var oBtn=document.getElementById("btn1");
            var oDiv=document.getElementById("div1");
            
            //js中允许"."替换成"[]"
            oBtn.onclick=function(){
                oDiv.style[oAttr.value]=oVal.value;//[]里面的值可以随意写
            }
        }
    </script>
</html>

View Code

图片切换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                padding:0;
                margin:0;
            }
            #box{
                width:400px;
                height:400px;
                background-color: #f1f1f1;
                margin:auto;
                border:2px groove red;
                position: relative;
            }
            #prev,#next{
                position: absolute;
                top:160px;
                font-size:30px;
                text-decoration: none;
                width:40px;
                height:40px;
                background-color: #000;
                text-align: center;
                color:#fff;
                filter:alpha(opacity=90);
                opacity: 0.9;
            }
            #prev{
                left:10px;
            }
            #next{
                right:10px;
            }
            #strong1,#p1{
                position: absolute;
                text-align: center;
                width:100%;
                text-align: center;
                height:40px;
                line-height: 40px;
                background-color: #000;
                color:#fff;
            }
            #strong1{
                top:10px;
            }
            #p1{
                bottom:0px;
            }
            #img1{
                width:400px;
                height:400px;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <a id="prev" href="javascript:;"><</a>
            <a id="next" href="javascript:;">></a>
              <p id="p1">图片文字加载中……</p>
              <strong id="strong1">图片数量计算中……</strong>
            <img id="img1" />
        </div>
    </body>
    <script type="text/javascript">
        window.onload=function(){
            var oPrev=document.getElementById('prev');
            var oNext=document.getElementById('next');
            var oP1=document.getElementById('p1');
            var oStrong1=document.getElementById('strong1');
            var oImg1=document.getElementById('img1');
            
            var imgArr=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
            var textArr=['第一张图片','第二张图片','第三张图片','第四张图片'];
            var num=0;
            
            function fTab(){
                oP1.innerHTML=textArr[num];
                oStrong1.innerHTML = num+1 + ' / ' + textArr.length;
                oImg1.src=imgArr[num];
            }
            fTab();
            oPrev.onclick=function(){
                num--;
                if(num==-1){
                    num=textArr.length-1;
                }
                fTab();
            }
            oNext.onclick=function(){
                num++;
                if(num==textArr.length){
                    num=0;
                }
                fTab();
            }
        }
    </script>
</html>

View Code

自动生成5条新闻

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                var arr=[
                   '新闻1新闻1新闻1新闻1新闻1新闻1新闻1 ',
                   '新闻2新闻2新闻2新闻2新闻2新闻2新闻2',
                   '新闻3新闻3新闻3新闻3新闻3新闻3新闻3',
                   '新闻4新闻4新闻4新闻4新闻4新闻4新闻4',
                   '新闻5新闻5新闻5新闻5新闻5新闻5新闻5'
                ];
            
                var oBtn=document.getElementById('btn1');
                var oUl=document.getElementById('list');
                var len=arr.length;
                
                var onOff=true;//设置开关  提高用户体验
                oBtn.onclick=function(){
                    if(onOff){
                        for(var i=0;i<len;i++){
                            oUl.innerHTML+='<li>'+arr[i]+'</li>'
                        }
                    }
                    onOff=false;
                }
            }
        </script>
    </head>
    <body>
        <input type="button" id="btn1" value="自动生成5条新闻"/>
        <ul id="list"></ul>
    </body>
</html>

View Code

自定义属性：

什么是自定义属性

运用for循环为一组元素添加开关

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>自定义属性</title>
        <style>
            li{
                list-style: none;
                width:114px;
                height:140px;
                background: url(img/normal.png);
                float:left;
                margin-right:20px;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var aLi=document.getElementsByTagName('li');
                var len=aLi.length;
                for(var i=0;i<len;i++){
                    aLi[i].onOff=true;
                    aLi[i].onclick=function(){
                        if(this.onOff){
                            this.style.background='url(img/active.png)';
                            this.onOff=false;
                        }else{
                            this.style.background='url(img/normal.png)';
                            this.onOff=true;
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>

View Code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                var aBtn=document.getElementsByTagName('input');
                var len=aBtn.length;
                var arr=['A','B','C','D'];
                for(var i=0;i<len;i++){
                    aBtn[i].num=0;
                    aBtn[i].onclick=function(){
                        this.value=arr[this.num];
                        this.num++;
                        if(this.num===len){
                            this.num=0;
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <input type="button"  value="0"/>
        <input type="button"  value="0"/>
        <input type="button"  value="0"/>
    </body>
</html>

View Code

实例：点击当前列表，切换各自的class

添加索引值

index索引值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                var aBtn=document.getElementsByTagName('input');
                var len=aBtn.length;
                //想建立"匹配"关系，就用索引值
                var arr=['韩梅梅','李雷','小花'];
                for(var i=0;i<len;i++){
                    aBtn[i].index=i;//自定义属性  索引值
                    aBtn[i].onclick=function(){
                        this.value=arr[this.index];
                    }
                }
            }
        </script>
    </head>
    <body>
        <input type="button"  value="btn1"/>
        <input type="button"  value="btn2"/>
        <input type="button"  value="btn3"/>
    </body>
</html>

View Code

索引值运用:图片切换实例

思路1：全部清除

思路2：清除上一个

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                background-color: #333;
            }
            ul,p{
                padding:0;
                margin:0;
            }
            li{
                list-style: none;
            }
            #pic{
                width: 400px;
                height:500px;
                position: relative;
                margin:0 auto;
                background: url(img/loader_ico.gif) center center no-repeat;
            }
            #pic img{
                width:400px;
                height: 500px;
            }
            #pic ul{
                width:40px;
                position:absolute;
                top:0;
                right:-50px;
            }
            #pic li{
                width:40px;
                height:40px;
                margin-bottom: 4px;
                background-color: #666;
            }
            #pic .active{
                background-color: #fc3;
            }
            #pic p,
            #pic span{
                width:400px;
                height:30px;
                line-height: 30px;
                text-align: center;
                color:#fff;
                position: absolute;
                background-color: #333;
            }
            #pic p{
                bottom:0;
            }
            #pic span{
                top:0;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oPic=document.getElementById('pic');
                var oImg=oPic.getElementsByTagName('img')[0];
                var oSpan=oPic.getElementsByTagName('span')[0];
                var oP=oPic.getElementsByTagName('p')[0];
                var oUl=oPic.getElementsByTagName('ul')[0];
                var aLi=oUl.getElementsByTagName('li');
                var arrUrl=['img/1.png','img/2.png','img/3.png','img/4.png'];
                var arrText=['小宠物','图片二','图片三','面具'];
                var num=0;
                var oldLi=null;
                
                for(var i=0;i<arrUrl.length;i++){
                    oUl.innerHTML+='<li></li>';
                }
                oldLi=aLi[num];
                //初始化
                oImg.src=arrUrl[num];
                oSpan.innerHTML=num+1+'/'+arrUrl.length;
                oP.innerHTML=arrText[num];
                aLi[num].className='active';
                
                for(var i=0;i<aLi.length;i++){
                    aLi[i].index=i;
                    aLi[i].onclick=function(){
                        oImg.src=arrUrl[this.index];
                        oSpan.innerHTML=this.index+1+'/'+arrUrl.length;
                        oP.innerHTML=arrText[this.index];
                        
                        /*
                            <li class="active"></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        */
                        
                        // 思路一：全部清空，当前添加
                        /*for( var i=0; i<aLi.length; i++ ){
                            aLi[i].className = '';
                        }
                        this.className = 'active';*/
                        
                        
                        // 思路二：清空上个，当前添加
                        oldLi.className = '';
                        oldLi = this;
                        this.className = 'active';
                        
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="pic">
            <img src="" alt="" />
            <span>数量正在加载中...</span>
            <p>正在加载中...</p>
            <ul>
                
            </ul>
        </div>
    </body>
</html>

View Code

图片切换实例

this引用

函数合并

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                background-color: #333;
            }
            ul,p{
                padding:0;
                margin:0;
            }
            li{
                list-style: none;
            }
            #pic{
                width: 400px;
                height:500px;
                position: relative;
                margin:0 auto;
                background: url(img/loader_ico.gif) center center no-repeat;
            }
            #pic img{
                width:400px;
                height: 500px;
            }
            #pic ul{
                width:40px;
                position:absolute;
                top:0;
                right:-50px;
            }
            #pic li{
                width:40px;
                height:40px;
                margin-bottom: 4px;
                background-color: #666;
            }
            #pic .active{
                background-color: #fc3;
            }
            #pic p,
            #pic span{
                width:400px;
                height:30px;
                line-height: 30px;
                text-align: center;
                color:#fff;
                position: absolute;
                background-color: #333;
            }
            #pic p{
                bottom:0;
            }
            #pic span{
                top:0;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oPic=document.getElementById('pic');
                var oImg=oPic.getElementsByTagName('img')[0];
                var oSpan=oPic.getElementsByTagName('span')[0];
                var oP=oPic.getElementsByTagName('p')[0];
                var oUl=oPic.getElementsByTagName('ul')[0];
                var aLi=oUl.getElementsByTagName('li');
                var arrUrl=['img/1.png','img/2.png','img/3.png','img/4.png'];
                var arrText=['小宠物','图片二','图片三','面具'];
                var num=0;
                var oldLi=null;
                
                for(var i=0;i<arrUrl.length;i++){
                    oUl.innerHTML+='<li></li>';
                }
                oldLi=aLi[num];
                //初始化
                fTab();
                function fTab(){
                    oImg.src=arrUrl[num];
                    oSpan.innerHTML=num+1+'/'+arrUrl.length;
                    oP.innerHTML=arrText[num];
                    
                    for( var i=0; i<aLi.length; i++ ){
                        aLi[i].className = '';
                    }
                    aLi[num].className = 'active';
                }
                
                for(var i=0;i<aLi.length;i++){
                    aLi[i].index=i;
                    aLi[i].onclick=function(){
                        num=this.index;
                        fTab();
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="pic">
            <img src="" alt="" />
            <span>数量正在加载中...</span>
            <p>正在加载中...</p>
            <ul>
                
            </ul>
        </div>
    </body>
</html>

View Code

QQ列表图片提示实例

获取相邻元素
- 索引值匹配
为嵌套元素添加索引值
- 计数器
点击高亮显示当前状态
- 数组push方法
展开收缩列表扩展版
- 选择除当前以外的其他元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            ul , h2 {
                 padding:0;
                 margin:0; 
            }
            li { 
                list-style:none; 
            }
            #list { 
                width:240px;
                border:1px solid #333;
                margin:0 auto;
            }
            #list .lis {}
            #list h2 { 
                height:30px;
                line-height:30px; 
                text-indent:20px; 
                background:url(img/ico1.gif) no-repeat 5px center #6FF; 
                color:#000; 
            }
            #list .active { 
                background:url(img/ico2.gif) no-repeat 5px center #FF9;
                color:#000;
            }
            #list ul { 
                display:none;
            }
            #list ul li { 
                line-height:24px; 
                border-bottom:1px solid #333; 
                text-indent:24px;
            }
            #list ul .hover { 
                background:#6FF; 
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oUl=document.getElementById('list');
                var aH2=oUl.getElementsByTagName('h2');
                var aUl=oUl.getElementsByTagName('ul');
                var aLi=null;
                var arrLi=[];
                
                for(var i=0;i<aH2.length;i++){
                    aH2[i].index=i;
                    aH2[i].onclick=function(){
                        
                        for(var i=0;i<aUl.length;i++){
                            aUl[i].style.display='none';
                        }
                        aUl[this.index].style.display='block';
                        
                        if(this.className==''){
                            aUl[this.index].style.display='block';
                            this.className='active';
                        }else{
                            aUl[this.index].style.display='none';
                            this.className='';
                        }
                    }
                }
                
                for(var i=0;i<aUl.length;i++){
                    aLi=aUl[i].getElementsByTagName('li');
                    for(var j=0;j<aLi.length;j++){
                        arrLi.push(aLi[j]);
                    }
                }
                
                for(var i=0;i<arrLi.length;i++){
                    arrLi[i].onclick=function(){
                        for(var i=0;i<arrLi.length;i++){//全部清除
                            arrLi[i].className='';
                        }
                        this.className='hover';//给当前加class
                    }
                }
            }
        </script>
    </head>
    <body>
        <ul id="list">
            <li class="lis">
                  <h2>我的好友</h2>
                <ul>
                    <li>张三</li>
                    <li>张三</li>
                    <li>张三</li>
                    <li>张三</li>
                </ul>
            </li>
            <li class="lis">
                  <h2>企业好友</h2>
                <ul>
                    <li>李四</li>
                    <li>李四</li>
                    <li>李四</li>
                    <li>李四</li>
                    <li>李四</li>
                </ul>
            </li>
            <li class="lis">
                  <h2>黑名单</h2>
                <ul>
                    <li>张小三</li>
                    <li>李小四</li>
                </ul>
            </li>
        </ul>
    </body>
</html>

View Code