今天的开始进入了js的高级语法 我马上也要复习完了，之前学到闭包递归，就回去复习去了，复都复习这么久而且，复习的过程真的比学知识的过程难熬的多，只不过终于要复习完了，再来点es6的新语法马上就要步入vue了，想想都有点小激动，今天首先来的第一个案例我称之为目前为止的史诗级难度，第一次做的时候懵懵懂懂的，这第二次复习到再做慢慢的有点感觉了，也懂了很多但还是有一些部分自己独立完成不了，这是一个基于面向对象的tab栏，我第一次做的时候应该也在下面开贴了，这一次做收货照样很多，不多说了先看效果吧

先来html代码吧，js下面再说

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>面向对象 Tab</title>

    <link rel="stylesheet" href="./styles/tab.css">

    <link rel="stylesheet" href="./styles/style.css">

</head>

<body>

    <main>

        <h4>

            Js 面向对象 动态添加标签页

        </h4>

        <div class="tabsbox" id="tab">

            <!-- tab 标签 -->

            <nav class="fisrstnav">

                <ul>

                    <li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>

                    <li><span>测试2</span><span class="iconfont icon-guanbi"></span></li>

                    <li><span>测试3</span><span class="iconfont icon-guanbi"></span></li>

                </ul>

                <div class="tabadd">

                    <span>+</span>

                </div>

            </nav>

            <!-- tab 内容 -->

            <div class="tabscon">

                <section class="conactive">测试1</section>

                <section>测试2</section>

                <section>测试3</section>

            </div>

        </div>

    </main>

<script src="./js/index.js"></script>

</body>

</html>

html其实还是蛮简单的，js就有说头了，全部是基于class类来实现的，做这一个案例我觉得就可以对类有一个很清楚的认知了，做下来很有帮助，第二次做有点小bug哈，应该让外面与里面串联起来所以最好还是类接受一个id传进来但我这里直接就开始了啥也没传所以要看传id的版本在我最开始几篇应该有

// 纯纯的相当于第一次做了 很久之后再次回归我就大多数拿来冥想了 想看具体的思想步骤的在我前几篇随笔里面那个写的清晰地多

var that

class Tab {

    constructor() {

        that = this

        // 1.1 获取元素在这里获取

        this.ul = document.querySelector('ul')

        // 1.3面板对应切换

        this.tabscon = document.querySelector('.tabscon')

        // 2.点击加号可以添加tab栏和内容

        this.add = document.querySelector('.tabadd span')

        this.init()

    }

    // 2.4这里是拿来获取最新的数据 以便增删改查的操作

    getNew() {

        this.lis = this.ul.querySelectorAll('li')

        this.sections = this.tabscon.querySelectorAll('section')

        this.close = document.querySelectorAll('.icon-guanbi')

        this.spans = this.ul.querySelectorAll('li span:first-child')

    }

    // 2.3需要一个初始化函数 一开始就让所有组件绑定事件

    init() {

        this.getNew()

        this.add.onclick = that.addSection

        for (var i = 0 ; i < this.lis.length; i++) {

            this.lis[i].setAttribute('data-index', i)

            this.lis[i].onclick = this.togge

            // 3.1同样在初始化里面为删除绑定点击事件

            this.close[i].onclick = this.remove

            this.spans[i].ondblclick = this.dbclick

            this.sections[i].ondblclick = this.dbclick

        }

    }

    clearCLass() {

        // 1.2由于这里要用到this 且等会会被调用 所以要准备一个that

        // 2.2因为下面要用到清楚样式的地方还有点多

        for (var i = 0 ; i < this.lis.length; i++) {

            this.lis[i].classList.remove('liactive')

            that.sections[i].classList.remove('conactive')

        }

    }

    // 1.点击切换效果

    togge() {

        that.clearCLass()

        this.classList.add('liactive')

        var index = this.getAttribute('data-index')

        that.sections[index].classList.add('conactive')

    }

    // 2.1添加效果

    addSection() {

        // 2.5这里这个新语法很重要 如果用原来的appendchild 得不到及时的新数据 就会不知道插入在哪里去就会报错

        var li = '<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>'

        that.ul.insertAdjacentHTML('beforeend', li)

        var section = '<section class="conactive">测试'+Math.random()+'</section>'

        that.tabscon.insertAdjacentHTML('beforeend', section)

        that.clearCLass()

        that.init()

    }

    // 3.删除效果

