前端中函数 , 伪函数 , DOM

1.js中的函数

　　函数的作用 : 解决重复性代码.

1.JS中函数的创建方式:

　　(1)普通函数

　　　　function 函数名(a,b){ return a+b};

　　　　函数名(); 函数的调用

　　(2)函数对象

　　　　var 函数名 = function(){ };

2.伪函数

　　arguments的意思? 是伪数组

　　函数传进的实参

　　function foo(){console.log(arguments[0])};

　　foo(2,3,4);　

// arguments伪数组 跟数组有相同的索引和相同的length,而方法不同

3.DOM

　　获取DOM的三种方式:

　　　　文档对象模型Document Object Model

　　　　对象 : 属性和方法 , 父亲(继承)

　　　　getElementById("box") 单个dom对象通过id获取

　　　　getElementsByClassName("box") 伪数组通过类名获取

　　　　getElementsByTagName("box") 伪数组通过标签获取

4.DOM操作三步走 ? 哪三步?

1.找到事件对象 2 . 事件名 : onclik , onmouseover | onmouseout , onmouseenter | onmouseleave , blur ,focus , input , oninput(输入监听)

3.驱动程序 : 回调函数

例子 :

　　// 三步走 1.获取事件对象 2.事件 3.驱动程序执行的操作

　　var oDiv = document.getElementById('active');

　　var isRed = true;

　　oDiv.onclick = function(){

　　　　if(isRed){

　　　　　　oDiv.style.backgroundColor = "green";

　　　　　　isRed = false;

　　　　　　oDiv.style.width = "200px";

　　　　　　oDiv.style.display = "none";

　　　　}else{

　　　　　　oDiv.style.backgroundColor = "red";

　　　　　　isRed = true;

　　}

5.对属性操作和样式操作?

写个例子 :

　　比如有个div , 设置该div的class为active并且要求改div的背景色为红色的, style.backgroundColor = "red" ,ClassName = "box" id href src 等都可以操作;

例子 :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            background-color:red;
            width:100px;
            height:100px;
        }
        .box1{
            width:200px;
            height:200px;
            background-color:yellow;
        }
        .active{
            background-color:red;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <button>隐藏</button>
    <button>隐藏2</button>
    <input type="text" placeholder="请输入用户名">
    <img src="" alt="">
    <a href="">百度一下</a>
    <div class="box1" >                `;
            }
        };
    </script>
</body>
</html>

6.对于值的操作有哪三种属性?

　　点语法 : get方法和set方法

　　console.log(oDiv.style()) ; get方法

　　oDiv.style.width = "200px" ; set方法

　　标签中有value属性 **.value

7.如何获取文档,body,html对象"三者之间的关系"?

console.log(document);　　获取文档

console.log(document.docuElement);　　获取html

console.log(document.body);　　获取body

8.排他思想

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #tab{
            width:480px;
            margin:20px auto;
            border:1px solid red;
        }
        ul{
            list-style:none;
            width:100%;
            overflow:hidden;
        }
        ul li{
            float:left;
            width:160px;
            height:60px;
            line-height:60px;
            text-align:center;
            background-color:#ccc;
        }
        ul li a{
            text-decoration:none;
            color:black;
        }
        li.active{
            background-color:red;
        }
        p{
            display:none;
            height:200px;
            text-align:center;
            line-height:200px;
            background-color:red;
        }
        p.active{
            display:block;
        }
    </style>
</head>
<body>
    <div ;
oDiv.insertBefore(插入的新节点,参考的节点);
如果参考的节点为null,相当于appendchlid  ;
(3)删除DOM    oDiv.removeChild(子节点);
实例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div >                oDiv.removeChild(oP);
            }
        }
    </script>
</body>
</html>



其他知识点 : 
程序的入口:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div ));
        };
        // 这个是文档加载完成后就执行js,只要文档加载完成后就执行跟图片就没有关系了
        document.onload=function(){
            console.log(2);
        };
        // 系统默认做了文档加载完之后就执行js
    </script>
</body>
</html>