JS高级. 04 增删改查面向对象版歌曲管理、递归、
增 数组.push()
删 数组.splice(开始删除索引,删除几个)
在当前对象中调用当前对象的方法中和属性,必须用this调用
nodeType判断节点类型
节点.nodeType == 1:元素节点/2:属性节点/3:文本节点
concat 返回的是一个新的数组
封装歌曲列表管理（函数）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
//给页面中所有的元素添加一个边框 1px solid pink
//DOM中，没有提供直接获取后代元素的API
//但是可以通过childNodes来获取所有的子节点 //先找body的所有子元素
//再找body的子元素的所有子元素 function getChildNode(node){
//先找子元素
var nodeList = node.childNodes;
//在用子元素再找子元素 这里就可以递归了
//for循环中的条件，就充当了结束的条件
for (var i = 0; i < nodeList.length; i++) {
//childNode获取到到的节点包含了各种类型的节点
//但是我们只需要元素节点 通过nodeType去判断当前的这个节点是不是元素节点
var childNode = nodeList[i];
//判断是否是元素节点
if(childNode.nodeType == 1){
childNode.style.border = "1px solid pink";
getChildNode(childNode);
}
}
}
getChildNode(document.body);
}
</script>
</head>
<body>
<div>1div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<div>10div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<p>我是第1个p标签</p>
<p>我是第10个p标签</p>
</body>
</html>
面向对象封装歌曲管理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script> function SongManager(){
this.songList = null;
} //在当前对象的方法中，调用当前对象的其他方法，需要使用this
//例如 在 removeSong方法中调用 selectSong this.selectSong
SongManager.prototype = {
init:function (songList) {
this.songList = songList;
}, addSong: function (song){
this.songList.push(song);
}, removeSong:function (songName){
var song = this.selectSong(songName);
if(song == null){
throw "您要删除的歌曲不存在！请重新尝试";
}
var index = this.songList.indexOf(song);
this.songList.splice(index, 1);
}, updateSong: function (songName, singer) {
var song = this.selectSong(songName);
if(song == null){
throw "您要修改的歌曲不存在！请重新尝试";
}
song.singer = singer;
}, selectSong: function (songName) {
for (var k = 0; k < this.songList.length; k++) {
var song = this.songList[k];
if(song.songName == songName){
return song;
}
}
return null;
}
}; var pwbDEManager = new SongManager();
pwbDEManager.init([
{
songName:"青藏高原",
singer:"潘文斌"
},
{
songName:"我的换板鞋，摩擦摩擦最时尚",
singer:"约翰逊，庞麦郎"
}
]);
pwbDEManager.addSong({
songName:"东风破",
singer:"Jay Chou"
}) var gjbDEManager = new SongManager();
gjbDEManager.init([
{
songName:"两只老虎",
singer:"高金彪"
},
{
songName:"粉刷匠",
singer:"高金彪"
}
]);
// gjbDEManager.removeSong("李白");
gjbDEManager.removeSong("两只老虎");
console.log(pwbDEManager.songList);
console.log(gjbDEManager.songList); //要封装一个歌曲管理的工具
//特征：歌曲列表
//行为：增 删 改 查
</script>
</head>
<body> </body>
</html>
递归（练习在最底下）
1.在函数内调用函数自己,就是递归
2.函数不调用不占用内存
3.没有递归结束条件的递归就是死队规
递归的两个要素
1.自己调用自己
2.要有结束的条件
化归思想:把问题由难化易,化繁为简,有复杂变简单的过程成为化归
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
//给页面中所有的元素添加一个边框 1px solid pink
//DOM中，没有提供直接获取后代元素的API
//但是可以通过childNodes来获取所有的子节点 //先找body的所有子元素
//再找body的子元素的所有子元素 function getChildNode(node){
//先找子元素
var nodeList = node.childNodes;
//在用子元素再找子元素 这里就可以递归了
//for循环中的条件，就充当了结束的条件
for (var i = 0; i < nodeList.length; i++) {
//childNode获取到到的节点包含了各种类型的节点
//但是我们只需要元素节点 通过nodeType去判断当前的这个节点是不是元素节点
var childNode = nodeList[i];
//判断是否是元素节点
if(childNode.nodeType == 1){
childNode.style.border = "1px solid pink";
getChildNode(childNode);
}
}
}
getChildNode(document.body);
}
</script>
</head>
<body>
<div>1div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<div>10div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<p>我是第1个p标签</p>
<p>我是第10个p标签</p>
</body>
</html>
方式二
<script>
window.onload = function () {
//给页面中所有的元素添加一个边框 1px solid pink
//DOM中，没有提供直接获取后代元素的API
//但是可以通过childNodes来获取所有的子节点
//先找body的所有子元素
//再找body的子元素的所有子元素
function getChildNode(node){
//先找子元素
var nodeList = node.childNodes;
var result = [];
//在用子元素再找子元素 这里就可以递归了
//for循环中的条件，就充当了结束的条件
for (var i = 0; i < nodeList.length; i++) {
//childNode获取到到的节点包含了各种类型的节点
//但是我们只需要元素节点 通过nodeType去判断当前的这个节点是不是元素节点
var childNode = nodeList[i];
//判断是否是元素节点
if(childNode.nodeType == 1){
result.push(childNode);
var temp = getChildNode(childNode);
result = result.concat(temp);
}
}
return result;
}
//1.第一次调用时获取body的所有子元素,会把所有的子元素全部放到result里面
//2.每放进去一个 就找这个子元素的所有子元素 有返回值
//3.把这个返回值和我们存当前子元素的数组拼接起来 就变成了 子元素 和 孙子元素的集合
var arr = getChildNode(document.body);
for (var i = 0; i < arr.length; i++) {
var child = arr[i];
child.style.border= "1px solid pink";
}
}
</script>
递归
例子:
1, 2, 3, 4, 5, ..., 100 求和
首先假定递归函数已经写好, 假设是
foo. 即foo(100)就是求1到100的和寻找递推关系. 就是
n与n-1, 或n-2之间的关系:foo( n ) == n + foo( n - 1 )
var res = foo(100);
var res = foo(99) + 100;
将递推结构转换为递归体
function foo(n){
return n + foo( n - 1 );
}
上面就是利用了化归思想：
将 求 100 转换为 求 99
将 求 99 转换为 求 98
...
将求 2 转换为 求 1
求 1 结果就是 1
即: foo( 1 ) 是 1
将临界条件加到递归体中(求1的结果为1)
function foo( n ) {
if ( n == 1 ) return 1;
return n + foo( n - 1 );
}
练习:
求 1, 3, 5, 7, 9, ... 第
n项的结果与前n项和. 序号从0开始
先看求第n项
首先假定递归函数已经写好, 假设是
fn. 那么第n项就是fn(n)找递推关系:
fn(n) == f(n-1) + 2递归体
function fn(n) {
return fn(n-1) + 2;
}
找临界条件
求 n -> n-1
求 n-1 -> n-2
...
求 1 -> 0
求 第 0 项, 就是 1
加入临界条件
function fn( n ) {
if ( n == 0 ) return 1;
return fn( n-1 ) + 2;
}
再看求前n项和
假设已完成, sum( n ) 就是前 n 项和
找递推关系: 前 n 项和 等于 第 n 项 + 前 n-1 项的和
递归体
function sum( n ) {
return fn( n ) + sum( n - 1 );
}
找临界条件
n == 1结果为 1
加入临界条件
function sum( n ) {
if (n == 0) return 1;
return fn(n) + sum(n - 1);
}
练习
2, 4, 6, 8, 10 第 n 项与 前 n 项和
解题方法和上一题一样。
练习
现有数列: 1, 1, 2, 4, 7, 11, 16, … 求 第 n 项, 求前 n 项和.
求第n项
假设已经得到结果 fn, fn( 10 ) 就是第 10 项
找递推关系
0, 1 => fn( 0 ) + 0 = fn( 1 )
1, 2 => fn( 1 ) + 1 = fn( 2 )
2, 3 => fn( 2 ) + 2 = fn( 3 )
...
n-1, n => fn( n-1 ) + n - 1 = fn( n )
递归体也就清楚了
临界条件是 n == 0 => 1
function fn( n ) {
if ( n == 0 ) return 1;
return fn( n-1 ) + n - 1;
}
前n项和
function sum( n ) {
if ( n == 0 ) return 1;
return sum( n - 1 ) + fn( n );
}
练习
Fibonacci 数列: 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, … 求其第 n 项.
递推关系:fn(n) == fn(n-1) + fn(n - 2)
function fib( n ) {
if ( n == 0 || n == 1 ) return 1;
return fib( n - 1 ) + fib( n - 2 );
}
练习
阶乘：一个数字的阶乘表示的是从 1 开始 累乘到这个数字. 例如 3! 表示 1 2 3. 5! 就是 1 2 3 4 5. 规定 0 没有阶乘, 阶乘从1开始。
求n的阶乘
function foo ( n ) {
if ( n == 1 ) return 1;
return foo( n - 1 ) * n;
}
练习
求幂
求幂就是求 某一个数 几次方
2*2 2 的 平方, 2 的 2 次方
求 n 的 m 次方
最终要得到一个函数 power( n, m )
n 的 m 次方就是 m 个 n 相乘 即 n 乘以 (m-1) 个 n 相乘
function power ( n, m ) {
if ( m == 1 ) return n;
return power( n, m - 1 ) * n;
}JS高级. 04 增删改查面向对象版歌曲管理、递归、的更多相关文章
- js操作indexedDB增删改查示例
js操作indexedDB增删改查示例 if ('indexedDB' in window) { // 如果数据库不存在则创建,如果存在但是version更大,会自动升级不会复制原来的版本 var r ...
- NX二次开发-NX访问SqlServer数据库(增删改查)C#版
版本:NX9+VS2012+SqlServer2008r2 以前我写过一个NX访问MySQL数据库(增删改查)的文章https://www.cnblogs.com/nxopen2018/p/12297 ...
- JS源生代码“增删改查”之增
51呢最近在做一个管理数据的,第一次接触到用JS的源代码去实现一些功能,才知道网页里的许多功能都是依赖于“增删改查”完成的,下面的几张图片就是对于增的演示: 下面是有关HTML的代码:这个主要是弹窗部 ...
- Node.js之mysql增删改查
1.安装库 npm install mysql 2.编写db.js(用作公共模块) //连接MySQL数据库 var mysql = require("mysql"); var p ...
- DOM操作 JS事件 节点增删改查
--------------------------习惯是社会的巨大的飞轮和最可贵的维护者.——威·詹姆斯 day 49 [value属性操作] <!DOCTYPE html><ht ...
- iOS 数据库的增删改查(OC版)
自己写了几个方法来实现数据的增删改查功能: 首先在TARGETS--->>Build phases里面添加数据库所关联的库文件libsqlite3.tbd 添加完以后,在控制器上添加 #i ...
- node.js封装数据库增删改查
数据库增删改查的封装 小编不容易 const sql = { insert: function (Collection, insertData) { return new Promise((resol ...
- js数组的增删改查
array 数组的增删改: push 从数组后面推入一个元素或多个元素 var arr = [1,2,3]; // 返回:修改后数组的长度 arr.push(4,5,6); pop 删除数组最后一 ...
- JS DOM节点增删改查 属性设置
一.节点操作 增 createElement(name)创建元素 appendChild();将元素添加 删 获得要删除的元素 获得它的父元素 使用removeChild()方法删除 改 第一种方 ...
随机推荐
- querySelector()与querySelectorAll()的区别及NodeList和HTMLCollection对象的区别
querySelector().Document.Element类型均可调用该方法. 当用Document类型调用querySelector()方法时,会在文档元素范围内查找匹配的元素:而当用Elem ...
- 【转】 ASP.NET使用ICallbackEventHandler无刷新验证用户名是否可用
功能说明:当用户在用户名输入框输入字符并焦点离开此输入框时,自动到数据库用户表中验证此用户名是否已被注册,如果已被注册,显示[不可用],反之,显示[可用],期间页面不刷新,读者也可以考虑将提示文字换成 ...
- awk使用实例一则
$META_DB -N -e "use web_boss_rainbow; select iDsId, sDbname, sHost, sPort, sNameServiceKey,sDri ...
- 二、 OSI模型的实现TCP 、IP
主要名词定义: IPIP层接收由更低层(网络接口层例如以太网设备驱动程序)发来的数据包,并把该数据包发送到更高层---TCP或UDP层:相反,IP层也把从TCP或UDP层接收来的数据包传送到更低层.I ...
- NEUACM1132: Renew MST Quickly 增量最小生成树
题目链接:http://acm.neu.edu.cn/hustoj/problem.php?id=1132 和UVa11354很类似 题意: 原先有一棵树,每次加一条边,看最小生成树大小: 这个和增量 ...
- netbackup 8.1安装前注意事项
一.NetBackup 主服务器的 Web 服务器用户/组设置步骤 文章 ID:100034818 上次发布时间:2017-08-24 产品:NetBackup 问题 从 NetBackup 8. ...
- 2018.11.17 Struts2框架入门
Struts2 框架学习 一.struts2是什么? (1)概念 (2)struts2使用优势 自动封装参数 参数校验 结果的处理(转发|重定向) 国际化 显示等待页面 表单的防止重复提交 (3)st ...
- Fiddler拦截并动态修改网页内容简易教程
Fiddler默认可以拦截全局http请求,再加上它具备的脚本功能,可以很简单的达到动态修改网页内容的目的. 1.启动Fiddler 2.打开Rules->Customize Rules..., ...
- 【转】iOS的APP资源，开源的哦
完整项目 文章转自 “标哥的技术博客” IOS-Swift2.0 高仿半糖App 这个开源项目为半糖,官网➡,类似于美丽说,一款电商App,使用语言:Swift2.0,开发工具: Xcode 7.1 ...
- Windows下同时安装Anaconda2与Anaconda3
1. 安装一个作为主版本,比如先安装Anaconda2,安装时选择[添加path环境变量].我的安装地址为:E:\ProgramData\Anaconda3 2. 安装另一个版本python,安装时注 ...