js知识点

来源：互联网发布：高级sql编程编辑：程序博客网时间：2024/05/16 05:18

函数function();

1.函数定义：只是告诉系统有这个函数，不会实际执行；
2.函数调用：真正执行函数里面的代码；

//函数定义function foo(){            alert('abc');        }

//函数调用foo()；

if判断

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            div{                width: 300px;                height: 40px;                background: red;                margin-bottom: 10px;                cursor: pointer;                }        </style>    </head>    <body>        <div id="">点击</div>        <div style="display: none;" id="box">112</div>        <p>11111</p>    </body>    <script type="text/javascript">        var oDivs=document.querySelectorAll('div');        oDivs[0].onclick=function(){            if(oDivs[1].style.display=='block'){                oDivs[1].style.display='none';            }else{                oDivs[1].style.display='block';            }        }    </script></html>

为a链接添加js

<a href="javascript:;"></a>

className的使用

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            #a{                width: 300px;                height: 300px;                border: 1px solid black;            }            .box{                background: red;            }            input{                width: 80px;                height: 40px;            }        </style>    </head>    <body>        <input type="button" name="" id="" value="背景变红"/>        <div id="a" class="a">        </div>    </body>    <script type="text/javascript">        var div=document.getElementById('a');        var btn=document.querySelector('input');        btn.onclick=function(){            div.className='box';        }    </script></html>

js操作的样式是放在行间的；优先级在id之前；

提取行间事件

如果js写在head里面，就要加window.onload表示页面加载完才执行js；

行为/样式/结构分离

不要在行内加这些东西；

获取一组元素

getElementsByTagName();

循环while

while（条件成立）{
执行语句；
}

循环for

for（var i=0; 条件；i++）{
执行语句;
}

index自定义属性

浏览器不支持，因为它不是标准的，但可以用js引入；

简单日历innerHTML

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            *{                margin: 0;                padding: 0;                list-style: none;                font-size: 14px;            }            .calendar{                width: 240px;                height: 320px;                margin: 200px auto;                background: silver;                overflow: hidden;            }            ul{                width: 168px;                height: 216px;                  margin: 0 auto;                margin-top: 20px;            }            ul li{                width: 44px;                height: 42px;                background: sandybrown;                margin: 5px;                line-height: 21px;                text-align: center;                float: left;                border: 1px solid black;                cursor: pointer;            }            .text{                width: 166px;                height: 60px;                border: 1px solid wheat;                margin: 0 auto;                margin-top: 5px;                background: white;            }            .active{                background: white;            }        </style>    </head>    <body>        <div id="tab" class="calendar">            <ul>                <li class="active">                    <h2>1</h2>                    <p>1月</p>                </li>                <li>                    <h2>2</h2>                    <p>2月</p>                </li>                <li>                    <h2>3</h2>                    <p>3月</p>                </li>                <li>                    <h2>4</h2>                    <p>4月</p>                </li>                <li>                    <h2>5</h2>                    <p>5月</p>                </li>                <li>                    <h2>6</h2>                    <p>6月</p>                </li>                <li>                    <h2>7</h2>                    <p>7月</p>                </li>                <li>                    <h2>8</h2>                    <p>8月</p>                </li>                <li>                    <h2>9</h2>                    <p>9月</p>                </li>                <li>                    <h2>10</h2>                    <p>10月</p>                </li>                <li>                    <h2>11</h2>                    <p>11月</p>                </li>                <li>                    <h2>12</h2>                    <p>12月</p>                </li>            </ul>            <div class="text">                <h2>1月活动</h2>                <p>快过年了，大家快回家吧！</p>            </div>        </div>    </body>    <script type="text/javascript">        (function(){            var arry=['快过年了，大家快回家吧！','2月龙泰用它','3月大家上学去','4月我们要干嘛','5月我们要干嘛','6月龙泰用它','7月大家上学去','8月我们要干嘛','9月我们要干嘛','10月龙泰用它','11月大家上学去','12月我们要干嘛'];            var tab=document.getElementById('tab');            //console.log(tab);            var lis=tab.getElementsByTagName('li');            var text=tab.getElementsByTagName('div')[0];            //console.log(text);            for(var i=0; i<lis.length;i++){                lis[i].index=i;                lis[i].onmouseover=function(){                    for(var i=0; i<lis.length;i++){                        lis[i].className='';                    }                    this.className='active';                    text.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arry[this.index]+'</p>';                }            }        })();    </script></html>

0 0