JavaScript学习（一）

1，事件：

（1）onmouseover:鼠标移入某个对象等触发事件

（2）onmouseout:鼠标移出某个对象等触发事件

（3）alert()：显示信息到弹框

2,获取元素

通过Id获取只能获取一个对象：document.getElementById('id名')

获取一组同一类型的对象（类似数组，一种集合）：document.getElementsByTagName(‘div’）；获取所有的div，设置某个div的属性：document.getElementsByTagName(‘div’)[i]

3，函数

（1）function定义函数

function 函数名(){ }

引用：事件名（如onclick=“函数名()”）

（2）调用属性的方式：

1，xxx.xxxx.xxx，例如：document.getElementById(' ')

2,xxx[' '][' ']，例如：document['getElementById'](' ') ，这种方式比较好，比1方式可以接受变量值。

（3）改变对象属性的方式：

1，修改对象的style，例如：id.style.xxx ,相当于在对象的行间加入style属性

2，设置class，修改为class，例如：id.className='class'

js可以修改任何对象的属性

4，变量

var定义变量

5，使用

（1）a链接内放JavaScript：

（2）使用class时：document.getElementById(' ').ClassName='';

（3）加载事件（当script写在boad外使用2,3方式时，必须使用window.onload =function( ){ 要写的JavaScript代码 }）：

1，在要设置的按钮等的input中加载，例如：<input type="button" value="提交" onclick="aaa()" />

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">    
                         function changeColor()
                         {
                                var div1=document.getElementById('div1');
                               div1.style.background='red';
                          }
                          function retColor()
                          {
                             var div1=document.getElementById('div1');
                            div1.style.background='black';
                         }

    </script>
</head>
<style type="text/css">
    #div1{
        width: 100px;
        height: 100px;
        background-color:black;
    }
</style>
<body>
    <div id="div1" onmouseover="changeColor()" onmouseout="retColor()"></div>
</body>

2，在script中设置事件属性，例如：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    window.onload=function()                   //加载页面完成后调用该函数
    {
        var div1=document.getElementById('div1');
                         div1.onmouseover=changeColor;
                         div1.onmouseout=retColor;
                         function changeColor()
                         {
                                var div1=document.getElementById('div1');
                               div1.style.background='red';
                          }
                          function retColor()
                          {
                             var div1=document.getElementById('div1');
                            div1.style.background='black';
                         }
    }
    </script>
</head>
<style type="text/css">
    #div1{
        width: 100px;
        height: 100px;
        background-color:black;
    }
</style>
<body>
    <div id="div1"></div>
</body>

***如果是带参数的函数在script中设置事件属性则：div1.onclick=function(){ 函数名(参数);} ；不带参数的函数为设置的事件属性：div1.onclick=函数名;

3，直接在属性后写函数：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    window.onload=function()
    {
        var div1=document.getElementById('div1');
                         div1.onmouseover=function ()
                         {
                                var div1=document.getElementById('div1');
                               div1.style.background='red';
                          }
                         div1.onmouseout=function ()
                          {
                             var div1=document.getElementById('div1');
                            div1.style.background='black';
                         }
                          
    }
    </script>
</head>
<style type="text/css">
    #div1{
        width: 100px;
        height: 100px;
        background-color:black;
    }
</style>
<body>
    <div id="div1"></div>
</body>

例子：1，选项卡

实现方法一（使用多个div，隐藏，替换）：

<script type="text/javascript">
    window.onload=function()
    {
                 var div1=document.getElementById('div1');
                 var button=div1.getElementsByTagName('input');
                 var div2=document.getElementById('div2');
                 var divs=div2.getElementsByTagName('div');
                 for(var i=0;i<button.length;i++)
                 {
                     button[i].num=i;
                     button[i].onclick=function()
                     {

                         for(var i=0;i<button.length;i++)
                         {
                             button[i].className=' ';
                             divs[i].style.display='none'
                         }

                         this.className='class';
                         //alert(this.num);
                                       divs[this.num].style.display='block';
                     }
                 }                   
    }
    </script>

<style type="text/css">
            #div1 .class{
                     background-color: yellow;
            }
    #div2 div{
        width: 200px;
        height: 200px;
        background-color:#ccc;
        border: 1px solid #999;
        float: left;
    }
</style>
<body>
    <div id="div1">
        <input type="button" value="教育">
        <input type="button" value="科技">
        <input type="button" value="资源">
        <input type="button" value="食品">
    </div>
    <br>
    <div id="div2">
        <div>
            <br><br>
            小学教育<br>
            中学教育<br>
            大学教育<br>
            成人教育
        </div>
        <div>
            <br><br>
            大数据<br>
            云计算<br>
            5G <br>
        </div>
        <div>
            <br><br>
            钢铁<br>
            煤炭<br>
            稀有矿
        </div>
        <div>
            <br><br>
            肉类<br>
            水果<br>
            蔬菜
        </div>
    </div>
</body>

实现方法二（使用一个div，用innerHTML添加内容）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    window.onload=function()
    {
        var array=['<br><br>小学教育<br>中学教育<br>大学教育<br>成人教育','<br><br>大数据<br>云计算<br>5G <br>','<br><br>钢铁<br>煤炭<br>稀有矿','<br><br>肉类<br>水果<br>蔬菜']   //JS中定义数组
                 var div1=document.getElementById('div1');
                 var button=div1.getElementsByTagName('input');
                 var div2=document.getElementById('div2');
                 var div=div2.getElementsByTagName('div')[0];
                 for(var i=0;i<button.length;i++)
                 {
                     button[i].num=i;
                     button[i].onclick=function()
                     {

                         for(var i=0;i<button.length;i++)
                         {
                             button[i].className=' ';
                         }

                         this.className='class';
                         //alert(this.num);
                                       div.innerHTML=array[this.num];//可以给非input对象添加文字内容，HTML代码等
                     }
                 }                   
    }
    </script>
</head>
<style type="text/css">
            #div1 .class{
                     background-color: yellow;
            }
    #div2 div{
        width: 200px;
        height: 200px;
        background-color:#ccc;
        border: 1px solid #999;
        float: left;
    }
</style>
<body>
    <div id="div1">
        <input type="button" value="教育">
        <input type="button" value="科技">
        <input type="button" value="资源">
        <input type="button" value="食品">
    </div>
    <br>
    <div id="div2">
        <div>
            
        </div>
    </div>
</body>
</html>

JavaScript学习（一）

相关推荐