js语法：
js的引入方式
- 行内式 ： 直接把js代码嵌套到html开始标签里
- 内嵌式 ： 通过script 标签引入，可以放在页面的任何地方
- 外链式 ： 通过 script 标签的src 属性引入，js代码文件的扩展名为 .js
js代码放的位置不同，会影响也页面的展示效果
js语法：
- 区分大小写
- 使用字母，下划线_ ，美元符号$ 开头，后边可以是任何字母，数字，下划线 等的组合
- 不能使用关键字或者保留字作为变量名
- 变量名中间不能出现空格等其他字符
- 可以使用匈牙利标记，帕斯卡，驼峰命名法
js变量的声明
- 使用var关键声明变量
- 变量必须先声明，后赋值
- 一个var 关键字可以声明多个变量，变量的类型不受限制,多个变量之间使用逗号隔开
var a = 100;//声明变量并赋值
var a = 100,b = 200, c = 'hello';//声明多个变量
var a;//先声明，后赋值
a = 100;
判断数据类型 typeof 运算符
- 得到的结果为：number string boolean undefined object
5种原始数据类型
- number
- string
- boolean
- undefined
- null
undefined
- 变量声明了，但是没有赋值，则变量的默认值为 undefined
类型转换
toString(): 转换为字符串 两种转换模式
默认模式 num.toString()
- 基模式转换： 基：2 8 10 16 num.toString(2)
parseInt() 和 parseFloat()
首先去判断第一个字符是否是有效数字，如果是，则继续判断第二位,直到遇到非有效数字停止转变换，则把前边转换为的数字全部返回，如果不是，则直接返回NaN，对于parseFloat()可以识别第一个小数点
强制类型转换
- Number(): 整体进行转换；如果里边存在非有效数字，则直接返回NaN,可以识别第一个小数点;true —> 1 false—> 0
- Boolean() :
6种假值： false 0 ‘’ undefined null NaN - String() : 强制转换为字符串
运算符
- 算术运算符 ： + - * / %
- 关系运算符 ： > < >= <= == === != !==
== 和 ===:区别：两个等号值相等，则相等；三个等号值和类型都相等，则相等 - 逻辑运算符 ： &&(两边为真则为真) ||(一边为真则为真) !(真的变为假的，假的变为真的)
- 自增自减运算符： ++ –
- 前增量、前减量 ++num; --num; 先自身进行运算，然后在参与其他运算
- 后增量、后减量 num++; num–; 先参与其他运算，然后在自身进行运算
- 赋值运算符 ： =
- 复合运算符： += -= *= /= %=
- 条件运算符 ： 表达式?true，执行代码 : false,执行代码
条件语句
if语句
if(表达式){
//表达式为真(表达式的运算结果转换为true即可)，则执行代码
}
if-else语句
if(表达式){
//表达式为真(表达式的运算结果转换为true即可)，则执行代码
}else{
//表达式为假(表达式的运算结果转换为false即可)，则执行代码
}
if-else的嵌套结构
if(表达式1){
满足条件，则执行代码，后边的代码不在执行
}else if(表达式2){
表达式1不满足条件，则执行代码，后边的代码不在执行
}else if(表达式3){
表达式1和2 不满足条件，则执行代码，后边的代码不在执行
}else{
以上表达式均不满足条件，则执行代码
}
switch()语句
switch(表达式)表达式是一个具体的值
switch(表达式){
case value1:执行的代码;
break;
case value2:执行的代码;
break;
case value3:执行的代码;
break;
default:
以上条件都不成立， 执行的代码;
}
switch语句中break的作用：终止判断，满足条件，直接输出结果；如果没有break语句，则会从满足条件出开始执行下边所有的代码
循环语句
while循环语句
先判断，后执行，代码可能一次也不会被执行
while(条件){
执行的代码；
}
do-while()语句
先执行，后判断，代码至少执行一次
do{
执行的代码；
}while(条件)
for循环语句
for(var i = 0;i < 5 ; i++){
执行的代码
}
for-in语句
遍历数组：则 i 对应的是数组的下标；遍历对象，则 i 对应的是对象的属性；获取值是 obj[i]
for(var i in obj){
执行的代码
}
break 和 continue 语句
- break:终止循环
- continue : 跳出当前循环，继续下一次循环
函数
函数的声明方式
- 使用function 关键字声明
function show(){
}
- 使用字面量形式
var f = function(){
}
有参函数和无参函数
- 无参函数：
function show(){
}
- 使用字面量形式
var f = function(){
}
- 有参函数：
function show(a,b){
}
- 使用字面量形式
var f = function(a,b){
}
实参和形参
- 实参：调用执行函数是传入的值称之为实参
- 形参：函数定义时传入的变量称之为形参；形参就是函数体内的变量，在函数体内具有全局作用域
实参和形参的关系
- 实参多形参少：多余的实参会自动忽略
- 实参少形参多：多余的形参的值为undefined
作用域
全局作用域
- 函数外部声明的变量具有全局作用域
- 在最外层函数内声明的变量在这个函数体内具有全局作用域
- 在函数内不使用var关键字声明的变量具有全局作用域
- 所有的window对象的属性和方法具有全局作用域
局部作用域
- 函内体内部使用var关键字声明的变量具有局部作用域
函数内的变量提升
函数内部定义的变量，他的声明会被提升到函数体的最上边，他的赋值还留在原来的位置
function fun(){
//首先把a的声明，放到这个位置
//var a;
console.log(a);
var a = 100;//a 的赋值还在这个位置
}
函数的返回值 return
return 语句后边的代码将不再执行
function fun(){
return 100;
}
函数的调用：
直接使用函数名(); fun();
对象
以键值对的形式展现的
对象的声明方式
- 使用new 关键字声明
var parent = new Object();
parent.name = 'lili';//添加属性
parent.say = function(){//添加方法
console.log('hello')
}
- 使用字面量的形式
var parent = {
属性1:value1,
属性2:value2,
属性3:function(){
}
}
对象的取值
- 通过.运算符获取值 parent.name;
- 也可以通过 []获取值： parent[‘name’];[]里边可以放变量
- 调用方法： parent.say();
- 删除对象的属性和方法： delete obj.name;
字符串对象 string
属性
- 字符串的长度：str.length;
方法：
- chatAt(index) :获取索引位置的字符
- indexOf(字符) ： 检索字符第一次出现的位置，结果是索引值；如果不存在，则返回-1
- lastIndexOf(字符) : 检索字符最后一次出现的位置，结果是索引值；如果不存在，则返回-1
- replace(正则表达式，替换的字符串)：替换和正则表达式匹配的字符串；
- substring(start,end) :截取字符串；包前不包后；end参数可以省略;参数不能为负数
- slice(start,end):截取字符串；包前不包后；end参数可以省略;参数可以为负数
- substr(start,length):截取指定长度的字符串
- split(参数):将字符串分割为字符串数组 ；参数是分割的标志
数组对象 Array
数组是引用类型
属性：
- 获取数组的长度 ： arr.length;
方法：
- indexOf(参数):检索值在数组中第一次出现的位置，返回的是索引值；如果不存在，返回-1
- lastIndexOf(参数)：检索值在数组中最后一次出现的位置，返回的是索引值；如果不存在，返回-1
- push():往数组的最后添加元素，返回值是新数组的长度
- pop(): 删除数组的最后一个元素；返回值是删除的元素
- unshift(): 往数组的开始位置添加元素，返回值是新数组的长度
- shift():删除数组的第一个元素；返回值是删除的元素
- splice(x1,x2,x3): 删除替换数组中的元素；
如果一个参数：代表删除；x1索引值;如果两个参数：删除指定长度的数组元素：x1:索引值，x2代表的是长度；如果是三个参数：先删除后替换；x1:索引值，x2代表的是长度；x3替换的值，替换的值的位置是x1的位置 - toString():转换为字符串
- join(参数):连接数组，转换为字符串，参数是连接的符号
Date 日期对象
方法：
- 获取日期的方法： get…
- 设置日期的方法: set…
- 获取时间戳： getTime(); 获取1970.1.1 至今的毫秒数
Math对象
- Math.PI 获取圆周率
- Math.floor() :下舍入
- Math.ceil() : 上舍入
- Math.random() : 随机数 ：范围 [0,1)
- Math.round(): 四舍五入
任意区间的随机数封装函数
function raondom(a,b){
return Math.floor(Math.random() * (b - a + 1) + a);
}
计时器
- setTimeout()
- setInterval();
声明计时器
//第一种方式
var time = setInterval(function(){},1000)
//第二种方式
function fun(){
}
var time = setInterval(fun,1000)
清除计时器
- clearInterval(计时器的名字)
- clearTimeout(计时器的名字)
DOM 操作
查找Dom元素
- document.getElementById()
- document.getElementsByClassName()
- document.getElementsByTagName()
- document.getElementsByName()
- document.querySelector(选择器) // 匹配的是第一个
- document.querySelectorAll(选择器) // 匹配的是全部的
属性：
- innerHTML : 获取或者设置元素的内容
设置属性或者获取属性值
针对行内样式
- setAttribute():添加属性
- getAttribute():获取属性值
获取样式的通用方法
function getStyle(obj,st){
if(obj.currentStyle){
var res = obj.currentStyle[st]
}else{
var res = window.getComputedStyle(obj,null)[st]
}
return res;
}
添加样式的通用方法
function setStyle(obj,cssObj){
for(var attr in cssObj){
obj.style[attr] = cssObj[attr]
}
}
DOM节点操作
- appendChild();添加节点
- insertBefore(newNode，oldNode):插入指定节点之前
- replaceChild(newNode，oldNode):替换节点
- removeChild():删除节点
- createElement():创建元素节点
- createTextNode():创建文本节点
节点的属性
- nodeType :节点类型， 元素节点： 1
- nodeName ：节点名字，返回的是大写的元素标签名
- nodeValue ： 节点的值； 返回节点值；元素节点不存在nodeValue
查找节点
- firstChild :第一个子节点
- lastChild:最后一个子节点
- childNodes: 所有子节点的集合
- children ： 所有元素节点的集合
- nextSibling ：下一个兄弟节点
- previousSibling ：上一个兄弟节点
- parentNode ： 父节点
- cloneNode(true/false) :克隆节点 ；true:克隆自身和所有子元素；false:只克隆自身
清除节点的函数封装
function clearNodes(obj){
for(var i = 0; i < obj.childNodes.length;i++){
if( obj.childNodes[i].nodeType !== 1){
obj.removceChild(obj.childNodes[i])
}
}
}
判断是否存在子节点
- hasChildNodes():存在子节点，返回值是一个boolean值；存在则返回true；不存在否则false
事件绑定
事件绑定方式
- Dom对象的属性绑定一个事件： box.onclick = function(){}
- html开始标签里边绑定事件
<h1 onclick = 'console.log(123)'></h1>
- 事件监听的方法绑定事件：addEventListener(type,handler,true/false) ; IE: attachEvent(‘on’+type,handler);
事件冒泡：
- 目标元素上绑定的事件被触发，如果父元素上也有同名的事件，则也会被触发，一直向上触发直到根元素；
从最具体的元素到最不确定的元素；
阻止冒泡
function stopPropagation(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
事件捕获：
- 目标元素上的事件被触发，如果父元素上也有同名的事件，则也会被触发，从根元素开始，层层向下捕获事件，直到目标元素上的事件
从最不确定的元素到最确定的元素
IE低版本只有事件冒泡，不存在事件捕获
阻止浏览器的默认行为
function stopDefault(e){
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
}
事件对象 event
var e = e || window.event;//处理事件对象的兼容性
移除事件监听
- 移除的事件处理程序和绑定的事件处理程序不能使用匿名函数；必须使用外部函数*
- removeEventListener(type,handler);
- detachEvent(‘on’+type,handler);
事件监听 this指向问题
function show(){
}
box.atachEvent('onclick',function(){
show.call(box)
})
show.call(box) : 1、修改this指向；2、调用并执行函数
事件委托
子元素的事件，委托为父元素来执行
触发事件的元素，称之为事件源对象
// 引入事件对象event
var e = e || window.event;
//引入事件源对象
var target = e.target || e.srcElement;
DOM常用事件
- onclick
- 鼠标事件：onmouseenter ; onmouseover ; ommouseout ; ommouseleave; onmousedown ; onmouseup ; onmousemove
- window对象的事件： onload ; onresize ; onscroll
- 键盘事件 ： onkeydown onkeyup onkeypress
- 表单事件： onfocus onblur onchange onselect onreset onsubmit
DOM对象的宽高位置属性
- clientWidth 和 clientHeight :包括padding
- offsetWidth 和 offsetHeight ：包括border
- offsetLeft 和 offsetTop : 获取相对于父元素的偏移量；需要有定位属性，如果不存在这样的父元素，则相对于body
- scrollTop(用的多) 和 srcollLeft
- getBoundingClientRect(); 得到的结果是留个值；width height top left right bottom ;获取某一个方向的值 obj.getBoundingClientRect().left
获取浏览器窗口的滚动值：
var sctop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
设置浏览器窗口的滚动值
document.documentElement.scrollTop = 300;
document.body.scrollTop = 300;
window.pageYOffset = 300;
获取浏览器窗口的宽高
var wh = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var ht = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
event对象坐标属性
- e.clientX 和 e.clientY: 获取相对于浏览器窗口左上角的坐标值
- e.offsetX 和 e.offsetY : 获取相对于事件源对象的左上角的坐标值
- e.pageX 和 e.pageY : 获取相对于页面（整个html文档）左上角的坐标值；
案例
- tab切换
- 楼层导航（电梯导航）
- 无缝轮播图（无缝滚动轮播的和渐隐渐现的轮播）
- 放大镜特效
- 遮罩层特效
- 购物车案例：判断的依据
json对象
json是轻量级的文本交换格式，作用是用于存储和传输数据
- 取值方式： 按照数组和对象的取值方式进行取值
- 案例：三级联动（地址的选择）
json字符串转换为json对象
JSON.parse(参数)
json对象转换为json字符串
JSON.stringify(参数)
try-catch语句 ：捕获异常
//基本结构
try{
执行的代码
}catch(err){
//捕获错误
}
try{
执行的代码
}catch(err){
//捕获错误
}finally{
//不管是否出错，始终执行此处代码
}
- 自定义异常 throw
try{
if(条件){
throw '自定义异常'
}
}catch(err){
//捕获错误
}finally{
//不管是否出错，始终执行此处代码
}
构造函数
function Parent(a,b){
this.name = a;
this.age = b;
this.say = function(){
console.log('hello')
}
}
//构造函数内的this指向实例化对象
var p1 = new Parent('lili',18);
new 的四个过程
- 创建一个新的空的对象
- 修改this指向，指向实例化对象
- 给实例化对象对象添加属性和方法 （调用执行构造函数）
- 返回对象
普通对象和 函数对象
- 普通对象： 具有__proto__属性 ； __proto__属性指向他的原型对象
- 函数对象： 具有 prototype属性
构造函数的属性 constructor
指向对象的父函数的构造函数
判断一个对象是否是另一个对象的实例化，使用instanceof运算符
原型对象 prototype
作用：主要用来继承，公用的属性和方法存在原型对象上，私有的属性和方法放在构造函数内
原型链
一个对象的属性或者方法，自身如果没有，则去他的原型对象上查找，如果也没有呢，原型对象上有一个__proto__属性，则沿着__proto__属性继续向上去查找，直到找到位置，如果都没有，则为null
闭包
- 定义在函数内部的函数
- 在函数内部可以引用父函数的变量和参数
- 不会被垃圾回收机制回收
- 优点 ： 隔离作用域； 变量常驻内存，不会被销毁；
- 缺点 ： 使用不当，会造成内存泄露
//实现计数器
function count(){
var num = 0;
return function(){
alert(++num)
}
}
var f = count();
f();
f();
//通过闭包获取元素对应的索引值
for(var i = 0; i< li.length; i++){
(function(n){
li[n].onclick = function(){
console.log(n)
}
})(i)
}
自执行函数
- !(function(){})()
- (function(){}())
- ;(function(){})()
面向对象封装 继承 和 多态
- 封装
- 函数封装
- 闭包封装
面向对象封装方式：
工厂模式
构造函数模式
原型对象模式
构造函数和原型对象混合模式
-
in运算符
判断一个对象是否存在某个属性和方法，得到的结果是一个boolean值 -
hasOwnProperty()
判断一个方法或者是属性是自身的还是从原型链上继承的
- 继承
- 使用call()和apply()方法 :
//父构造函数
function Animal(){
this.species = "动物";
}
//cat继承Animal
function Cat(name,color){
//将父对象的构造函数绑定在子对象上
Animal.call(this);
this.name = name;
this.color = color;
}
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 动物
- 使用prototype属性 ：先继承后修改prototype的指向
//继承
Cat.prototype = new Animal();
//修改prototype指向
Cat.prototype.constructor = Cat;
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 动物
- 通过拷贝继承
function extend2(Child, Parent) {
var p = Parent.prototype;
var c = Child.prototype;
for (var i in p) {
c[i] = p[i];
}
}
538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
