Javascript(2)-js进阶

作者: 一只写程序的猿 | 来源:发表于2017-07-03 22:06 被阅读79次

前端心得
Javascript(2)-js进阶
JavaScript
2018-11-4 js
js基础知识点总结系列(一)
Python（四十）JavaScript进阶
JavaScript进阶-2
【JavaScript】技术参考资料
JS同步异步与事件循环
javaScript中的BOM和DOM对象

1.JavaScript核心操作——DOM对象

window对象

通过window对象，可以操作和浏览器软件相关的信息
        // window.alert();//调用浏览器的对话框操作

        // history对象：项目中几乎不用
        //window.history.back();//后退操作,返回上一个访问历史
        //window.history.forward();//前进操作，访问下一个访问历史
        //window.history.go(2);//跳转到某一个访问历史

        // location对象：项目中的url操作
        /*console.log(location);
        console.log(location.href);// 获取当前网页的url地址
        console.log(location.protocol);//获取当前访问协议
        console.log(location.host);// 获取访问网页的主机地址
        console.log(location.hostname);
        console.log(location.post);// 访问端口*/


        // JS代码控制页面的指向
        /*setTimeout(function() {
            location.href="http://www.baidu.com"
        }, 2000)*/

        /*setTimeout(function() {
            location.reload()// 刷新网页
        }, 5000)*/


        // screen对象
        // screen表示电脑屏幕的意思
        // screen.width/height表示的是电脑屏幕的宽度和高度分辨率
        // screen.availWidth/screen.availHeight:屏幕的宽度和高度【不包含任务栏】
        // console.log(screen.width, screen.height);
        // console.log(screen.availWidth, screen.availHeight);

        // navigator对象：浏览器软件的信息

screen对象
history对象
location对象
navigator对象
document对象
window事件操作
onload页面数据加载事件
onscroll页面滚动条事件
兼容问题：获取滚动条卷去网页高度

2.DOM基础API操作

获取标签DOM对象

直接通过id属性值使用DOM对象
通过id属性值获取：document.getElementById()
通过标签名称获取：document.getElementsByTagName()
通过class属性值获取：document.getElementsByClassName()
通过name属性值获取：document.getElementsByName()
混合获取，通常是id模式和tagName模式混合获取

代码操作

        // 直接通过标签的id属性，得到标签对象【 不推荐】
        console.log(box);
        box.innerText = "可以通过标签的id属性直接使用标签"

        // 通过getElemnetById("id")函数，来通过id属性值获取标签，【推荐】
        var _box = document.getElementById("box2");
        _box.innerText = "通过ElementById()函数获取标签对象，进行操作"

        // 通过标签名称，可以获取到一组标签
        var _boxes = document.getElementsByTagName("div");
        console.log(_boxes);
        _boxes[2].innerText = "这是通过getElementsByTagName()获取的元素"

        // 通过标签的name属性，也可以获取到一组标签
        var _jerry = document.getElementsByName("jerry");
        console.log(_jerry);
        _jerry.innerText = "通过name属性获取标签"


        // 通过标签的class属性获取标签：IE8.0+
        var _container = document.getElementsByClassName("container");
        console.log(_container);
        _container[0].innerText = "这个是通过class属性获取到的标签对象"

操作标签的DOM对象属性

标准函数操作

获取属性值：var x = getAttribute(name)
设置属性值：setAttribute(name, value)
移除属性：removeAttribute(name);

方括号操作

获取属性值：var x = dom[“name”];
设置属性值：dom[“name”]=value;

连接符.操作

获取属性值：var x = dom.name;
设置属性值：dom.name = value;
备注：dom表示dom对象，name表示属性名称，value表示属性值
操作标签的DOM对象样式

获取DOM对象样式

var x = document.currentStyle[name];兼容IE低版本的获取样式的方式
var x = getComputedStyle(dom)[name];获取样式存在兼容性问题【兼容IE9+ 和其他浏览器】
Window.getComputedStyle() 方法给出应用活动样式表后的元素的所有CSS属性的值，并解析这些值可能包含的任何基本计算。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JS代码操作标签的样式</title>
    
    <style>
        #box{height: 200px;background:red;}
    </style>
