解决增删改查

来源：互联网发布：网络怎么加速编辑：程序博客网时间：2024/06/05 11:01

面向对象

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>

阅读全文

0 0