解决增删改查

最新推荐文章于 2023-02-07 15:53:31 发布
最新推荐文章于 2023-02-07 15:53:31 发布
阅读量212 收藏
点赞数
分类专栏： PHP 面向对象 文章标签： 函数 面向对象 class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bo_bo_bo_la/article/details/78867623
版权

面向对象

1. 用构造函数方法

构造函数类似于类，但不是类，在ES6出来之前常规用法。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="wrap"></div>
        姓名：<input class="addName" type="text" /> 电话：<input class="addPhone" type="text" /><button onclick="addPhone()">添加电话</button><br />
        姓名：<input class="searchName" type="text" /><button onclick="searchBtn()">查询电话</button><br />
        姓名：<input class="delName" type="text" /><button onclick="delBtn()">删除电话</button><br />
    </body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        var data = [{name:"张三",tel:"11111111"},{name:"李四",tel:"2222222"}];
        function PhoneBook(data){
            this.data = data;
        }
        PhoneBook.prototype.showPhone = function(){
            console.log(1111111)
            $('.wrap').html("");
            var html = "";
            console.log(this.data)
            for(let i = 0; i < this.data.length;i++){
                html += `<p>姓名:${this.data[i].name};电话:${this.data[i].tel}</p>`;
            }
            $(html).appendTo(".wrap");
        }
        PhoneBook.prototype.addPhone = function(name, tel){
            var obj = {name,tel};
            this.data.push(obj);
        }
        PhoneBook.prototype.searchPhone = function(name){
            for(var i = 0; i < this.data.length; i++){
                if(name == this.data[i].name){
                    alert(this.data[i].tel)
                }
            }
        }
        PhoneBook.prototype.delPhone = function(name){
            for(var i = 0; i < this.data.length; i++){
                if(name == this.data[i].name){
                    this.data.splice(i,1);  
                }
            }
        }
        var newPhoneBook = new PhoneBook(data);
        newPhoneBook.showPhone();
        function addPhone(){
            console.log(11111)
            var myName = $('.addName').val();
            var myTel = $('.addPhone').val();
            newPhoneBook.addPhone(myName, myTel);
            newPhoneBook.showPhone();
        }
        function searchBtn(){
            var myName = $('.searchName').val();
            newPhoneBook.searchPhone(myName);
        }
        function delBtn(){
            var myName = $('.delName').val();
            newPhoneBook.delPhone(myName);
            newPhoneBook.showPhone();
        }
    </script>
</html>
2. 用类方法

ES6出来之后，逐渐取代构造函数，代表着JS越来越像正规军靠近

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="wrap"></div>
        姓名：<input class="addName" type="text" /> 电话：<input class="addPhone" type="text" /><button onclick="addPhone()">添加电话</button><br />
        姓名：<input class="searchName" type="text" /><button onclick="searchBtn()">查询电话</button><br />
        姓名：<input class="delName" type="text" /><button onclick="delBtn()">删除电话</button><br />
    </body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        var data = [{name:"张三",tel:"11111111"},{name:"李四",tel:"2222222"}];
        class PhoneBook{
            constructor(data){
                this.data = data;
            }
            showPhone(){
                $('.wrap').html("");
                var html = "";
                for(let i = 0; i < this.data.length;i++){
                    html += `<p>姓名:${this.data[i].name};电话:${this.data[i].tel}</p>`;
                }
                $(html).appendTo(".wrap");
            }
            addPhone(name, tel){
                var obj = {name,tel};
                this.data.push(obj);
            }
            searchPhone(name){
                for(var i = 0; i < this.data.length; i++){
                    if(name == this.data[i].name){
                        alert(this.data[i].tel)
                    }
                }
            }
            delPhone(name){
                for(var i = 0; i < this.data.length; i++){
                    if(name == this.data[i].name){
                        this.data.splice(i,1);  
                    }
                }
            }
        }
        var newPhoneBook = new PhoneBook(data);
        newPhoneBook.showPhone();
        function addPhone(){
            var myName = $('.addName').val();
            var myTel = $('.addPhone').val();
            newPhoneBook.addPhone(myName, myTel);
            newPhoneBook.showPhone();
        }
        function searchBtn(){
            var myName = $('.searchName').val();
            newPhoneBook.searchPhone(myName);
        }
        function delBtn(){
            var myName = $('.delName').val();
            newPhoneBook.delPhone(myName);
            newPhoneBook.showPhone();
        }
    </script>