</head>
<body>
    <div id="box" style="width:100px;"></div>
    <script>
    /*操作标签的样式*/
    /*增删改查*/
    /*获取样式、设置样式*/
    var _box = document.getElementById("box");

    /**************************************************/
    // 获取样式：有两种方式
    // 1. 获取样式的值  100px
    // 2. 获取样式的数值  100

    // 获取标签对象的样式【标签内嵌、页面内嵌、外部样式 都可以获取到】
    // 获取样式存在兼容性问题【兼容IE9+ 和其他浏览器】
    var _h = window.getComputedStyle(_box).height;
    var _w = window.getComputedStyle(_box).width;
    console.log(_w, _h);
    // 兼容IE低版本的获取样式的方式【我们只需要了解即可】
    // var _h1 = _box.currentStyle.height;
    // var _w1 = _box.currentStyle.width;
    // 获取样式的数值
    var _wvalue = _box.offsetWidth;
    var _hvalue = _box.offsetHeight;
    console.log(_wvalue, _hvalue);
    /**************设置样式************************************/
    // 标签对象.style.样式名称  使用这样的语法，是用来操作标签内嵌样式的！
    // 给标签设置样式，统一使用 标签对象.style.样式名称 = 样式值;
    _box.style.width = "300px";
    </script>
</body>
</html>

控制台输出结果

设置DOM对象样式

直接通过style进行行内样式设置。
dom.style.样式名称 = 样式值;
样式名称可能是多个单词组成的 background-color，在JS中进行操作的时候需要将名称转换成驼峰命名法：backgroundColor
注意：尽量不要在JS中进行大量样式的设置。

对于标签内容的操作，有三种方式

innerText：给指定标签的开始标签和结束标签中增加文本内容【非W3C标准】

textContent：dom操作，给标签的开始标签和结束标签中增加文本内容，W3C标准操作
innerHTML：给标签的开始标签和结束标签中，增加一段HTML代码；慎重使用，容易造成代码注入漏洞！
扩展：所谓代码注入漏洞，是用于可以在客户端通过输入包含代码的字符串的方式，将带入注入到我们的网页中进行执行的过程
innerHTML的使用规则
对于数据的来源，完全信任的情况下使用它。其他时候禁止使用！

代码操作：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JS操作标签属性</title>
    
</head>
<body>
    <!-- value是input标签的属性 -->
    输入年龄：<input type="text" id="uname" value="100">

    <script>
        
        var _name = document.getElementById("uname");
        // 1. 直接通过 [标签对象.属性]来操作标签的属性值
        _name.value = "120";
        _name.id = "age";
        console.log(_name.value, _name.id);
    
        // 2. 通过 标签对象.["属性名称"] 来操作标签的属性值
        _name["value"] = 110;
        _name["id"] = "phone";
        console.log(_name["value"], _name["id"]);

        
        // 3. DOM操作方式，通过getAttribute("属性名称")获取标签的属性值
        _name.setAttribute("value", 119);
        _name.setAttribute("id", "sex");
        // _name.className = "sex";
        _name.removeAttribute("value");
        console.log(_name.getAttribute("value"), _name.getAttribute("id"));

    </script>
</body>
</html>

备注：在使用原生JS操作标签的属性时，规则如下

id属性、title属性，建议通过标签对象.属性名称的语法进行处理。
class属性，建议通过标签对象.className 的语法进行处理。
其他属性，建议使用set/getAttribute()的语法进行处理。

删除value属性。。。。：这样的语法是不能删除属性的
~~_name.value = null;~~

3.DOM核心API操作

节点属性API——获取元素定位

元素的尺寸(宽度、高度)、位置(top.left)

属性/函数名称	描述
offsetWidth	获取元素宽度；包含padding值\border值
offsetHeight	获取元素高度；包含padding值\border值
offsetTop	获取元素距离浏览器顶部的距离
offsetLeft	获取元素距离浏览器左边的距离

备注：如果父元素进行了relative/absolute定位，offsetTop/offsetLeft就是相对父元素的顶部和左边的距离，如果父元素默认定位，就是相对浏览器窗口的距离

备注：获取网页可视区域宽度，高度
var clientWidth = 
window.innerWidth||document.documentElement.clientWidth;
var clientHeight = 
      window.innerHeight||document.documentElement.clientHeight;

获取网页文档的宽度、高度
var bodyWidth = document.body.clientWidth;
var bodyHeight = document.body.clientHeight;

