做判断
- for循环优化
<script>
var str = ''
for(var i=0;i<10000;i++){
str +="<button>按钮</button>"
}
document.body.innerHTML = str
</script>
+ 优化原理
- 循环次数太多
- 页面渲染次数多
+ for循环自执行
- 打开浏览器时，在事件触发之前，for循环停止
+ 事件触发执行
-
this
- 谁调用我，我就指向谁
-
函数
-
被设计出用来执行特定任务的代码块 function
- 匿名函数
- 具名函数
-
函数表达式
- 只要发生赋值就是表达式
fn = function(){ alert(666) } fn()- 函数自执行
(function(){ alert('自执行') })()-
return
- 作为函数的返回值
- 终止函数
- 如果return后面没有代码，返回undefined
-
函数的参数
- 实参
- 形参
-
函数传参
- 六大数据类型都行
-
argument 函数内置的类数组对象
-
实际参数的集合
- 下标
- length属性
-
function fn() { // [3,7] // console.log(arguments[1]) var a = arguments[0] var b = arguments[1] arguments[0] = 5 arguments[1] = 25 console.log(arguments.length) return a + b } -
-
选择器
- id
document.getElementsById('div')- class
document.getElementsByClassName('div')- 标签
document.getElementsByTagName('div') -
集合
- class和标签都是集合
- 一次想操作多个元素所以使用for循环
-
for循环
- 初始值
- 循环条件
- 执行方式
<script> for(var i = 0;i<9;i++){ console.log(i) } </script> -
跳出与终止
- continue 跳出循环
- break 终止程序
-
setInterval()
- 异步函数
- 先判断时间，然后根据时间，重复调用前面的函数
- 两个参数
- 函数
- 时间(毫秒)
javaScript–字符串操作
-
charAt()返回指定位置的字符
-
indexOf()字符串检索，如果没有指定字符，返回-1
-
charCodeAt()编码
-
String.formCharCode()解码
-
slice() 字符串截取
- 参数有俩个时，从第一个参数截取到第二个参数
- 参数有一个时，从第几个开始截取
-
大小写转换
<script>
var str = 'aACDhh'
// console.log(str.toLocaleLowerCase(str)) // 小写
console.log(str.toLocaleUpperCase(str)) // 大写
</script>
-
数组排序
- sort()
var arr = [0, 1, 'a', 2, 3, 4, 'z', 5, 'y', 6, 7, 8, 9, 'z'] arr.sort(function(a,b){ return a-b })
节点操作
- 子级节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>1111</li>
<li>222</li>
<li>333</li>
<li>4444</li>
</ul>
<script>
var oUl = document.getElementsByTagName('ul')[0]
// 对象.children = 子级节点集合
oUl.children[0].style.background = 'red'
oUl.children[2].style.background = 'green'
oUl.children[3].style.background = 'blue'
</script>
</body>
</html>
- 同级节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var oUl = document.getElementsByTagName('ul')[0]
oUl.firstElementChild.style.background = 'red'
// firstElementChild 第一个节点
oUl.lastElementChild.style.background = 'green'
// lastElementChild 最后一个节点
var oFirst = oUl.firstElementChild
// Sibling 兄弟
oFirst.nextElementSibling.style.background = 'blue'
var oLast = oUl.lastElementChild
oLast.previousElementSibling.style.background = 'yellow'
</script>
</body>
</html>
- 父级节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>
<span>我是一楼</span>
<button>删除</button>
</li>
<li>
<span>我是二楼</span>
<button>删除</button>
</li>
<li>
<span>我是三楼</span>
<button>删除</button>
</li>
<li>
<span>我是四楼</span>
<button>删除</button>
</li>
</ul>
<script>
var oUl = document.getElementsByTagName('ul')[0]
var aBtn = document.getElementsByTagName('button')
// parentNode 父级节点
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].onclick = function () {
this.parentNode.style.display = 'none'
// this.parentNode.remove()
}
}
</script>
</body>
</html>
- 创建、添加节点
<body>
<ul>
#### 总结
三套“算法宝典”
算法刷题LeetCode中文版（为例）
人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。
最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！
由于篇幅有限，下篇的面试技术攻克篇只能够展示出部分的面试题，详细完整版以及答案解析，有需要的可以关注
------------------------------------------------------------------
扫一扫
612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
