前端中函数 , 伪函数 , 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;
            100px;
            height:100px;
        }
        .box1{
            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" id="box1"></div>
    <script>
        // 小结
        // 事件三步走 1.事件对象 2.事件名 3.事件驱动程序
        //
        // 获取dom的三种方式
        // document.getElementById()
        // document.getElementsByClassName()
        // document.getElementsByTagName()
        //
        // 标签内部有一些属性 id  class  title  style
        // img(src alt) a(href) input(type name value placeholder) form 例:element.src
        var isYellow =true;
        document.getElementById("box1").onclick=function(){
            // this  谁调用的此事件 this就指向了谁
            console.log(this);
            if(isYellow){
                this.className=this.className + " active";
                isYellow=false;
            }else{
                this.className="box1";
                isYellow=true;
            }
        }
        function $(tag){
            return document.getElementsByTagName(tag)[0];
        }
        var oDiv=document.getElementsByClassName("box")[0];
        console.log(oDiv.style);
        var oBtn=document.getElementsByTagName("button")[0];
        var oInput=document.getElementsByTagName("input")[0];
        // var oImg=document.getElementsByTagName("img")[0];
        $("img").src="./1.jpg";
        $("a").href="https://www.baidu.com";
        // oDiv.innerText  是对象oDiv里的文本信息
        // console.log(oDiv.innerText);
        // oDiv.innerHTML是获取oDiv对象中的所有标签和文本信息
        console.log(oDiv.innerHTML);
        // oDiv.innerText="<p>嘿嘿</p>";
        // oInput.value="alex";
        var isShow=true;
        oBtn.onclick=function(){
            if(isShow){
                oDiv.style.display="none";
                isShow=false;
                console.log(oBtn.innerText);
                oBtn.innerText="显示";
            }else{
                oDiv.style.display="block";
                isShow=true;
                oBtn.innerText="隐藏";
                oDiv.innerHTML="<h1>我的博客</h1>";
                var name="alex";
        //         oDiv.innerHTML="<ul><li>哈哈哈</li></ul>";
        //         模板字符串 tab键上面反引号 插入变量名${变量名}
                oDiv.innerHTML=`
                <ul>
                    <li>
                     ${name}
                    </li>
                </ul>
                `;
            }
        };
    </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{
            480px;
            margin:20px auto;
            border:1px solid red;
        }
        ul{
            list-style:none;
            100%;
            overflow:hidden;
        }
        ul li{
            float:left;
            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 id="tab">
        <ul>
            <li class="active">
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">新闻</a>
            </li>
            <li>
                <a href="#">图片</a>
            </li>
        </ul>
        <p class="active">首页内容</p>
        <p>新闻内容</p>
        <p>图片内容</p>
    </div>
    <script type="text/javascript">
        window.onload=function(){
            // 需求:鼠标放到上面的li上,li本身变色(添加类),对应的p也显示出来(添加类)
            // 思路:1.点亮上面的盒子.2.利用索引值显示下面的盒子.
            var tabli=document.getElementsByTagName("li");
            var tabContent=document.getElementsByTagName("p");
            for(var i=0;i<tabli.length;i++){
                // 绑定索引值(新增一个自定义属性:index属性)
                tabli[i].index=i;
                // console.dir(this.index);
                tabli[i].onclick=function(){
                    // 1.点亮上面的盒子. 2.利用索引值显示下面的盒子.(排他思想)
                    for(var j=0;j<tabli.length;j++){
                        console.log(this);
                        tabli[j].className="";
                        tabContent[j].className="";
                    }
                    // 这里的this是tabli[i]
                    this.className="active";
                    console.log(this);
                    console.log(i);
                    tabContent[this.index].className="active";
                }
            }
        }
    </script>
</body>
</html>
9.如何获取该div标签的父元素和孩子元素?
oDiv.ParentNode  获取标签的父元素
oDiv.Children    获取标签的子元素

10.对于DOM的操作
(1)创建DOM : 父标签 : oDiv     var oBtn=document.createElement("button")
(2)父子之间追加DOM,使用哪种方式?兄弟之间追加元素使用哪种方式?
oDiv.appendChild(oBtn);
oBtn.innerText = "注册";
oDiv.insertBefore(插入的新节点,参考的节点);
如果参考的节点为null,相当于appendchlid  ;
(3)删除DOM    oDiv.removeChild(子节点);
实例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="box">
        <!--<p>alex</p>-->
    </div>
    <ul id="box2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <button id="btn">追加</button>
    <button id="del">删除</button>
    <script>
        window.onload=function() {
            var oDiv = document.getElementById("box");
            var oBtn = document.getElementById("btn");
            var oDel = document.getElementById("del");
            var oUl = document.getElementById("box2");
            console.log(oUl.children);
            var lis = oUl.children;
            for (var i = 0; i < lis.length; i++) {
                lis[i].onclick = function () {
                    for (var j = 0; j < lis.length; j++) {
                        // console.log(this);
                        console.log(lis[j]);
                        lis[j].style.color = "black";
                    }
                    // console.log(this);这里的this是lis[i]
                    this.style.color = "red";
                    console.log(this)
                };
            }
            // 创建DOM
            var oP = document.createElement("p");
            oBtn.onclick = function () {
                // 追加
                oDiv.appendChild(oP)
                // 修改DOM的属性
                oP.id = "p1";
                oP.className = "p1";
                oP.style.color = "green";
                oP.innerText = "alex";
            };
            oDel.onclick = function () {
                // 删除
                oDiv.removeChild(oP);
            }
        }
    </script>
</body>
</html>



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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="box"></div>
    <script>
        // 入口函数
        // 当窗口加载完成之后 才调用此方法 回调函数
        // 窗口加载 1.文档 2.图片再加载
        // 1.覆盖现象 2.必须等待着图片加载完成才调用此回调函数
        // window是窗口加载完成后再执行js,这个有坑,如果网络不好,图片加载不出来就一直等着
        window.onload=function(){
            console.log(document.getElementById("box"));
        };
        // 这个是文档加载完成后就执行js,只要文档加载完成后就执行跟图片就没有关系了
        document.onload=function(){
            console.log(2);
        };
        // 系统默认做了文档加载完之后就执行js
    </script>
</body>
</html>