发新贴  快速回复

2018 年 3 月 30 日 - 微信技术交流群:【WEB 前端抱团学习群】作业提交区

  leo
2018-03-30 17:25

今天第二场技术分享通知

 

主题:《React 新手入门课程》系列之:ES6语法基础

时间:14:00~15:30

嘉宾:妙味讲师翟宏杰

方式:微信群内-文字直播

说明:

- 很多同学想学前端框架 react

- 但感觉自己基础不够

- 因此我们为大家定制了一套 React 新手入门课程

 

- 只要你具备:

 1、JS 基础

 2、DOM\EVENT 基础

 3、面向对象基础

 

- 你就能跟着我们的分享

- 逐渐开始走入 React 开发的世界…

 

 

 

《React 新手入门课程》大纲

 

### ES 6 部分

 

1. let  const  变量声明

2. 函数扩展: 箭头函数

 1. 匿名的

 2. 默认参数

 3. 语法

  1. 一个参数, 不写括号

  2. 箭头后面可以写函数体, 也可以直接写返回值, 

  3. this 指向

3. 模板字符串:

4. 变量解构赋值

5. spread 与 rest

6. class 相关

 1. 继承

 2. 成员方法的 this 指向

 

### 常用的数组方法部分

 

1. map()

2. filter()

3. every()

4. some()

5. reduce()

 

###  模块化的语法部分

 

1. ES6 的模块化语法

2. commonJS 的模块化语法

 

## react零基础入门

1. 准备 create-react-app 脚手架工具

2. 初次运行一个 Hellow World

3. 认识 JSX

4. 认识组件

5. 认识 props

6. 认识 state

7. 使用事件

附件下载:
 
馒小头

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>dom-操作</title>

</head>

<style>

    body,ul,dl,dt,dd{

        padding: 0;margin: 0;list-style: none;

    }

    #wrap{

        width: 900px;

        height: 400px;

        background: linear-gradient(to right bottom,#21ffff,#ce6584);

        position: absolute;

        left: 0;

        top: 0;

        bottom: 0;

        right: 0;

        margin: auto;

        box-sizing: border-box;

        padding: 80px 0;

    }

    #content{

        width: 700px;

        height: 240px;

        background: rgba(255,255,255,0.5);

        margin: 0 auto;

    }

    #top-wrap{

        height: 50px;

        background: rgba(255,255,255,0.2);

    }

    .fl{

        float: left;

    }

    .fr{

        float: right;

    }

    .clearfix::after{

        content: "";

        display: block;

        height: 0;

        clear: both;

    }

    .top-l,.top-r{

        float: left;

        height: 100%;

        font-size: 14px;

    }

    .top-l{

        width: 100px;

        line-height: 50px;

        text-align: center;

    }

    .top-r{

        width: calc(100% - 100px);

        padding: 11px 0;

        box-sizing: border-box;

    }

    .top-r li{

        border: 2px solid #10aaff;

        height: 24px;

        line-height: 24px;

        float: left;

        padding: 0 5px;

        margin-right: 5px;

        display: none;

    }

    .details{

        padding: 0 5px;

        color: #10aaff;

    }

    .close{

        padding: 0 5px;

        color: #fff;

        background: #10aaff;

        cursor: pointer;

    }

    dl{

        height: 40px;

        line-height: 40px;

        font-size: 14px;

    }

    dt{

        padding-right:20px;

        color: #848a8c;

    }

    dl dd{

        float: left;

        margin-right: 20px;

        color: #181818;

        cursor: pointer;

    }

    #inof-wrap{

        padding: 15px 20px;

        box-sizing: border-box;

        background: rgba(255,255,255,0.6);

    }

    #inof-wrap dl:first-child{

        border-bottom: 1px dashed #5acbd6;

    }

    #inof-wrap dl:nth-child(3){

        border-bottom: 1px dashed #5acbd6;

        border-top: 1px dashed #5acbd6;

    }

    .active{

        color: #10aaff;

    }

</style>

<body>

    <div id="wrap">

        <div id="content">

            <div id="top-wrap">

                <div class="top-l">你的选择:</div>

                <ul class="top-r">

                    <li><span class="details">苹果</span><span class="close">×</span></li>

                    <li><span class="details">3.0英寸以下</span><span class="close">×</span></li>

                    <li><span class="details">安卓(Android)</span><span class="close">×</span></li>

                    <li><span class="details">联通3G</span><span class="close">×</span></li>

                </ul>

            </div>

            <div id="inof-wrap">

                <dl>

                    <dt class="fl">品牌:</dt>

                    <dd>苹果</dd>

                    <dd>小米</dd>

                    <dd>锤子</dd>

                    <dd>魅族</dd>

                    <dd>华为</dd>

                    <dd>OPPO</dd>

                    <dd>vivo</dd>

                    <dd>乐视</dd>

                    <dd>360</dd>

                    <dd>中兴</dd>

                    <dd>索尼</dd>

                </dl>

                <dl>

                    <dt class="fl">尺寸:</dt>

                    <dd>3.0英寸以下</dd>

                    <dd>3.0-3.9英寸</dd>

                    <dd>4.0-4.5英寸</dd>

                    <dd>4.6-4.9英寸</dd>

                    <dd>5.0-5.5英寸</dd>

                    <dd>6.0英寸以上</dd>

                </dl>

                <dl>

                    <dt class="fl">系统:</dt>

                    <dd>安卓(Android)</dd>

                    <dd>苹果(IOS)</dd>

                    <dd>微软(WindowsPhone)</dd>

                    <dd>无</dd>

                    <dd>其他</dd>

                </dl>

                <dl>

                    <dt class="fl">网络:</dt>

                    <dd>联通3G</dd>

                    <dd>双卡单4G</dd>

                    <dd>双卡双4G</dd>

                    <dd>联通4G</dd>

                    <dd>电信4G</dd>

                    <dd>移动4G</dd>

                </dl>

            </div>

        </div>

    </div>