实例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container{
            position:static;// relative
            width:800px;
            height:400px;
            margin-left:100px;
            margin-top:100px;
            background-color: #069;
            padding:1px;
        }
        #box{
            padding:50px;
            width:100px;
            height:100px;
            /*position:absolute;
            top:50px;
            left:50px;
            margin:50px 0 0 50px;
            background-color: #fff;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="box"></div>
</div>
<script>
    function getStyle(dom, styleName) {
        if(dom.currentStyle) {
            return dom.currentStyle[styleName];
        } else {
            return getComputedStyle(dom)[styleName];
        }
    }

    var box = document.getElementById("box");
    console.log(getStyle(box,"width") + "---" + box.offsetWidth);
    console.log(getStyle(box, "height") + "---" + box.offsetHeight);
    console.log(getStyle(box, "margin-left") + "---" + box.offsetLeft);
    console.log(getStyle(box, "margin-top") + "---" + box.offsetTop);
    // 获取网页可视区域高度、宽度
console.log(window.innerHeight + "--" + window.innerWidth);
console.log(document.documentElement.clientHeight + "--" + document.documentElement.clientWidth);
// 获取网页文档的高度、宽度
console.log(document.body.clientHeight + "--" + document.body.clientWidth);

</script>
</body>

节点查询API

属性/函数名称	描述
hasChildNodes()	判断是否包含子节点，返回一个布尔值
children	获取元素所有的子元素节点集合/数组
childNodes	获取元素所有的子节点集合/数组
firstChild	获取元素第一个子节点
firstElementChild	获取元素第一个子元素节点
lastChild	获取元素最后一个子节点
lastElementChild	获取元素最后一个子元素节点
previousSibling	获取元素前一个兄弟节点
previousElementSibling	获取元素前一个兄弟元素节点
nextSibling	获取元素后一个兄弟节点
nextElementSibling	获取元素后一个兄弟元素节点
parentNode	获取元素的父节点
textContent	操作(获取/设置)元素内容

节点创建/添加API

属性/函数名称	描述
createElement(tagName)	根据名称创建一个元素节点
createTextNode(text)	根据文本创建一个文本节点
insertBefore(new,old)	在指定的节点前面添加节点
appendChild(child)	在子节点的末尾追加节点
replaceChild(new,old)	使用新的节点替换指定的节点
removeChild(child)	移除指定的子节点
className	设置标签class属性样式值

代码操作

<body>
    <div id="container">
        <div id="box">
            原有标签
        </div>
    </div>
    <script>
        var container = document.getElementById("container");
        var box = document.getElementById("box");
        // 创建第一个元素节点
        var d = document.createElement("div");
        // 创建文本节点
        var t = document.createTextNode("这是div文本");

        // 创建第二个元素节点
        var d2 = document.createElement("p");
        var t2 = document.createTextNode("这是p文本");

        // 添加元素节点到指定节点中
        d.appendChild(t);
        // 追加节点到指定节点前面
        container.insertBefore(d, box);

        // 追加节点到子节点末尾
        d2.appendChild(t2);
        d2.className = "test";
        container.appendChild(d2);
    </script>
</body>

4.简单特效开发

抽奖

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>抽奖</title>
    <style type="text/css">
        *{margin: 0px;padding: 0px;}
        .container{
            width: 500px;height: 600px;background: white;border:solid 2px orange;margin: auto;border-radius: 10px;}
        .box,.show,.show_active{width: 450px;height: 450px;border-radius: 50%;}
        .box{border:2px orange solid;padding: 10px;margin: 10px auto;}
        .show{background-color: pink;font-size: 70px;line-height: 450px;text-align: center;}
        .show_active{background-color: #D0D0D0;color:#fff;font-size: 70px;line-height: 450px;text-align: center;}
        #btn{width: 200px;height: 40px;background-color:pink;display: block;margin: auto;font-size: 20px;}
        
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            <div id="show" class="show">
                等待抽奖
                </div>
        </div>
        <button id="btn" onclick="playGame()">开始抽奖</button>
    </div>

    <script type="text/javascript">
        var _names=["iphone7 plus","iPad Pro","apple watch","iPad mini4","iphone6","apple"]
        //获取页面中要使用的标签对象
        var _btn=document.getElementById("btn");
        var _show=document.getElementById("show");
        var _timer;
        var _flag=false;

        function playGame(){
            if (!_flag){
                _flag=true;
                _timer=setInterval(function(){
                    // 获取随机下标
                    var _no=Math.floor(Math.random(_names)*_names.length);
                    // 获取中奖礼品
                    var _n=_names[_no];
                    // 展示中奖礼品
                    _show.textContent=_n;
                    // 修改按钮的文本
                    _btn.textContent="停止抽奖";
                    // 修改展示的样式
                    _show.className="show_active"   
                },50);
            }else{
                _flag=false;
                clearInterval(_timer);
                // 修改按钮的文本
                _btn.textContent  = "开始抽奖";
                // 修改展示的样式
                _show.className = "show";
            }
        }


    </script>
</body>
</html>

效果展示：

抽奖

飞机飞行进度演示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>飞机飞行进度演示</title>
    <style type="text/css">
        *{margin: 0px;padding: 0px;}
        #nav{position: relative;
            height: 128px;
            width: 1200px;
            border:solid 1px #8E8E8E; 
        }
        #nav img{
            position: absolute;
            left: 0px;
            top:0px;
        }

        #process{
            height: 128px;
            background:#FFA042;
            width: 0px;
        }
    </style>
</head>
<body>
    <div id="nav">
        <div id="process"></div>
        ![](images/flystart.png)
    </div>
    <button onclick="start()">开始飞行</button>
    <script type="text/javascript">
        // 获取小飞机图片
        var _plane=document.getElementById("plane");
        var _process=document.getElementById("process");
        // 定义一个变量，用来存放计时器
        var _timer;

        // start()函数
        function start(){
            _timer=setInterval(function(){
                // 获取left的样式数值
                var _left=_plane.offsetLeft;
                var _width=_process.offsetWidth;
                // 飞行过程left的值增加
                _left+=10;
                _width+=10;

                // 设置随着飞机的飞行 飞机的图片发生改变
                if (_left>200 && _left<800) {
                    _plane.setAttribute("src","images/flying.png");
                    _process.style.background="#6FB7B7";

                }else if(_left>800){
                    _plane.setAttribute("src","images/flyend.png");
                    _process.style.background="#02DFB2"
                }

                // 边界的判断
                if (_left>=1200){
                    // 停止计时函数
                    clearInterval(_timer);
                }

                // 设置样式
                _plane.style.left=_left+"px";
                _process.style.width=_width+"px";

            },100)
        }

    </script>

</body>
</html>

效果展示：

飞机飞行进度演示

5.JavaScript事件——Event

事件操作：
事件就是一种发生在网页上的行为；鼠标单击、鼠标双击、键盘按下、键盘抬起、获得焦点、失去焦点等等各种行为
常见的事件：

鼠标事件

属性/函数名称	描述
onmouseout	鼠标离开
onmouseenter	鼠标进入
onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。

键盘事件

属性/函数名称	描述
altKey	返回当事件被触发时，"ALT" 是否被按下。
button	返回当事件被触发时，哪个鼠标按钮被点击。
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey	返回当事件被触发时，"CTRL" 键是否被按下。
metaKey	返回当事件被触发时，"meta" 键是否被按下。
relatedTarget	返回与事件的目标节点相关的节点。
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey	返回当事件被触发时，"SHIFT" 键是否被按下。

焦点事件：常用于表单元素标签

onfocus 获取焦点事件【获得光标事件】
onblue 失去焦点事件
onchange 内容修改事件，

事件的绑定方式：
1.标签属性绑定
2.dom元素绑定

鼠标拖拽功能

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>鼠标拖动</title>
    <style type="text/css">
        #box{
            position:absolute;
            width: 336px;
            height: 300px;
            background-image:url("images/mv33.jpg"); }

    </style>
</head>
<body>
    <div id="box">
        
    </div>
    <script type="text/javascript">
        var _box=document.getElementById("box");

        // event事件对象，可以通过事件对象，获取到鼠标的位置
        _box.onmousedown=function(event){
            var _clientX = event.clientX;
            var _clientY = event.clientY;

            var _boxl = _box.offsetLeft;
            var _boxt = _box.offsetTop;

            var _left = _clientX - _boxl;
            var _boxt = _clientY - _boxt;

            document.onmousemove = function(event){
                var _clientX1 = event.clientX;
                var _clientY1 = event.clientY;

                var _l = _clientX1 - _left;
                var _t = _clientY1 - _boxt;

                _box.style.left = _l + "px";
                _box.style.top = _t + "px"
            }

            document.onmouseup=function(event){
                document.onmousemove=null;
            }
        }
    </script>
</body>
</html>

效果展示：

鼠标拖拽

扩展

瀑布流式布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style>
    *{margin:0px;padding:0px;}
    #container{width: 1200px;margin:auto;position:relative;}
    .box{padding:5px;float:left;position:absolute;left:0;top:0;}
    .item{padding:5px;border:solid 1px #888;width:190px;border-radius:5px;}
    .item > img{border:none;width:190px;border-radius:5px;vertical-align:bottom;}
    </style>
</head>
<body>
    <div id="container">
        <div class="box">
            <div class="item">![](image/1.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/2.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/3.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/4.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/5.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/6.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/7.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/8.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/9.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/10.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/11.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/12.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/13.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/14.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/15.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/16.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/17.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/18.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/19.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/20.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/21.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/22.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/23.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/24.png)</div>
        </div>
        <div class="box">
            <div class="item">![](image/25.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/26.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/27.png)</div>
        </div>
        <div class="box">
            <div class="item">![](image/28.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/29.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/30.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/31.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/32.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/33.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/34.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/35.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/36.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/37.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/38.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/39.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/40.jpg)</div>
        </div>
    </div>

    <script>
        // 网页中的标签和图片加载
        // 等待网页中的所有数据加载完成，再执行代码
        // window.onload 页面数据加载事件

        window.onload = function() {
            var _container = document.getElementById("container");

            // 获取所有的图片
            var _imgs = document.getElementsByClassName("box");

            // 计算一行可以存放多少张图片
            var _containerWidth = _container.offsetWidth;
            var _imgWidth = _imgs[0].offsetWidth;
            var _cols = Math.floor(_containerWidth / _imgWidth);

            // 声明一个记录高度的数组
            var _height = [];

            // 遍历所有的图片，开始定位
            for(var i = 0; i < _imgs.length; i++) {
                if(i < _cols) {
                    // 保存第一行中每一张图片的高度
                    _height.push(_imgs[i].offsetHeight);
                    _imgs[i].style.left = _imgWidth * i + "px";
                } else {
                    // 计算数组中的最小值
                    var _minHeight = Math.min.apply(null, _height);
                    console.log(_minHeight);

                    var _minIndex = getMinIndex(_minHeight, _height);
                    console.log(_minIndex);

                    // i 指的是循环到else的 i与function getMinIndex函数返回值 i不是一个值
                    _imgs[i].style.top = _minHeight + "px"；
                    _imgs[i].style.left = _minIndex * _imgWidth + "px";

                    // 更新最小高度
                    _height[_minIndex] += _imgs[i].offsetHeight;
                }
            }
        }
        /*value是最小值， arr是这个值所在的数组*/
        function getMinIndex(value , arr){
            for(var i = 0; i < arr.length; i ++) {
                if(value == arr[i]){
                    return i;
                }
            }
        }
    </script>
