网易云课堂JS笔记

Posted 2020-08-10

JS能做什么？？

----网易官网：选项卡
----京东：

Hbuilder编辑器介绍

    javascript简介

    ECMAScript：javaScript组成语法和基本对象

    DOM:文档对象模型，描述处理网页内容方法和接口

    BOM:浏览器对象模型，描述与浏览器进行交互的方法和接口

    BOM->查看什么浏览器

    JavaScript特点
    
    跨平台web脚本语言

    向html页面添加交互行为：跟DOM一样的
    
    可与服务器进行通信：可与服务器进行通信（Ajax）

    JavaScript出现位置

========简单实例

    1.document.getElementById(‘btn‘);
        2.给按钮添加点击事件
        按钮.onclick=function(){
            //修改属性
        元素.style.样式名=值

    /*这是CSS的注释*/

    //js中的单行注释

    /*多行注释*/
    
    //页面中的代码一般是从上往下，从左往右执行

    如何解决呢？

    使用window.onload=function(){
        
    }
    什么时候使用js
    
    当js代码需要获取中的元素的时候，如果script是在元素之前，那就需要加window.onload
    如果script标签是放在了元素后面，就不需要加window.onload
    
    获取div的属性：document.getElementByI的(‘box‘).href;
    console.log(link.href);

    //打印出来是一个uncode转码字符

    //切记不要拿href与src娶到的值做判断

    

    js->变量

    可变的量（值）
    
    变量的好处
        1.可复用
        2.可以精简代码

    var a=20;
    console.log(a);


    变量命名规则

    1.允许字母，数字，下划线_，美元符$任意组合而成
    2.不允许数字开头
    3.不能使用关键字和保留字
    
    驼峰命名
        大驼峰:
        首字母大写
        Math\Date//一般是系统内部使用的
        
        小驼峰

        从第二个字母开始首字母大写
    
        getElementById();    
    
    -->Js函数
    作用:复用代码s
    function fn(){
    
    }    
    函数名命名的时候尽量遵守变量命名规则
    
    -->Js匿名函数(没有名字的函数)

        function(){
        
    }

    使用匿名函数的条件：
    
    1.被赋值形式所出现
    2.被事件调用
    
    匿名函数不能直接申明    

    eg:window.onload:事件
            =赋值

    -->修改属性
    var btn=document.getElementById("btn");
        btn.onclick=function(){
            console.log(btn.value);
            btn.value=‘小按钮‘;
        }

    btn.style.font-size是不能获取的，js不认-,还会报错

    如何解决呢:

    
    console.log(btn.style[‘font-size‘]);

    console.log(btn.className);//能够获得class的值

    如果非要用‘.‘，要把‘-‘去掉，把‘-‘后面的首字母大写即可
    -->获取innerHtml
            window.onload=function(){
                var btn=document.getElementById("btn");
                var box=document.getElementById("box");
                btn.onclick=function(){
                    console.log(box.innerHTML);
                    box.innerHTML=‘<span>新字符串</span>‘;
                }
            }
    
    -->点击按钮DIV循环显示
        <input type="button" name="btn" id="btn" value="切换" />
        <div id="box">
            
        </div>
        <script type="text/javascript">
            var btn=document.getElementById("btn");
            var box=document.getElementById("box");
            var temp=‘block‘
            btn.onclick=function(){
            if(temp==‘block‘)
            {
            
                box.style.display=‘none‘;
                temp=‘none‘;
            }
            else{
                box.style.display=‘block‘;
                temp=‘block‘;
            }
            }
        </script>
    
    在给innnerHTML设置值的时候，如果这个值里面有html元素，在页面上会被解析

---------->点击下一张图片

        <div id="pic">
            <img width="100%" src="img/1.jpg" id="img" />
        </div>
        <div id="btn">
            <input type="button" name="prev" id="prev" value="上一张" />
            <input type="button" name="next" id="next" value="下一张"/>
        </div>
        <script type="text/javascript">
            var prev=document.getElementById("prev");
            var next=document.getElementById("next");
            var img=document.getElementById("img");
            var arrayimg=[‘1‘,‘2‘,‘3‘,‘4‘];
            var len=arrayimg.length;
            var n=0;
            var i=1;
            
            prev.onclick=function(){
                n--;
                if(n==-1)
                {
                    n=3;
                }
                img.src=‘img/‘+arrayimg[n]+‘.jpg‘;
                img.src=srcpath;
            }
            next.onclick=function(){
                n++;
                if(n==4)
                {
                    n=0;
                }
                var srcpath=‘img/‘+arrayimg[n]+‘.jpg‘;
                img.src=srcpath;
            }
            
        </script>



    ----->js中定义数组

        var arr=[‘a‘,‘b‘,‘c‘,‘d‘];

        
    href和src

    href:是链接地址

    src：是图片的地址


---------获取标签

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            /**
             * document.getElementById
             * 通过id名称去获取一个元素
             *
             * W3c规定id在页面上只能有一个值
             * getElementsByTagName(标签名称)
             * 通过标签名称获取一组元素
             * 主语：目的限制范围
             * documen 从整个文档中获取一个元素
             *
             *     父级       从父级下面去获取一级元素
             *     
             *     getElementsByTagName
             * 获取到是一个集合，类数组
             * 类数组；类似数值，但是数组中的一些方法，它没有
             * 它只具备数组中的length和下标
             *
             *
             */
            window.onload=function(){
                var list=document.getElementsByTagName(‘li‘);
                list[2].style.background=‘green‘;
                var ulid=document.getElementById(‘ulid‘);
                var list2=ulid.getElementsByTagName(‘li‘);
                list2[3].style.background=‘red‘;
            }
        </script>
    </head>
    <body>
    <ur>
        <li>red</li>
        <li>green</li>
        <li>blue</li>
        <li>pink</li>
    </ur>
    
    <ur id="ulid">
        <li>red</li>
        <li>green</li>
        <li>blue</li>
        <li>pink</li>
    </ur>
    </body>


    -->Js中querySelector(Css选择器)
    通过css选择器获取到一个元素，如果有重复的，那她只取第一个

    主语
    document 从整个文档里去获取元素

    父级      从父级里去获取元素

    eg:var xx=document.querySelector(‘.classname‘);
    
    -->Js中的querySelectorAll(‘#color ul li xx‘);
    
    var list=document.querySelectorAll(‘#color ul li‘);

    //list[list.length-1]获取最后一个元素

    注意：getElementsByTagName(‘li‘)和querySelectorAll(‘li‘);
    区别：前者动态获取后者静态获取

    -->js中的this：
        当前对象：不能当作变量名

        只能读，不能写，它的值只能用，不能修改

        1.在函数外：代表window

        2.在函数内使用
            1>函数是直接调用则This指向window

            2.被事件所调用，并且是以赋值的形式出现
            
            谁调用this指向谁

            document.onclick=fn;//document