</body>

<script>

    "use strict";

    let aLi=document.querySelectorAll('.top-r li');

    let aClose=document.querySelectorAll('.top-r .close');

    let aDl=document.querySelectorAll('#inof-wrap dl');

    let aDd=document.querySelectorAll('#inof-wrap dl dd');

    for(let i=0;i<aDd.length;i++){

        aDd[i].err==function(){

            //父元素 dl的index索引值

            let parent_index=this.parentNode.index;

            //点击的dd里的内容

            let dd_content=this.innerText;

            //如果点击的dd没有active的类并且active类没有在当前dl里的dd的dom身上

            if(this.getAttribute("class")!=="active" && !this.parentNode.querySelector('.active')){

                //点击的dd就给加个active类

                this.className="active";

            }else{//如果已经存在类了,点击的dd添加上active类,当前dl里的dd已经存在的去掉active类

                this.parentNode.querySelector('.active').className="";

                this.className="active";

            }

            //对应索引值的li的内容和显示隐藏控制

            aLi[parent_index].style.display="block";

            aLi[parent_index].querySelector('.details').innerHTML=dd_content; 

        }

    }

    for(let i=0;i<aClose.length;i++){

        //给关闭按钮和dl添加自定义索引值

        aClose[i].index=i;

        aDl[i].index=i;

        //关闭按钮注册点击事件

        aClose[i].err==function(){

            this.parentNode.querySelector('.details').innerHTML='';

            this.parentNode.style.display='none';

            aDl[this.index].querySelector('.active').className="";

        }

    }

</script>

</html>

2018-03-31 10:17  回复本帖
妙味用户650139

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>Document</title>

<style>

body{

margin: 0;

}

#warp {

width: 700px;

height: 500px;

margin: 30px auto;

background: url(img/warp.png) no-repeat;

position: relative;

/*text-align: center;*/

}

#files {

position: absolute;

left: 148px;

width:420px;

top: 200px;

overflow: auto;

}

.add {

width: 132px;

height: 47px;

display: inline-block;

text-decoration: none;

background: url(img/addberfor.png) no-repeat;

background-size: cover;

position: absolute;

left: 290px;

bottom: 102px;

}

.del{

width: 132px;

height: 48px;

display: inline-block;

text-decoration: none;

background: url(img/add.png) no-repeat;

position: absolute;

left: 295px;

bottom: 50px;

}

.file{

width: 116px;

height: 118px;

border: 2px solid rgba(0,0,0,0);

position: relative;

border-radius: 10%;

float: left;

margin-right: 10px;

}

 

.fileActive{

border-color:#b5a3c2 ;

background:#6f5872 ;

}

.file .ico{

margin: 20px auto 0;

width:70px;

height: 57px;

background: url(img/wenjian.png) no-repeat;

background-size: cover;

}

.file .check{

position: absolute;

left: 0;

top: 0;

display: none;

}

.fileActive .check{

display: block;

}

.file span{

display: block;

font: 16px/34px "微软雅黑";

text-align: center;

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

color: #fff;

 

}

.file .text{

position: absolute;

left: 12px;

top: 82px;

height: 20px;

padding: 1px;

display: none;

width: 80px;

font: 16px/34px "微软雅黑";

}

</style>

</head>

<body>

<section id="warp">

<div id="files">

</div>

<a href="script:;" class="add"></a>

<a href="script:;" class="del"></a>

</section>

<script>

let add = document.getElementsByClassName("add");

let del = document.getElementsByClassName("del");

let files = document.getElementById("files");

let Aspan = document.getElementsByTagName("span");

let Icheck = document.getElementsByClassName("check");

let atext = document.getElementsByClassName("text");

let file = document.getElementsByClassName("file");

 

add[0].err= = function(){

if( file.length < 3){

files.innerHTML += `<div class="file"><div class="ico"></div><input type="checkbox" class="check"><span>新建文件夹</span><input type="text" class="text" style="display: none;"></div>`;

}

}

 

files.onmouseenter = function(){

for (let i = 0; i < file.length; i++) {

file[i].onmouseenter = function(){

Icheck[i].style.display = `block` ;

file[i].className = `file fileActive`;

Aspan[i].err= = function(){

atext[i].style.display = `block` ;

}

}

file[i].onmouseleave = function(){

atext[i].style.display = `none` ;

if (atext[i].value) {Aspan[i].innerText = atext[i].value;}

if (Icheck[i].checked == false){

Icheck[i].style.display = `none` ;

file[i].className = `file`;

}

}

}

}

del[0].err= = function(){

for (let i = 0; i < Icheck.length; i++) {

if(Icheck[i].checked){

Icheck[i].parentNode.remove();

i--;

}

}

}

  </script>

</body>

</html>

2018-04-02 00:24  回复本帖
登录 后才可以发表回复