JavaScript
-
js是一门解释型语言、动态、弱类型
-
js运行时有两个步骤
-
预解析
-
js预解析
- 找var
- 找函数
如果找到var，那么会先给变量赋值undefined，并保存到仓库中
-
-
自上而下按顺序执行
-
-
-
作用：可以与用户做交互，给网页添加动态效果
-
js三种书写方式
- 行内事件驱动
- 内嵌
- 外部文件
-
js六大数据类型
- undefined 未定义
- null 空
- number 数字
- string 字符串
- Boolean 布尔值
- object 对象
-
js的特点：自上而下、面向过程、单线程
-
数组 var arr = [1,2,3,false,null]
- 可以存放任意数据类型
-
typeof 检测数据类型
-
算术运算符
++--*/% 取余
-
比较运算符
-
> -
< -
>= -
<= -
== -
===
-
-
赋值运算符
=+=
-
逻辑运算符
- && 全真为真
- || 有假为假
- !
做判断
-
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> </ul> <script> var oUl = document.getElementsByTagName('ul')[0] // 先创建元素 添加 删除 var oLi = document.createElement('li') oLi.innerHTML = '我是被创建出来的' var oFf = document.createElement('ff') oFf.innerHTML = '我是一个新标签' var oXy = document.createElement('xy') oXy.innerHTML = '我要放在最前面' oUl.appendChild(oLi) oUl.appendChild(oFf) oUl.insertBefore(oXy, oUl.children[0]) // appendChild 后面添加 // insertBefore 前面添加 第一个参数 1 添加谁 2 添加到那 // removeChild 删除元素节点 oUl.removeChild(oLi.previousElementSibling) // </script> </body> -
获取鼠标坐标
<script> document.onclick = function (ev) { console.log(ev.clientX + ' ' + ev.clientY); } </script> -
div随着指针移动
<!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> <style> div { width: 80px; height: 80px; background-color: red; position: absolute; } </style> <body> <div></div> <script> var oDiv = document.getElementsByTagName('div')[0] document.onmousemove = function (ev) { var disX = ev.clientX var disY = ev.clientY oDiv.style.left = disX + 'px' oDiv.style.top = disY + 'px' } </script> </body> </html> -
事件捕获
<script> var oDiv1 = document.getElementById('div1') // 事件委托 / 事件添加 / 事件监听 oDiv1.addEventListener('click', function (e) { console.log(this.id); }, true) div2.addEventListener('click', function (e) { console.log(this.id); }, true) div3.addEventListener('click', function (e) { console.log(this.id); }, true) // true = 捕获 false = 冒泡 // 子级元素在事件调用时 会将事件逐级向上 (由外而内) 传递 </script> -
滚轮事件
- onwheel
- wheelDelta = -120 向下滚动
- wheelDelta = 120 向上滚动
- onwheel
<body>
<div></div>
<script>
// wheelDelta = -120 向下滚动
// wheelDelta = 120 向上滚动
var oDiv = document.getElementsByTagName('div')[0]
document.onwheel = function (ev) {
// console.log(ev.wheelDelta);
if (ev.wheelDelta < 0) {
oDiv.style.height = oDiv.offsetHeight + 10 + 'px'
} else {
oDiv.style.height = oDiv.offsetHeight - 10 + 'px'
}
}
</script>
</body>
1785
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