</body>
</html>

效果展示：

瀑布流式布局

前端心得
1.基础阶段：HTML+CSS 2.js阶段：JavaScript基础、JavaScript进阶、JavaScri...
Javascript(2)-js进阶
1.JavaScript核心操作——DOM对象 window对象 screen对象 history对象 locat...
JavaScript
在JavaScript入门篇中，我们学习了如何插入JS、输出内容及简单的DOM操作，JavaScript进阶篇让您...
2018-11-4 js
javascript 1.js简介 javascript 与 java js组成：1.ECMAScript 2.D...
js基础知识点总结系列(一)
1.javascript概述(了解) 2.js的发展史 3.js组成部分 4.js的特点 2.JavaScript...
Python（四十）JavaScript进阶
Python（四十）JavaScript进阶这篇文章主要涉及的内容是JS中的内置对象（Math对象以及日期对象）...
JavaScript进阶-2
1、ES6基础 ECMAScript(ES6) 是JavaScript语言的下一代标准，已经在2015年6月正式发...
【JavaScript】技术参考资料
JS基础、高级、进阶 MDN·JavaScript 函数式编程阮一峰老师的入门简介: 函数式编程初探、函数式编程...
JS同步异步与事件循环
文章序理解JS的单线程和同步异步逻辑、事件循环（event loop）是学习JavaScript进阶的必经之路，...
javaScript中的BOM和DOM对象
1、前端部分： HTML CSS js（javascript）： 2、js的历史： js的版本变迁：ES6 ES2...

Javascript(2)-js进阶

1.JavaScript核心操作——DOM对象

2.DOM基础API操作

3.DOM核心API操作

代码操作

4.简单特效开发

5.JavaScript事件——Event

扩展

相关文章

前端心得

Javascript(2)-js进阶

JavaScript

2018-11-4 js

js基础知识点总结系列(一)

Python（四十）JavaScript进阶

JavaScript进阶-2

【JavaScript】技术参考资料

JS同步异步与事件循环

javaScript中的BOM和DOM对象

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

web前端

前端笔记