一、JS概况
1.js文件可以放在页面任何一个位置。
2.js包括:ecmascript, bom, dom
3.
<script>
alert("holle world")
</script>
弹出警告框
4.(1)页面插入js
(2)
<script src=""></script>
外部引入
5.在js中不区分换行,空格,缩进符。
6.语句:
一条语句后要加分号;
每一条语句都是一条指令;
7.js严格区分大小写。
8.js中字符都是英文半角。
9.常见输出语句:
(1)警告框
alert();数字可以直接使用,其他需加引号。
(2) 在文档中输出
document.write();
(3)在控制台输出
console.log();黑色日志
console.warn();黄色警告
console.error();输出红色错误
console.info();黑色信息
(4)弹出输入框
prompt(“请出入:”);
(5)确认框
confirm();
10.注释
单行注释 //
多行(文档)注释/* */
注释规则
1.行注释可以嵌套行注释
2.行注释中可以嵌套文档注释
3.文档注释中可以嵌套行注释
二、变量
1.变量的赋值 变量的初始化
多个变量中用逗号隔开
先定义 再赋值
var a;
a=100;
console.log(a);
2.定义变量的同时即初始化
var a=100;
console.log(a);
3.同时定义多个变量
var a,b,c;
a=100;
b='hello';
c='world';
console.log(a,b,c);
var a=100,b=200,c=3;
console.log(a,b,c);
4.变量允许重复赋值,以最后一次为准
5.定义变量,在内存中开辟空间
6.变量的内存是独立的空间,互不影响
7.变量的赋值,传递的是值
8.(1)变量未定义,直接输出 error
(2)变量未定义也可以赋值,(不推荐使用,污染变量的作用域)
(3)变量提升 预编译状态优先把var提前执行(不推荐)
num=10;
var num;
console.log(num);//10
//等价于
var num;
num=10;
三、数据类型
1.js的数据类型:
1)基本(原始)数据类型:
string 字符串类型 ’ ’ " " “123” “ture”
number 数值类型 所有数字
boolean 布尔类型 true(真)false(假)
null 空
undefined 未定义
2)引用类型:
内置5种:
Object Array Date Function RegExp
2.数据类型的检测:
typeof
运算结果自身是一个字符串类型
定义字符串类型
var a="hello";
console .log(typeof a);
var b=10;
console .log(typeof b);
var c=ture;
console .log(typeof c);
var d=null;//空
console .log(typeof d);//类型object
var add;//变量只声明未赋值
console .log(typeof add);
3.js是一种弱类型语言,js中的变量再顶义时候没有类型
变量的类型取决于变量中保存的内容
不能重复定义
四、表达式
random()随机生成10以内的数。
流程控制语句
1,程序结构
1.1 顺序结构
程序的默认结构
1.2 分支(选择)结构
if
语法:
if(条件){
代码块;
}
执行规则:
若条件成立(true),则执行代码块
if...else
语法:
if(条件){
代码块;
}
else(条件){
代码块2;
}
执行规则:
若条件成立(true),则执行代码块,否则执行代码块2;
if...else if...else...
语法:
if(条件1){
代码块1;
}
else if(条件2){
代码块2;
}
else(条件3){
代码块3;
}
执行规则:
若条件1成立(true),则执行代码块1,
若条件2成立(true),则执行代码块2,
否则执行代码块3
注意:分支语句只会执行一个分支
switch结构
语法:
switch(条件){
case 值:
代码块;
break;//结束
case 值:
代码块;
break;
case :
代码块;
break;
......
case值 :
代码块;
break;
case 值 :
代码块;
default;
break;
}
执行规则:
使用条件分别和case后面的制作比较,若相等则执行case对应的语句
若不成立,则执行default中的代码
只会执行一个分支
注意:该结构只能用于值得比较,不能用于范围比较
分支结构的嵌套:
1) if(条件1){
if(条件2){}
}
2) if(条件1){
if(条件2){}
}else{
if(条件3){}
}
在条件1的情况下,执行条件2;
1.3 循环结构
1)for循环
语法:
for(循环变量的初始化;循环判断;循环迭代){
循环体;
}
执行规则:
第一步:循环变量的初始化 var i=0
第二步:循环条件的判断 i<=5
若判断结果为真。则执行循环体
若判断条件为假,则结束循环
第三步:循环迭代 i++
第四步:返回第二步
第一个条件是可以省略的
var i=0;
break:结束本次循环
continue:结束本次循环,继续下个循环
循环嵌套:外层循环执行一次,内层循环执行完
2)while循环
语法:
while(条件){
循环体
}
执行规则:
若条件成立,则执行循环体
在不知道循环什么时候结束时,用while循环
知道时,用for
do…while循环
语法:
do{
循环体;
}while(条件);
执行规则:
先执行 循环体一次,若条件成立,则继续执行循环体
五、运算符
运算符:那个运算的符号
根据操作数不同,一元运算符、二元运算符、三元运算符
根据功能不同:
1)算术运算符
+ - * / %(取余符号) ++(自增) --(自减)
结论:
1、自增自减运算符前置后置运算结果无影响
var a=3;
var b=a++;//a=4 b=3 运算符后置 先赋值后运算
var b=++a;//a=4 b=4 运算符前置 先运算后赋值
var a=10;
var b=20;
var c=a+b;
console.log(c);
console.log(a%b);
var a2="我";
var b2="你";
console.log(a2/b2)//NaN not a number
2)逻辑运算符
&&: 并且 逻辑与
若两边操作数均为真,则结果为真;其余都为假
|| :或者 逻辑或
若两边操作数有一个为真,则结果即为真;若两边均为加,则为假;
! :非 取反
将真变成假,将假变成真
运算结果一般情况下是布尔类型(true,false)
真:true(除了数字0,其他数字均为真;
除了空字符串,其他字符串均为真)
假:false(在程序判断中 0 “” undefinde null也为真)
1,若逻辑运算符的操作数不是布尔类型,则运算结果也不一定是布尔类型
2,运输规则扩充:
1)&&
若第一个操作数为真,则整体运算结果即第二操作数
若第一个操作数为假,则结果为第一个操作数
var num=3;
a=1&&num++;
console.log(a)//3
console.log(num)//4
2)||
若第一个操作数为真,则结果为第一个操作数
若第一个操作数为假,则结果为第二个操作数
3)赋值运算符
= += -= *= /= %=
4)比较运算符(关系)
> < == >= <= === !=
运算结果一般情况下是布尔类型(true,false)
var a=3;
var b=5;
var a1="3"
var c=a==b;
c1=a>b;
c2=a==a2
console.log(c);//true
console.log(c1);//false
console.log(c2);true
"=="只比较数值
5)条件运算符
表达式1?表达式2: 表达式
运算规则:
若表达式1结果为true,则运算结果为表达式2
若表达式1结果为false,则运算结果为表达式3
运算符优先级
()> 一元运算符 > 算术运算符 > 关系运算符 >逻辑运算符 >赋值运算符
6)“+”运算符
若+运算符两边有一个操作数为字符串类型,则进行拼接操作;
拼接的结果为字符串类型;
六、面向对象
在ES5中this指作用域对象 指调用者
面向对象编程:OOP
对象 class Es5 没有class 怪异的,非正统
函数来模拟对象 ----->面向对象编程
基于Object来完成
Array Date Function RegExp --->object
父类:超类,基类
子类:派生类
对象:
属性:变量
方法:函数
proto 对象(隐式原型对象)
prototype 对象(现式原型对象)
所有对象都能调用的方法:
call(obj,parms0,parms1......parms)
apply(obj,[值])
两个方法功能一致,具有改变this指向能力
参数说明:
obj 对象 更改后this指向的对象
声明对象:
1、{} 代表空对象
new object(); 创建新对象
2、function 对象名(属性)工厂模式
优点:能够批量创建对象
缺点:会为每一个都添加方法,造成内存浪费
3、构造函数创建对象
党构造函数被new关键字调用时,系统会自动创建一个object对象,为该对象绑定属性和方法
并且调用结束时,将该对象返回
function 对象名(属性){
this.属性=属性;
this.方法名=function();
}
var s=new 对象名(首字母大写)(属性值)
函数对象有如下属性:
arguments
prototype 原型 对象
原型:每定义一个函数,prototype,对象
prototype 原型中的方法和属性都是公有的
4、混合模式:
将属性的声明在构造函数中完成
讲方法的声明放入原型中
function 对象名(属性){
this.属性=属性;
}
对象名.prototype.方法名=function(){
}
5、json:是一种数据格式
键对值:key:value;
键值对中必须用“”
var obj={
属性:值,
方法:function(){
}
继承
父类:
子类:
继承具有单向性,一个对象可被多个对象继承
属性的继承:在构造函数中完成特有属性的添加,将公有属性让父类完成追加
Person.apply(this,[继承的属性,继承的属性]);
Person.call(this,继承的属性,继承的属性);
方法的继承:遍历父类对象的原型,将所有方法放入子类对象的原型中
for(var i in Person.prototype){
// console.log(i);
Student.prototype[i]=Person.prototype[i];
}
原型链继承
Student.prototype=new Person();
七、日期对象
var date=new date // new 创建一个日期对象的实例
var year+date
function sh
var year=date.getFullYear();//年
var month=date.getMonth()+1;//月份
var day=date.getDate();//日
console.log(year,month,day);
//获取时分秒
var hour=date.getHours();
var minute=date.getMinutes();
var seconds=date.getSeconds();
console.log(hour,minute,seconds);
//星期
var w=date.getDay();
console.log(w);
var time=year+"年"+month+'月'+day+" "+hour+":"+minute+":"+seconds;
setTimeout
八、变量作用域
作用域:变量的作用范围
根据作用域不同:
1)全局变量
·作用范围是整个页面
在函数外声明的变量
声明变量时未使用var
2)局部变量
作用范围是函数内
在函数内声明的变量(包含参数内的)
总结
建议:优先使用局部变量
因为全局变量的生命周期更长(和夜面生命周期一致),占用内存时间较长
局部变量使用完毕可以等待回收,更合理
闭包:有权在函数内访问另一个的函数作用域中的变量,并将该函数返回
九、数组
引用类型的定义分两步:在栈中定义名。堆中存储数据
引用类型赋值的是地址
数组:Array 能够保存多个数据
语法:
1)new Array()
2)new Array(inme,inme,inme);声明同时并赋值;
3)new Array(lenth);声明同时指定长度;
4)var arr=[];
索引: 0 唯一的编号
长度:lenth 数组的长度等于元素中的个数
数组赋值:
数组名[索引]=值;
数组取值:
数组名[索引];
注意:在js中数组长度不限
数值类型也不限
数组遍历
for…in
fof(var i in arr){
console.log(i,arr[i]);
}
注意:遍历时产生的的索引是字符串类型
instanceof
检测是否为指定对象实例
console.log(arr instanceof Array)
数组方法
1)栈方法·:先进后出
push(a…c):压栈 在数组末尾添加元素
pop©:出栈 删除数组中最后一个元素
2)对列方法:先进先出
push()进队
shift() 出队 删除数组头部元素
3)数组操作方法
concat(arr)合并数组 不修改原数组
unshift(a)在数组头部添加元素
splice(指定位置,个数) 删除数组指定元素
splice(指定位置,个数,添加元素…)
slice(开始位置,结束位置)截取数组 不修改原数组
4)排序方法
sort() 排序 升序
注意:
默认情况按照字符串排序
其他排序:
需要将排序算法(函数)传入参数内
5)与字符串无关
join() 数组转换成字符串
reverse() 反序数组
复制:
concat();
slice(开始位置);
数组对象新增的字符串:
every(fn(iitem,index,arr))判断每个元素是否满足条件
some(fn(itme)) 判断是否有元素满足条件
filter(fn) 筛选满足条件的元素
forEach(fn(iitem,index,arr)):数组遍历
fn: item(元素) index(索引) arr(数组)
indexOf
map (fn) 筛选满足条件的元素 返回为布尔值
reduce(fn(total(初始值为第一个元素),iitem,index,arr))
reduceRight
基本类型:
string number boolean
包装对象:
String Number Boolean
toFixed(n) 保留小数点后n位。
字符串方法:
charAt(index) 根据索引查找字符
concat() 字符串拼接
indexOf(str) 判断指定字符串在母串中的(第一次出现)位置
找到,返回位置,找不到返回-1
lastIndexOf(str) 最后一次出现的位置 -1
replace(oldc,newc) 替换字符 只替换第一个
slice(start,end) 截取字符串 [start,end)
split(sp) 使用指定字符将字符串分割为数组
substr(start,length) 从指定位置开始,截取length长度
substring()
trim() 删除首尾空格
toLowerCase() 将字符串转换为小写
toUpperCase() 将字符串转换为大写
十、表单
表单:
form 表单
输入类型:type
action:服务器地址
method:方法:GET POST
在http协议中:数据库提交方式 get post
get方式:将提交数据串到请求地址后
post方式:将要提交的数据放入请求体中
onsubmit:表单提交事件
return 表达式:
false:不提交
true或’’:提交
表单校验:校验数据的合法性
十一、DOM
JavaScript:void(0);
DOM:(document object model )文档对象模型
通过JS操作HTML 增删改查
节点:node;
节点之间的关系:
父子节点;
兄弟节点
常见的三种节点
元素节点 nodeType 1
属性节点 nodeType 2
文本节点 nodeType 3
…
注意,在DOM3中,属性不再是节点
集合
NodeList length//长度
索引
从0开始
cs[1] cs//集合名 [1]//索引数
oNode
元素节点属性:
childNodes//获取所有的孩子节点(直接后代)
children//直接后代中的元素节点
firstChild//第一个孩子
lastChild//最后一个孩子
parentNode//直接父节点
nextSibling//下一个兄弟
previousSibling//上一个兄弟
document对象
属性:
body
title 标题
URL 地址、链接
forms 表单
links 超链接
imgs 图片
方法:
write()//想文档中写入内容
gerElementById()
若找到 方指定节点
若找不到 返回null
节点操作:
this 这个 再点击事件中,this指被点击的元素
1、查:属性 和getElementById 只能被document调用
getElementsByTagName 根据类名 可被节点调用
getElementsByCalssName 根据标签名 可被节点调用
getElementsByName 根据name名 可被节点调用
querySeletor(selector) 第一个
querySeletorAll(selector) 所有
参数:selector: css选择器
2、增: createElement(tagName) 创建元素节点对象
appendChild 以子节点的形式追加到到指定节点中
createTextNode 创建文本节点
insertBefore(新建的节点,指定的节点) 在指定的节点前插入
3、替换:replaceChild(新节点,旧节点) 新节点替换旧节点
4、删除:removeChild()
5、复制:cloneNode()
DOM中属性的操作
DOM属性操作:
1.属性的取值
1)对象.属性名
注意:针对特殊属性需要变形 例如:class–>className
2)getAttribute(属性名)
注意:属性名和HTML严格保持一致
3)对象[属性名]
注意:针对特殊属性需要变形 例如:class–>className
2.属性的赋值
1)对象.属性名=值;
注意:针对特殊属性需要变形 例如:class–>className
2)setAttribute(属性名,属性值)
注意:属性名和HTML严格保持一致
3) 对象[属性名]=值;
样式的修改:
对象.style. 样式名=值;
样式的取值:
1)对象.style. 样式名
只能获取行内样式
2)window. getComputedStyle(对象,null)
事件:
事件三要素:
1)事件对象 :事件绑定对象
2)事件名称 :事件的种类 on-事件名
3)事件处理函数 :事件触发之后要做什么
事件的写法:
1)HTML事件
将事件属性的形式写入页面标签中
优点:简单易懂
缺点:js代码与HTML耦合度太高,不易分工合作
2)脚本模型(现代事件绑定)
完全在JS中完成事件绑定
3)w3C事件:
添加事件:addEventListener(事件名,fn,flag)
flag: true 捕获 false 冒泡
移除事件:
removeEventListener(事件名,fn,flag)
注意:确保删除的函数是添加的函数
十二、WEB储存
web存储:
locationStorage:用于永久保存数据:
sessionStorage:用于临时存储数据(页面关闭时,数据丢失)
用法:(两个对象用法一致)
setItem(key,value)存储数据
getItem(key) 取数据
removeItem(key) 删除数据
clear() 清空数据
注意:key和value均为字符串类型
JSON对象
stringify(obj) 将obj转换为字符串
parse(str) 将字符串(对象格式)转换为对象