运算符
-
算术运算符 + - * / ++ –
-
赋值运算符 = += -= *= /= %=
-
比较运算符 > >= < <= == ===
-
逻辑运算符 && || ！
-
三元运算符：
条件 ？ true环境：false环境
流程控制
- 顺序结构: 代码从上往下依次执行
- 分支结构: 通过if 和 switch 来进行分支选择
- 循环结构: 通过for, while 等重复执行某段代码 (功能)
分支1: if（条件表达式） 代码块
分支2: if（条件表达式）{
代码块
}
分支3: if（条件表达式）{
true环境
}else{
false环境
}
分支4: if（条件表达式1）{
true环境1
}else if(条件表达式2){
true环境2
}else if(条件表达式3)
true环境3
}…
分支5: if(条件表达式1){
if(条件表达式2){
if(条件表达式3){
代码块
}
}
}
switch 分支：
switch(标志){
case 标志1:代码块
case标志2:代码块
…
case标志N:代码块
default:代码块}
-
循环结构
while循环：
while(条件表达式1){
代码块
}
do while循环
do{
代码块
}while（条件表达式）
函数
定义函数
-
方法1:函数声明 function 函数名(参数…){
代码块}
-
方法2:函数表达式 var 变量名 = function(参数…){代码块}
-
方法3:函数构造 var 变量名=new Function(‘参数1’,‘参数2’,…,‘代码块’)
函数引用
- 函数名() 带小括号 立马执行函数
- 函数名 不带小括号 不执行函数
- (函数)() 一旦执行该行时，立马执行该函数
函数参数
定义函数时给的参数—>形参
调用函数时给的参数—>实参
实参个数 > 形参个数 将多余的实参全部抛弃
实参个数 < 形参个数 多余形参当成undefined(如有默认值则用默认值)
作用域
全局变量：在函数外部通过var声明的变量/在函数内外不用var定义的变量
局部变量：在函数内部通过var声明的变量
作用域链的特性：对上封闭，对下透明
作用域是在函数声明时，局部变量都已经声明好的，只是暂时未定义(没赋值，相当于undefined)
获取标签对象
- 通过标签id获取标签对象：document.getElementById(id名)
- 通过标签对象来获取html属性：标签对象.html属性名
- 给标签设置/获取 style属性: 标签对象.style.属性名 = 属性值
- 设置/获取标签的正文内容：标签对象.innerHTML
动态改变标签属性：onclick = ‘js代码’===>点击某对象时触发js
定时器
-
setTimeout(代码，时间)
功能：在指定时间之后，执行一次代码功能，俗称‘倒计时定时器’
-
clearTimeout(定时器)
功能：清除定时器
-
setInterval(代码，时间)
功能：每隔一段时间，执行一次代码功能
-
clearIntercal(定时器)
功能：清除定时器
对象
创建对象
-
构造方式
var 变量名/对象名 = new Object();
-
JSON方式 推荐
var 变量名/对象名 = {
属性名1:属性值1，
属性名2:属性值2,
…
属性名N:属性值N,
方法名:function(){
代码块
},
…
}
-
自定义构造函数
function 函数名(){
this.属性名1 = 属性值1;
this.属性名2 = 属性值2;
…
this.属性名N = 属性值N;
this.方法名 = function(){
代码块
}
…
}
-
匿名构造函数
var 变量名/对象名 = new function(){
this.属性名1 = 属性值1;
this.属性名2 = 属性值2;
…
this.属性名N = 属性值N;
this.方法名 = function(){
代码块}
…
}
-
创建对象的对象
对象.constructor
-
js原型 就是Python的类属性 类方法
设置属性和方法 独享设置：对象名.属性名=属性值 对象名.方法名 = function(){代码块}
共享设置：对象名.prototype.属性名 = 属性值 对象名.prototype.方法名=function(){代码块}
删除对象 delete 删除方法后，方法不存在。再次使用会报错
实例化后的不能删除 自带的属性和方法可以使用
数组
创建数组
构造创建：var 数组名 = new Array(值1,值2,值3,…)
JSON创建：var数组名=[值1，值2，值3，…]
多维数组：数组中嵌套数组
var c = [
['大姨妈', '小姨妈'],
['大姨夫', '小姨夫'],
];
console.log(c);
数组操作
- 新增/修改数组
数组名[键] = 值 键不存在则新增，已存在则修改
键为number 会计入length，键为string 不会计入length
- 访问数组
数组名[键] 键不存在则返回undefined
-
遍历数组
var list = [ '熊初墨', '王根基', '倪霸霸', '于伟文', '黄阿玛' ]; // for 遍历 for(var i = 0; i < list.length; i++){ document.write(i + ' ====> ' + list[i] + '<br />'); } document.write('<hr>'); // 优化for for(var i = 0, j = list.length; i < j; i++){ document.write(i + ' ====> ' + list[i] + '<br />'); } document.write('<hr>'); // for in 遍历 for( var i in list ){ document.write(i + ' ====> ' + list[i] + '<br />'); } // json对象数据 var obj = {name:'小炮', age:18, sex:'女'} console.log(obj, typeof(obj)); for(var i in obj){ document.write(i + ' ====> ' + obj[i] + '<br />'); } -
遍历元素集合
<ul id="nav">
<li>小米</li>
<li>红米</li>
<li>笔记本</li>
<li>路由器</li>
</ul>
<script>
var nav = document.getElementById('nav');
var li = nav.getElementsByTagName('li'); // 获取 htmlCollection集合对象
console.log(nav);
console.log(li);
// 遍历 li
// 需求1: 字体设置为 red
// 需求2: 原有内容基础上加 序号
for(var i = 0; i < li.length; i++){
li[i].style.color = 'red';
// li[i].innerHTML = li[i].innerHTML + i;
li[i].innerHTML += i;
}
内置对象Array
不会改变原数组的方法
concat 合并数组
b = a.concat(100, true, 1.5);
join 数组转为字符串
b = a.join(); // 默认以 逗号 分割
b = a.join('----');
slice 截取数组
b = a.slice(2,8);
会改变原数组的方法
push 在末尾插入一个值
a.push('小蜻蜓');
pop（）删除末尾值
a.pop()
unshift() 在开头插入一个值
a.unshift('111')
shift() 删除开头值
a.shift()
reverse() 反转数组
a.reverse()
sort() 按照ASCII排序
a.sort()
事件绑定与解锁
事件绑定1
<开始标签 事件=“js代码”>
事件绑定2
元素对象.事件 = function(){ 代码块 }
元素对象.事件 = 函数名 没有小括号
事件监听
标准: 元素对象.addEventListener(事件, 函数, bool)
IE: 元素对象.addachEvent(事件, 函数)
bool:
true: 事件捕获 --> 先触发父级, 再触发子集
false: 事件冒泡, 默认 --> 先触发子集, 再触发父级
解除绑定
元素对象.事件 = null
元素对象.事件 = function(){} 空函数
解除监听
元素对象.removeEventListener(事件, 函数, bool)
元素对象.detachEvent(事件, 函数)
绑定一组元素与this的使用
- 获取一组标签
元素对象.getElementsByTagName(‘标签名’)
document : 整个页面
指定标签对象 : 指定标签
- this
代表当前对象
谁用this, this就代表谁
鼠标事件
常见鼠标事件
onclick 左击, 单击
ondblclick 双击
oncontextmenu 右击
onmouseover 划入 hover
onmouseout 划出
onmousedown 按下
onmouseup 松开
onmousemove 移动
event事件
获取event对象
在事件触发时的函数形参处 赋予event
xxx.onclick = function( event ){
}
注意点:
通常事件 配合函数使用
window.event 主要兼容IE
event 名字可以变换
常用event属性
event.x 鼠标的x坐标
event.y 鼠标的y坐标
event.button 获取鼠标按键 左键0 / 右键2 / 中键1
event.offsetX 鼠标相对于 触发事件的x坐标
event.offsetY 鼠标相对于 触发事件的y坐标
图层拖拽
box.onmousedown = function( event ){
this.innerHTML = '按下';
this.style.background = 'pink';
var event = event || window.event; // 兼容IE
var left = event.offsetX;
var top = event.offsetY;
document.onmousemove = function( en ){
var en = en || window.event;
var x = en.x - left;
var y = en.y - top;
box.style.left = x + 'px';
box.style.top = y + 'px';
}
}
box.onmouseup = function(){
this.innerHTML = '松开';
this.style.background = 'orange';
document.onmousemove = null;
键盘事件
onkeydown 按键按键触发
onkeyup 松开按键触发
onkeypress 按下并松开触发 (js高级事件)
并非所有按键都会触发
event属性
keyCode 当前按键的 Unicode编码
表单事件
onsubmit 表单提交时触发
onfocus 表单获取到光标时触发
onblur 表单失去光标时触发
onchange 改变表单的内容或状态时触发
oninput 输入内容时触发
onselect 内容框中时 触发
正则
作用：用于搜索，替换，验证等功能
语法：/ 正则表达式/ 模式修正符
可见原子: 键盘输出之后, 肉眼可见的字符 例如: 数字, 字母, 标点…
不可见原子: 键盘输出之后, 肉眼看不见的字符 例如: 空格, 回车, 制表符
[ ] 匹配 [ ]中任意一个原子
[x-y] 匹配 x-y 中的任意一个原子
[^ ] 匹配 除了[ ] 外任意一个原子
| 匹配 竖线的左边 或 右边的整体
( ) 将( )内的原子当成一个整体, 看做是一个大原子
(abc|xyz) 匹配竖线左边的abc 或 右边的xyz
. 小数点, 匹配任意字符 (除了换行符)
\d 匹配任意一个数字 [0-9]
\D [^0-9]
\s 匹配任意一个不可见原子 包含空格, 回车, 制表符..
\S 一个可见原子
\w 匹配任意一个 数字, 字母, 下划线
\uxxxx 查找十六进制规定的字符
xxxx : 4位十六进制数
\u 不变的, 固定的
例如:
汉字: \u4e00 ~ \u9fa5
{n} 连续匹配前面一个原子出现正好 n次
{n,} 连续匹配前面一个原子出现最少 n次
{n,m} 连续匹配前面一个原子出现最少 n次, 最多m次
* {0,} 最少0次
+ {1,} 最少1次
? {0,1} 最少0次, 最多1次
^ 匹配字符串的开头
$ 匹配字符串的结尾
-
匹配函数
match( 正则 )
返回值: 匹配到的内容 仅匹配一次,匹配不到, 则返回null
-
替换函数
replace( 正则, 替换值)
返回值: 替换之后的内容
仅替换一次,匹配不到, 则返回 原来的值 -
模式修正符
i 不区分大小写
g 全部匹配 正则默认严格区分大小写
另类用法
在匹配发生歧义时???
贪婪: .*
懒惰: .*? -
后向引用
( ) 功能1: 将 ( ) 内的内容当成一个大原子
功能2: 将 ( ) 内的内容存入 子模式组 \1: \1引用第一个( )的值, 两处的值保持同步
\2: \2引用第二个( )的值, 两处的值保持同步
…
\n: \n引用第n个( )的值, 两处的值保持同步 条件:
必须要有 ( ), \n 才能使用 -
取消子模式
(?: ) 该( ) 的值 不会送进子模式组 -
正向预查
(?= ) 预先检查后面的值 向右 -
负向预查
(?! ) 预先检查前面的值 向左
183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