    remove(e) {

        // 3.1这里有个疑难点卡了我半天 因为点的是小close 这里有个冒泡效果 而li也有个点击效果所以你一点击小叉 就上升到li也会被点击 先不说

        // 这个点击重不重要 如果不关的话 这里点击了 那你下面还有个点击上一个按钮的行为就不会触发 因为同一时间只能点一个li

        e.stopPropagation()

        var index = this.parentNode.getAttribute('data-index')

        that.ul.removeChild(this.parentNode)

        that.tabscon.removeChild(that.sections[index])

        that.lis[index - 1] && that.lis[index - 1].click()

    }

    // .4.双击修改功能

    dbclick() {

        // console.log(val);

        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()

        var str = this.innerHTML

        this.innerHTML = '<input type="text">'

        this.children[0].value = str

        this.children[0].onblur = function() {

            this.parentNode.innerHTML = this.value

        }

    }

}

var tab = new Tab()

2.

第二个呢，是一个比较完整的案例，这个案例的问题点出现在我注释的第四步，实时查询显示输入的每一个字符，这个确实也是没有记住一个新语法，inclouds字符串的，用来查找前面字符串是否包含后面字符串的内容

然后是他的原理实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        table {

            width: 400px;

            border: 1px solid #000;

            border-collapse: collapse;

            margin: 0 auto;

        }

        td,

        th {

            border: 1px solid #000;

            text-align: center;

        }

        input {

            width: 50px;

        }

        .search {

            width: 600px;

            margin: 20px auto;

        }

    </style>

</head>

<body>

    <div class="search">

        按照价格查询: <input type="text" class="start"> - <input type="text" class="end"> <button class="search-price">搜索</button> 按照商品名称查询: <input type="text" class="product"> <button class="search-pro">查询</button>

    </div>

    <table>

        <thead>

            <tr>

                <th>id</th>

                <th>产品名称</th>

                <th>价格</th>

            </tr>

        </thead>

        <tbody>

        </tbody>

    </table>

    <script>

        // 利用新增数组方法操作数据

        var data = [{

            id: 1,

            pname: '小米',

            price: 3999

        }, {

            id: 2,

            pname: 'oppo',

            price: 999

        }, {

            id: 3,

            pname: '荣耀',

            price: 1299

        }, {

            id: 4,

            pname: '华为',

            price: 1999

        }, ];

        // 1.动态创建表格行列元素

        var tbody = document.querySelector('tbody')

        function createArr(arr) {

            tbody.innerHTML = ''

            arr.forEach(function(value) {

            var tr = document.createElement('tr')

            for ( k in value) {

                var td = document.createElement('td')

                td.innerText = value[k]

                tr.appendChild(td)

            }

            tbody.appendChild(tr)

            })

        }

        createArr(data)

        // 2.按照价格查询

        var priceSearch = document.querySelector('.search-price')

        var priceStart = document.querySelector('.start')

        var priceEnd = document.querySelector('.end')

        priceSearch.onclick = function() {

            var start = priceStart.value

            var end = priceEnd.value

            var newArr = data.filter(function(value) {

                return value.price >= start && value.price <= end

            })

            // console.log(newArr,start,end);

            createArr(newArr)

        }

        // 3.按照商品名称查询

        var nameSearch = document.querySelector('.search-pro')

        var product = document.querySelector('.product')

        nameSearch.addEventListener('click',function() {

            var newArr1 = data.filter(function(value) {

                return value.pname == product.value

            })

            createArr(newArr1)

        })

        // 4.当输入一个字 不用点搜索就出来与之匹配的结果

        // 这个案例最关键的一个问题其实就是一个字符串的方法 查找该字符串里面是否包含这个字符

        product.addEventListener('input', function() {

            var str = product.value

            var newArr2 = data.filter(function(value) {

                if (value.pname.includes(str)) {

                    return value

                }

            })

            createArr(newArr2)

        })

    </script>

</body>

</html>