</html>
bo_bo_bo_la
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
增删改查
月亮投递员的博客
05-20 2115
MVC版的增删改查以及通用分页前言核心思路：最终效果:总结： 前言 嘿嘿，愉快的码砖过程来了，今天打算和大家分享一下怎样实现增删改查以及前段时间学习时用到的通用分页，想知道怎么实现吗？那我就来告诉你！ 核心思路： 增删改查呢，用到了之前学过的三层架构，使用了三层架构，能够明确分工，因为三层架构之间互不干扰，各司其职。 1、首先第一步：在你的数据库表中创建好你需要的表格以及添加好数据(我这里呢，用的是t_solr_job表格，数据是我自己添加好的)； 2、当你弄好了数据库表中的数据之后，可打开
ES6学习笔记（三）：教你用js面向对象思维来实现 tab栏增删改查功能
01-08
前两篇文章主要介绍了类和对象、类的继承，如果想了解更多理论请查阅《ES6学习笔记（一）：轻松搞懂面向对象编程、类和对象》、《ES6学习笔记（二）：教你玩转类的继承和类的对象》，今天主要来分享关于如何用js面向对象的思维来实现tab栏的一些相关的功能。 文章目录要实现的功能分析切换功能添加功能实现删除功能编辑功能总结 要实现的功能分析 点击tab栏可以切换效果 点击+号，可以添加tab项和内容项 点击X号，可以删除当前的tab项和内容项 点击tab文字或者内容项文字，可以修改里面的字体内容 抽像对象： Tab对象 （增删改查功能）实现功能效果如下图：首先建立一个class 类Tab: let t
ES6实现基本的增删改查
qq_41294224的博客
09-26 1190
1、通过字面量定义学生对象，学生对象属性包括：学号、姓名、出生日期、成绩，方法包括学习、睡觉、吃饭。 2、创建4名学生对象，并将学生对象保存至数组中。 3、遍历数组，用于显示数组中所有的学生信息（按学生成绩高到低显示）。 4、定义方法，用于更新数组中的学生信息。 5、根据学号删除数组中的学生信息。 6、根据学号查询具体的某名学生信息，并进行显示。 推荐步骤如下： 1、通过字面量创建4名学生对象(也...
一套增删改查的系统和初识es6
lyy_0522的博客
03-06 511
本周学习： 本周做了一套简略的后台管理系统，涉及到了登录页面和后台管理系统的增删改查，但是没有保存到后台的那种。使用的是原生的javascript。比较的麻烦但是很好理解。简单的评价一下就是我的页面比较的丑陋，然后有一些必要的功能比如说注册功能没有实现，然后就是代码写的比较冗杂，没有实现那种代码简洁易懂。学长说的错误我正在改正，我也正在实现没能实现的功能。 生活感悟： 学了好久的js，发现自己的知识储备太少了，有些知识点再用的时候还是不熟练，这是没有经常练习的缘故。还有就是一些知识根本就不知道，是自己
JS笔记3.4--ES6中类/继承/对象的增删改查/对象的遍历/对象的解构赋值/拷贝
weixin_42139212的博客
10-24 191
ES6中使用 class 类名{} 创建一个类 class Person{ //在constructor中定义的属性和方法，是实例对象的属性和方法（实例属性和方法） // 通过class不能自定义该类的原型对象 constructor(myName, myAge){ this.name = myName; ...
使用es6封装的一个用于cookie增删改查的js模块
08-12
使用es6封装的一个用于cookie增删改查的js模块
C# SQLite3增删改查Demo
07-14
本篇将重点介绍如何使用C#语言进行SQLite3的增删改查操作，这对于初学者来说是一次极好的实践机会。 首先，我们要理解C#与SQLite3的集成。C#通过SQLite的.NET数据提供程序（System.Data.SQLite）来与SQLite交互。...
QT连接MySQL实现增删改查分页
11-24
QT版本5.14，实现了连接MySQL进行了增删改查操作，和分页操作。解决了中文SQL提示成功但是执行失败问题。博客地址：https://blog.csdn.net/qq_37529913?spm=1001.2101.3001.5113
C#基于DBContext(EF)实现通用增删改查的REST方法实例
09-04
总的来说，利用C#的DBContext和泛型，结合RESTful设计模式，可以创建一套可复用的增删改查解决方案。这不仅可以提高代码的可维护性，还能减少开发工作量，特别是在处理大量类似数据模型的情况下。通过理解并实践这种...
最全的es6笔记看了不后悔!!!!
10-14
大牛讲师讲课总结,详细讲述常用ES6标签及语法,会让你少走很多弯路!!
springBoot简单后台增删改查实例
06-25
在本实例中，我们将深入探讨如何使用SpringBoot框架构建一个简单的后台系统，实现数据库的增删改查功能。SpringBoot以其简洁的配置和强大的功能，成为现代Java开发中的热门选择。接下来，我们将按照标题和描述，详细...
thinkPHP框架通过Redis实现增删改查操作的方法详解
10-17
在本文中，我们将深入探讨如何在thinkPHP框架中利用Redis实现增删改查操作。首先，Redis是一个NoSQL数据库，以其高效和丰富的数据结构而受到欢迎。然而，thinkPHP框架默认仅支持Redis作为缓存工具，不直接提供完整的...
JS使用ES6中的类来进行面向对象增删改操作
weixin_44134588的博客
08-11 319
结构和源码在最后, 功能需求: 1.点击tab栏可以切换效果 2.点击+号,可以添加tab项和内容项 3.点击ⅹ号,可以删除当前的tab项和内容项 4.双击tab项文字或者内容项文字可以修改里面的文字内容 简单思路分析: 思路总结 1,一共有四个大的模块,分别是 1,切换 2,增加 3,删除 4,修改 首先constructor构造函数获取对象:id 增加模块 li的父元素, section的父元素 1,切换模块 切换模块是使用点击事件进行排他思想,将其余的li和对应的section的类名 清空,当前点击
数组的增删改查及其他拓展属性
bobringtheboys的博客
02-28 148
数组的增删改查 var list = [1, 2, 3, 4] 增:[下标] list.push(5) ;//把5放到list的最后面 list.unshift(0) //把0放在数组的最前面 splice 删 list.pop() ;//把最后一个元素删除 splice delete (基本不用 只删数 会保留位置) list.shift();//删除第一个元素 改 [下标] list....
MongoDB的简单增删改查示例
Bo_java的博客
07-07 363
内容参考《MongoDB权威指南第2版》 以下内容基本都是参照《MongoDB权威指南第2版》这本书的内容学习并且测试的，目前是第三章和第四章的内容。我用的MongoDB的版本是4.0。 // 一：创建，更新，删除文档 for (var i = 0; i < 100; i++){ // 插入文档_id id不可以重复，不指定id会自动生成id db.foo.insert({"no...
new Set()的基础用法(ES6)
最新发布
weixin_53841730的博客
02-07 1465
添加某个值，返回 Set 结构本身，当添加实例中已经存在的元素，set不会进行处理添加。返回键名的遍历器，相等于返回键值遍历器values()Set本身是一个构造函数，用来生成 Set 数据结构。删除某个值，返回一个布尔值，表示删除是否成功。返回一个布尔值，判断该值是否为Set的成员。，没有重复的值，我们一般称为集合。3.3 遍历 entries()3.4 遍历 forEach()3.2 遍历 values()3.1 遍历 keys()清除所有成员，没有返回值。4.2 用于字符串去重。1、什么是Set()
ES6关于对象增删改
wtt52800的博客
04-15 323
obj
浅谈前后台交互
bo_bo_bo_la的博客
11-28 3523
举例：外卖餐厅订餐 初识状态： ~~~ 丽德快餐厅 ~~~ 具体的菜单（菜品+价格），前台要从后台获取，这时就要前台想后台发送一个数据，jquery将Ajax封装。以GET方式向后台提交数据，链接后台的地址存在URL里面，async判断是否异步，一般都会选择true，异步，因为同步会出现卡顿现象，dataType，要求后台给我们返回的数据类型，success数据传送成功后生成的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值