复习——高级语法对象原型，es5新增语法的更多相关文章

  1. 25 JavaScript对象原型&ES5新的对象方法

    JavaScript对象原型 所有JavaScript对象都从原型继承对象和方法 日期对象继承自Date.prototype,数组继承自Array.prototype,对象构造器新建的对象Person ...

  2. ECMAScript简介以及es6新增语法

    ECMAScript简介 ECMAScript与JavaScript的关系 ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现.(前者是后者的 ...

  3. 【ES6新增语法详述】

    目录 1. 变量的定义 let const 2. 模版字符串 3. 数据解构 4. 函数扩展 设置默认值 箭头函数 5. 类的定义 class 6. 对象的单体模式 "@ ES6新增了关于变 ...

  4. ES6构造函数class 和 ES5构造函数语法

    构造函数就是JavaScript程序定义好的函数,我们直接使用就可以,实际也是一种函数,构造函数专门用于生成定义对象,通过构造函数生成的对象,称为实例化对象 构造函数分为两种,一种是JavaScrip ...

  5. Webpack4 学习笔记三 ES6+语法降级为ES5

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 将es6.es7语法降级为es5 需要通过 babel JavaScript编译器. 安装: npm i babel ...

  6. ES5与ES6常用语法教程之 ②解构语法糖、声明变量异同

    js常用语法系列教程如下 es5与es6常用语法教程(1) es5与es6常用语法教程(2) es5与es6常用语法教程(3) es5与es6常用语法教程(4) es5与es6常用语法教程(5) es ...

  7. 面向对象编程-终结篇 es6新增语法

    各位,各位,终于把js完成了一个段落了,这次的章节一过我还没确定下面要学的内容可能是vue也可能是前后端交互,但无论是哪个都挺兴奋的,因为面临着终于可以做点看得过去的大点的案例项目了,先憋住激动地情绪 ...

  8. Javascript高级编程学习笔记（21）—— 对象原型

    JS中对象相关的最重要的恐怕就是原型链了 原型链也是JS中对象继承的实现的基础 接昨天的文章,我们使用构造函数创建对象的时候仍然存在一些问题 那就是所有的实例没法共用一个函数 这样无疑会造成极大的内存 ...

  9. Python学习---django之ORM语法[对象关系映射]180124

    ORM语法[对象关系映射] ORM: 用面向对象的方式去操作数据库的创建表以及增删改查等操作. 优点:1 ORM使得我们的通用数据库交互变得简单易行,而且完全不用考虑该死的SQL语句.快速开发. 2 ...

随机推荐

  1. YUV相关积累

    关于yuv 格式-Semi Planar和Planar https://www.cnblogs.com/welen/articles/5454315.html

  2. mysql事务、隔离级别

    一.事务简介 事务是一组操作的集合,它是一一个不可分割的工作单位,事务会把所有的操作作为- -个整体一起向系统提交或撤销操作请求,即这些操作要么同时成功,要么同时失败. 二.有关事务操作 mysql中 ...

  3. 基于消息队列（RabbitMQ）实现延迟任务

    一.序言 延迟任务应用广泛,延迟任务典型应用场景有订单超时自动取消:支付回调重试.其中订单超时取消具有幂等性属性,无需考虑重复消费问题:支付回调重试需要考虑重复消费问题. 延迟任务具有如下特点:在未来 ...

  4. CSDN中Markdown编辑器使用方法

    Markdown编辑器 如果想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识. 新的改变 CSDN中Markdown编辑器进行了一些功能拓展与语法支 ...

  5. jmeter + tomcat + ant + svn +jenkins 实现持续集成测试

    l 安装jdk时候需要提前检查jdk是否安装成功 l 在dos下输入javac      java -version l l 安装jmeter l 校验是否安装成功: l 进入jmeter目录下bin ...

  6. Eureka单机&集群配置

    目录 Eureka是什么 自我保护机制 版本选择 服务搭建 创建项目 导入GAV坐标 application启动类添加注解 配置yml 启动项目 集群配置 修改上面的yml 打jar包到另外一台电脑O ...

  7. Angular依赖注入：全面讲解（翻译中）

    在实际使用Angular依赖注入系统时,你需要知道的一切都在本文中.我们将以实用易懂并附带示例的形式解释它的所有高级概念. Angular最强大.最独特的功能之一就是它内置的依赖注入系统. 大多数时候 ...

  8. Three.js 火焰效果实现艾尔登法环动态logo 🔥

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 <艾尔登法环>是最近比较火的一款游戏,观察可以发现它的 Log ...

  9. 数据库常用的sql语句大全--sql

    前言 本片博客使用mysql数据库进行数据操作,使用Navicat for mysql 这个IDE进行可视化操作.每个SQL语句都是亲身实验验证的,并且经过自己的思考的.能够保证sql语句的可运行性. ...

  10. web自动化之svg标签定位

    今天在定位元素的时候,发现页面有一个svg标签需要进行定位. 于是便使用常规的xpath定位方法试了一下,很明显结果是不行的,哈哈哈... 错误定位方法://div[@class="oper ...