Js基础部分详记

复习
第一天：js初识
1.js的历史
网景公司 布兰登艾奇 js who
借鉴了java的数据管理机制和c的函数 how
js的创建时用来解决浏览器和用户之间互动的问题 do
mocha --liveScript --javaScript 历程
2.什么叫js
js是一门基于对象的、事件驱动的，解释性脚本语言
基于对象：对象是js中的一种数据，包含了一些方法，这些方法可以解决js中的一些最基本的操作。(对象只能解决基础问题)
由事件驱动：主要是用来解决浏览器和用户之间的交互问题的。用户对浏览器页面进行操作，而浏览器页面给用户对应的反馈，这些事情都是由事件来驱动完成的
解释性：
编译性：编译性语言在执行代码的时候，会先将整段代码进行编译，编译完之后生成一个exe文件，打开程序就可以一劳永逸了。
解释性：解释性语言在执行代码的时候，会逐行解释代码，解释一行执行一行
在开发浏览器页面的时候，解释性语言由于不容易出现白屏，因此在开发网页的时候，更偏向于解释性语言，解释性语言也是夸平台的，兼容性更好。
3.js的组成
ECMAScript js的语法标准 核心 15天
DOM：document object model html文档 对象 模型 DOM提供了一些操作html文档的方法
BOM：browser object model 浏览器 对象 模型 BOM提供了一些操作浏览器的方法
4.js的三种引用方式
行内样式：

不建议使用
注意：引号的嵌套 如果遇到引号的嵌套 需要外层引号的内层引号不能相同
不推荐使用行内引入的js代码，不利于结构和js代码的逻辑分离
内部引入：将代码写在script标签中
在html代码中写入script标签，在script标签中写入js代码
在html文档中可以写入多个script标签，也可以将script标签写在任意位置，但是我们一般写在body标签的末尾和head标签的末尾
我们推荐将script标签写在body标签的末尾
html代码的执行顺序是从上到下的，如果遇到script标签就会先进入script标签，执行js代码，执行完之后再继续向下执行，因此如果在body前面获取元素，就获取不到，建议写在body末尾的原因
外部引入：使用script的scr属性引入外部js文件
写入script标签
将script标签的src属性设置为外部js文件的路径
注意：外部引入js文件的script标签中不能写任何script标签，如果写了，也不会执行
5.window.onload
window.onload = function (){js代码}
作用：写在大括号中的js代码会等到 页面上的所有标签和外部资源（图片，音频，视频，外部文件）都加载完 再执行
6.js的变量
定义：可以改变的量，存储数据的容器
变量的创建方式：
1)变量的声明和赋值
声明：var 变量名;//拿来了一个空容器
赋值：变量名= 变量值;//将数据作为内容存入容器中
2)变量的声明和赋值合写
var 变量名= 变量值;
3)变量的连续声明
var 变量名1= 变量值1,变量名2= 变量值2,变量名3= 变量值3…
4)变量的连等
var a = b = c =10; //a b c 都是10
变量命名规则
1)变量必须以字母、 $、下划线{（}_{）}开头,后面可以跟任何东西2)遵循驼峰命名法--当你的变量名由两个或两个以上单词组成时，从第二个单词开始，首字母要大写3)具有语义化4)不能使用关键字或保留字（现在不是关键字，将来会是关键字）5)变量命名只能使用字母，数字{，}_{,}$，四种字符，除此之外，都不能使用
7.简单的鼠标事件
元素.事件名 = function (){当事件发生的时候}
事件不要重复添加，如果重复添加，后面的会覆盖前面的
ondblclick:双击事件 double
onmouseover:鼠标移入事件//悬停
onmouseout:鼠标离开事件
onmouseenter:鼠标移入事件//进入
onmouseleave:鼠标离开事件
onmousemove:鼠标在元素中移动
onmousedown:鼠标按下
onmouseup:鼠标抬起
oncontextmenu:鼠标右键菜单事件
8.js操作元素内容
操作表单元素内容
1)获取表单元素内容:表单元素.value
2)设置表单元素内容:表单元素.value = ‘内容’;
操作双标签元素内容
1)innerHTML:可以识别和设置html标签
获取：元素.innerHTML
设置：元素.innerHTML = ‘内容’；
2)innerText:不能识别和设置html标签
获取：元素.innerText
设置：元素.innerText = ‘内容’；
9.js操作元素属性:
html属性：
1)获取：元素.属性名
2)设置：元素.属性名 = ‘属性值’
3)在操作类名的时候需要注意，不能直接写class（因为class是一个关键字），而应该写元素.className 元素.className = ‘’;
4)这种形式操作html属性 只能操作标签自带的属性 如果元素不自带的属性 就不能操作
css属性：
1)获取：元素.style.样式属性名
oDiv.style.width 获取oDiv元素的宽度样式属性
2)设置：元素.style.样式属性名 = ‘属性值’
oDiv.style.width = ‘300px 设置oDiv元素的宽度样式属性为300px
3)注意如果样式属性名中包含中划线（-），使用驼峰标识
4)这种方式操作样式属性，只能操作行内样式
cssText属性:
批量设置元素属性：
元素.style.cssText =‘width:100px;height:100px;background-color:red;’ ;
这种方式设置，就是在设置元素的style属性，正因如此，我们在写属性名称的时候，需要写成css的属性名称(background-color)
元素.style.cssText =‘width:100px;height:100px;background-color:red;’ ;
Day02
1.数据类型
基本数据类型（值）
1)数字 number
整型 整数
浮点型 小数
2)字符串 string 引号包裹任意内容 ‘’ ‘123’ ‘hiohvw’ ‘iqhi123’ ’ ’
3)布尔 boolean true(真)|false(假)
4)undefined 未定义 变量声明未赋值，一般用来做判断
5)null 值为空 空指针/空地址 我是一个指针，我对堆区里面找东西，找不到
null和undefined区别：
基本类型数据存储在栈区，栈区有顺序，可以查找里面的数据
引用数据类型存储在堆区，堆区没顺序，不能查找里面的数据
undefined是变量声明未赋值
null是空指针，null是一个指针，但是使用这个指针查找堆区并没有任何数据能够对应。
复杂数据类型（引用）
1)数组 是特殊的对象 因此typeof之后得到的是object
[数组项1，数组项2，数组项3，数组项4]
数组项可以使任意数据
每一个数组项都有一个序号，这个序号从0开始排序，我们管这个序号交下标(索引)
通过下标获取数组项 数组名[下标]—>对应下标的数组项
2)对象
{属性名：属性值，属性名：属性值，…}
对象中属性值可以使任意类型数据，属性名只能是字符串
属性名的命名规则和变量的命名规则一样
对象可以通过属性名获取对应的属性值
对象名.属性名—>属性名对应的属性值
3)函数
函数的声明：
1)关键字声明：function 函数名(){} function是关键字，使用这个关键字就可以声明一个函数
2)表达式声明：var fun = function(){}
函数调用：
函数声明的大括号中存储着代码，这些代码会在调用的时候执行
函数调用：函数名();
2.js的数据类型转换
1)其他类型转数字
Number
可以将任意类型转换为数字类型
用法：Number(要转换的数据);
如果数据转换为数字之后，不是一个正常的数字—>转换之后，值就是NaN(not a number)
parseInt
可以将任意类型转换为数字类型(数字类型的整型)
用法：parseInt(要转换的数据)
转换方式：如果数据转换为数字之后，不是正常数字，值也是NaN
注意：这个方法会将数据从头开始转换，遇到不能转换的内容或转换到结尾，就结束转换 parseInt(‘123abc’)---->123
parseFloat
可以将任意类型转换为数字类型(数字类型的浮点型)
用法：parseFloat(要转换的数据)
转换方式：如果数据转换为数字之后，不是正常数字，值也是NaN
注意：这个方法会将数据从头开始转换，遇到不能转换的内容或转换到结尾，就结束转换 parseFloat(‘123abc’)---->123
隐式转换
数据-0
数据/1
数据*1
2)其他类型转字符串
String()
用法：String(要转换的数据)
万能的，任何数据都能通过这个转换
任何对象转换成字符串之后 结果都是[object object]
toString()
用法：要转换的数据.toString
不是万能的，undefined和null不能用
隐式转换
要转换的值+空字符串
空字符串就是引号中不包裹任何内容’/’
3.js的运算符
1)算术运算符：+ - * / %(取余) ++ –
%(取余):数字1%数字2—>数字1除以数字2余下的余数
++ --：
a++ 先参与运算，后自加
++a 先自加，后参与运算
2)比较运算符
> >= < <=
==相等 !=不相等 这两种运算符只比较数据的值，不比较数据的类型
‘123’==123 true
===全等 !==这两种运算符既比较运算符的值，也比较运算符的类型
‘123’ === 123 false
3)逻辑运算符
&& 全真才真 有假即假 true&&true
|| 全假才假 有真即真 false||false
! 真变假，假变真 !true
4)赋值运算符
=
+= a+=10 ==> a=a+10;
-= *= /=
5)三元运算符
判断条件?判断条件成立时执行的语句:判断条不成立时执行的语句;

Day02
1.流程控制语句
1)顺序结构：从上往下的代码执行顺序
2)选择结构：
if判断
if(判断条件){条件成立时执行的代码}
if(判断条件){条件成立时执行的代码}else{}
if(判断条件){条件成立时执行的代码}else if(条件){当if条件不成立，else if条件成立时的代码}else{如果if 和 else if条件都不成立时执行的代码}
switch：进行匹配
语法：
switch(要匹配的值){
case 匹配项1：匹配成功时执行的代码;break;
case 匹配项2：匹配成功时执行的代码;break;
case 匹配项3：匹配成功时执行的代码;break;
case 匹配项4：匹配成功时执行的代码;break;
default :如果所有匹配项都匹配失败时执行的代码;
}
在switch的最后一个匹配项末尾可以不加break
switch实际上使用要匹配的项和每一个匹配项进行匹配
如果匹配成功之后，就执行之后的代码，执行之后，break;
3)循环结构：
for
语法:for(声明循环变量;循环的条件;循环变量的自加规则){循环体代码}
执行过程：
1）声明循环变量
2）判断循环变量是否满足循环条件，如果不满足就结束循环
3）如果满足就执行循环代码
4）循环变量递增
5）重复2）
6）重复第三步
7）重复第四步
循环的嵌套
一个for循环嵌套另一个for循环
for循环循环数组
由于i表示数组项下标，隐藏arr[i]表示下标对应的数组项
for(var i = 0 ;i for in
for(var key in obj){}
对象名.属性名的形式获取属性值，属性名是一个字符串
如果想通过变量来获取对应的属性名，需要使用[]来获取
对象[属性名变量] obj[key]
while
初始化循环变量；while(结束循环的条件){循环体;更新循环变量}
var i =0;while(i<10){consolo.log(i) i++;}
do while
初始化循环变量；do{循环体;更新循环变量}while(结束循环的条件)
var i =0;do{consolo.log(i) i++;}while(i<10)
while 和 do while的唯一区别：do while会不管条件是否满足，都执行一次
4)其他：break,continue
break 彻底结束当前语句，是直接跳出整个循环，后面的条件即使满足也不会执行,break写在哪一个循环中就打断哪个循环，跟其他循环没关系
continue 是结束当前循环，如果后面的条件满足，会继续执行
2.断点调试
打开控制台的sources(源代码)
在源代码中选中需要进行监测的代码行
进而在这一行中选中要检测的变量 add selected text to wantches
之后刷新代码，按照步骤一步一步执行代码，点击控制台
不想要了，直接删除断点和变量
Day03
1.this
1)函数的this指向看调用，不看声明;
2)不同的函数调用this指向：
普通函数调用：
函数名(); this指向window;
事件处理函数调用：(事件处理函数是由浏览器在事件触发的时候自动调用的)
oDiv.onclick = function(){} this—>添加事件的元素
全局中this值为window
对象的方法函数
{fn:function(){}} obj.fn()
当属性值不是函数的时候，我们就说这些属性是对象的属性
当属性值是函数的时候，我们就说这些属性是对象的方法
对象.方法名(); this—>调用方法的对象
3)总结
方法函数:对象.方法(); this—>调用方法的对象
普通函数:window.函数名; this—>window
事件处理函数:元素.事件 = function(){}; this—>添加事件的元素
全局中的this就是window
2.自定义属性
设置自定义属性 元素.自定义属性名 = 自定义属性值
获取自定义属性 元素.自定义属性名
3.函数的初识(函数就是js中的工具)
1)函数的声明:制造工具
普通函数声明及调用
function 函数名(){函数体代码}
表达式函数声明及调用
var 变量名 = function (){函数体代码}
2)函数的调用:使用工具
普通函数的调用:函数名();
表达式函数调用:变量名();
3)函数的使用范围:
封装：声明一个函数，去实现某种功能 制作工具
作为事件处理函数:元素.事件 = function(){事件触发时执行的函数}
对象中的方法:obj = {‘eat’:function()}
代码复用 使用工具
4)函数中的参数
1)不需要参数的:var fn = function(){}
2)需要参数的：var fn = function(形式参数){}
形式参数:
在函数声明的小括号中写入的参数就是形参
形参遵循变量命名规则
相当于在函数中声明了一个变量，默认值为undefined
实际参数：
在函数调用的小括号中写入的参数就是实参
实参可以是任意类型的数据
函数调用的小括号里传入的也是参数(实际参数)，实际参数是给形式参数赋值的
形参和实参的个数可以是任意多个：
如果是多个参数的情况，就按照顺序，依次将实参赋值给每个形参;
如果形参个数多余实参，依次将实参赋值给每个形参，多余的形参值为undefined;
如果形参个数少余实参，依次将实参赋值给每个形参，多余的实参就舍弃不要;
5)arguments:函数内置对象
arguments是函数的实参集合,这个实参集合是一个伪数组，当前函数中传入的所有实参都是这个伪数组中的数组项
在函数中直接使用arguments即可
arguments[i]就是实参
一般用在形参个数不确定的时候
Day08函数高级
1.函数的作用域
1）定义：某一变量和函数具有访问权限（起作用）的代码空间，
2）在js中只有两种作用域：
全局作用域：script标签内部的区域就是全局作用域
全局作用域里声明的变量就是全局变量
局部作用域:函数大括号内部的区域就是局部作用域
注意：在js中只有函数可以划分作用域，因此每一个函数的大括号内部都是一个局部作用域，因此我们也称局部作用域为函数作用域
3）js中有两种变量
全局变量：声明在全局的变量
全局作用域就是全局变量能起作用的作用域
局部变量：声明在局部的变量
局部作用域就是局部变量能起作用的作用域
4）不同作用域中变量和函数的访问权限
局部作用域中声明的变量和函数只能在局部作用域中访问
大伯父亲和大姑各自家庭中的私有物品只能自加使用
全局作用域中声明的变量和函数可以在全局中的任意位置访问
爷爷奶奶家的东西由于是大家庭的财产，所以大家都可以支配
两个同级的局部作用域之间不能互相访问对方内部的变量
父亲，大伯和大姑之间不能互相用对方的财产
全局作用域不能访问局部作用域的变量
爷爷奶奶家不能使用大伯，大姑，父亲小家庭的财产
5）由以上几条推理出：
子级作用域可以访问父级作用域的变量和函数
父级作用域不能访问子级作用域的变量和函数
同级作用域之间不能相关访问变量和函数
6）作用域链
定义：作用域链是js内部
在一个作用域中，访问函数或变量的时候：
1）会先在当前作用域中查找这个变量或函数，如果找到，就直接使用。
2）如果没找到，就向上一级作用域查找，如果有，就直接使用。
3）如果没有，就继续向上查找，一直找到全局作用域，如果有，就直接使用，如果没有，就报错。
2.函数和变量声明的预解析
1）在js代码开始执行解析 之前，浏览器会先对js代码进行一次预解析
2）预解析的作用：
将所有变量和函数的声明提升到最顶端，之后再开始执行按顺序代码
1）变量声明：var 变量名
2）函数声明：function 函数名(){}
3）函数声明：var 变量名 = function 函数名(){}
3.函数的返回值
1）函数执行完以后，一定有返回值，如果开发没写return语句，函数会默认返回undefined
2）函数通过return关键字返回函数内部的值
写法：function sum(a,b){return 返回值}
3）return语句会打断函数的执行，函数中return后面的代码不会执行
4)函数返回值<===>函数调用表达式的值（函数名()）

Day09
1.函数的返回值类型
函数的返回值可以是任意类型的数据；
一个函数中只能有一个返回值，如果要返回多个值，是一个错误操作，
如果想要一个函数中返回多个值，就要通过数组，对象的形式返回
2.封装函数
1)声明函数
2)将主要代码放入函数中的参数
3)找出函数中不能确定的值作为参数
4)将参数代入函数中
5)调用调试函数
3.获取非行间元素样式:
1)标准浏览器：
getComputedStyle(要获取样式属性的元素).属性名
2)ie8及以下浏览器:
要获取样式的元素.currentStyle.属性名
3)以上两种方法互相不兼容
4)获取非行内样式的方法兼容
4.js定时器
1)setTimeOut:延迟执行
语法：setTimeout(函数，延迟时间(单位ms))
2)setInterval:间歇执行(每隔延迟时间，执行函数)
语法：setInterval(函数，时间间隔(单位ms))
作用：每隔一段时间执行一次函数
3)清除定时器
1）定时器id
定时器就是一个函数，这个函数的返回值就是定时器的id
这个返回值是一个数字，按照代码从上到下的顺序，将每个定时器依次排列，定时器的id就是定时器的序号（从1开始依次增大）
2）清除延迟定时器：
clearTimeout(延迟定时器Id)
作用：清除掉id值为指定id的延迟定时器
3）清除间歇定时器
clearInerval(间歇定时器Id)
作用：清除掉id值为指定id的间歇定时器
4）清除定时器的方法只能清除掉定时器，不能阻断函数的执行
Day10
1.Math对象
Math对象方法.
1)Math.floor() :向下取整,去掉小数部分
2)Math.ceil() :向上取整,去掉小数部分
3)Math.round() :四舍五入
4)Math.max() :获取数组序列中最大的值
5)Math.min() : 获取数组序列中最小的值
6)Math.pow() :计算某个数组的次方数
7)Math.sqrt() :开根号
8)Math.random() :生成-个0-1之间的随机数 [0,1) 可以取到0,取不到1
随机数扩大范围 Math.random()*范围

Day11 时间对象和字符串对象
js是一门基于对象的语言，在js中共有17种内置对象String Array Date 正则对象 都是比较常用的对象
1.时间对象
1)创建时间对象：new Date() 获取当前系统时间
2)获取系统时间8
get/setFullYear():返回或设置年份,用四位数表示。
get/setMonth():返回或设置月份。 0为1月,比实际少1个月
get/setDate():返回或设置日期。
getDay():返回或设置星期0为星期天
setDay()设置周几被废弃，在js中不能使用
get/setHours():返回或设置小时, 24小时制
get/setMinutes():返回或设置分钟数。
get/setSeconds():返回或设置秒钟数。
get/setTime():返回或设置时间(毫秒为单位)
从1970年1月1日0时0分0秒到当前的时间进行计算的时间差
3)获取系统时间-特定格式5
toDateString(): Tue Nov 27 2019
tolocaleDateString(): 2018/11/27
toTimeString(): 14:34:25 GMT + 0800 (中国标准时间)
toLocaleTimeString():下午2:35:06
toLocaleString():2018/11/27下午2:35:05
如果上面的格式不能满足要求,就需要获取单个的时间进行拼接。
以上所有方法获取到的都是字符串，因此对上述结果做操作的时候，需要注意数据类型
4)倒计时
原理：时间差 = 未来时间- 当前时间
设置未来时间：
var oDate = new Date(2020,11,12,0,0,0);
var oDate = new Date(‘2020,12,12,00:00:00’);
var oDate = new Date(“Wed Dec 12 2020 00:00:00”);//不常
时间差是两个时间的毫秒数,需要转换成对应的年月日
5)Moment.js时间库
var d = moment(); //没有参数,则为当前时间

    var d = moment("1995-12-25"); 
    //参数为字符串, 1995年12月25日00:00:00

    var d = moment("1995-12-25 12:20:25"); 
    // 1995年12月25日12:20:25

    var d = moment({ year: 2010, month: 3, day: 5, hour: 15, minute: 10, second: 3, millisecond: 123 });
    //参数为对象,注意月减1 , 2010年04月05日15:10:03

    var d = moment(Date.now() - 24* 60 * 60 * 1000); //参数为时间戳昨天

    var d = moment(new Date(2011, 9, 16, 12, 20, 25)) //参数为时间对象, 2011年10月16日12:20:25

6)格式化时间
    console.log(moment(.format("YYYY")); //四位数字完整表示的年份
    console.log(moment().format("MM")); //数字表示的月份,有前导零, 01到12
    console.log(moment().format("DD")); //月份中的第几天,有前导零, 01到31
    console.log(moment().format("d")); //星期中的第几天,数字表示, 0到6 , 0表示周日, 6表示周六
    console.log(moment().format("HH")); //小时, 24小时制,有前导零, 00到23
    console.log(moment(.format("mm")); //有前导零的分钟数, 00到59
    console.log(moment().format('ss )); //有前导零的描述, 01到59
    console.log(moment().format("YYYY年MM月DD日 HH:mm:ss")); // 2019年12月31日17:26:56
    
    console.log(moment().format("X)); //只含秒的时间戳
    console.log(Date.now()); //原生获取时间戳

Day12
1.字符串对象
1)字符串对象的创建
var str = ‘字符内容’;
var str = String(‘字符内容’);
var str = new String(‘字符内容’);
这种方法创建出的字符串，就是字符串对象，typeof得到的结果就是object
2)在js中一切皆对象
在js中任何数据类型都有两种身份
1）自身数据类型身份
2）对象类型身份：对象类型身份给每一种数据类型提供了很对操作方法，可以便于我们操作这些数据
3）String中的方法
length属性：表示字符串中包含字符的个数
charAt()方法：可以获取到字符串中指定下标的字符
charCodeAt()方法：可以获取到字符串中指定下标的字符串的Unicode编码
indexOf()方法：可以获取到指定字符的下标，如果没有就获取到-1；
indexOf(‘指定字符’)
indexOf(‘指定字符’,指定下标)；
可以判断类名中是否包含某些类名
lastIndexOf()方法：用法完全相同于indexOf()知识查找顺便变成从后往前
4）字符串比较大小
字符串比较大小实际上比较的是字符的编码值
比较规则：从字符串的首位开始比较，如果比较出大小就结束，如果没有，就继续比较第二位，依次类推
5)字符串的截取
substring
substring(起点下标，终点下标)
可以截取到起点，取不到终点
字符串.substring(起点下标)
可以截取到从起点开始到字符串结尾处的整段字符片段
这个方法如果起点和终点位置颠倒，会自动将起点和终点调整好顺序
如果传入负数参数，会将负数置为0
slice
slice(起点下标，终点下标)
可以截取到起点，取不到终点
字符串.slice(起点下标)
可以截取到从起点开始到字符串结尾处的整段字符片段
这个方法如果起点和终点位置颠倒，会自动将起点和终点调整好顺序
如果传入负数参数，会将负数参数和原字符串的length属性相加,得到的结果作为参数，如果加完之后还是负数，就会将负数置为0
6）字符串转大小写
toUpperCase
字符串.toUpperCase()
就会将字符串中的英文字母全转换成大写
toLowerCase
字符串.toLowerCase()
就会将字符串中的英文字母全转换成小写
7）字符串的切割
split
用法：字符串.split(‘切割标识’);
作用：以切割标识作为标志，进行切割，最后将一整个字符串切分为若干个字符串，将切分出来的字符串，存入数组中，并将数组返回出来
注意：
切割标识会被切掉，不会保留到数组中
如果不传切割标识，则标识将整个字符串作为一整个数组项存入数组中
8）替换字符串
replace
用法：字符串.replace(‘要被替换的字符部分’,‘用来替换的字符部分’);
9）删除字符串两端的空格
用法：字符串.trim();
作用：删除字符串两端的空格
一般用在注册用户名或密码的时候，防止用户输入空格
注意：trim只删除两端的空格，中间的空格不删
2.遇到bug的解决思路：
1）推理问题出现位置
2）打印可能出现问题的数据来验证是否有问题
3）找到问题的出处并改正
3.数组对象
1）创建方式
字面量创建 ：var arr =[1,2,3];
构造函数创建：var arr1 = new Array(1,2,3);
构造函数创建：var arr2 = Array(1,2,3);
2)数组对象的增删方法
从数组末尾添加和删除
添加 push
用法：数组.push(要添加进数组的数组项)
作用：将添加进数组的数组项 添加到 数组
返回值：添加之后的数组长度
删除 pop
用法：数组.pop();
作用：删除数组中的最后一项
返回值：删除的数组项
从数组开头添加和删除
添加 unshift
用法：数组.unshift(要添加进数组的数组项)
作用：将添加进数组的数组项 添加到 数组
返回值：添加之后的数组长度
删除 shift
用法：数组.shift();
作用：删除数组中的第一一项
返回值：删除的数组项
3）splice
作用：可以删除数组中的任意数组项目，也可以在数组中的任意位置添加数组项，还可以替换数组中的任意数组项
1）删除：数组.splice(要删除的起始下标，要删除的数组项个数);
2）替换：数组.splice(删除的起始下标，要删除的数组项个数，用来替换的数组项1，用来替换的数组项2)
3)添加：数组.splice(删除的起始下标，0,用来添加的数组项1，用来添加的数组项2)
注意：添加的数组项会添加到原起始位置的前面，因此具体位置需要注意
4）数组的排序算法：
1）选择排序法：使用当前数组项和后面的所有数组项进行比较，找出最小项，放在当前位置，依次类推，就可以将数组从小到大排列
2）冒泡培训法：相邻两个数组项，两两进行比较，如果后一个比前一个小，则交换两者的位置，这样也可以从小到大排列
3）数组自带的排序方法：sort
数组.sort()
作用：将数组中的数组项以Unicode编码的顺序进行排列
数组.sort(function(a,b){
return a-b/正数;//从小到大
return b-a/负数;//从大到小
})
在sort传入的函数里，a和b表示的是数组中的arr[j] arr[j+1]项，sort方法的底层原理也是冒泡排序
5）数组的去重
Day13
1.数组的方法
1）join
数组.join(‘拼接标识’);
将数组中的数组项拼接为一个字符串 使用拼接标识来拼接每一个数组项
2）reverse
数组.reverse()
将数组翻转
3）concat
数组.concat(数组1，数组2)
将所有传入的数组和原数组拼接起来，拼成一个新数组返回出来
注意：concat不会改变任何数组
4）indexOf
数组.indexOf(指定数组项)
获取到指定数组项的首次出现的下标
如果数组中不包含指定数组项，则返回-1
5）数组的迭代(循环)方法
every：针对数组元素做些判断，如果结果都为true则返回的结果为true
some：针对数组元素做些判断，如果结果有一个为true则返回的结果为true
filter：针对数组元素做些判断,满足条件的元素，会组成一个新的数组，并且
map:将函数中返回的数据 作为新的数组的数组项 从而生成一个新数组 并返回这个新数组
foreach：没有返回值，就是一个简单的循环,直接操作
2.中文名比较大小localeCompare()
a.localeCompare(‘b’);
如果a在b的后面返回1，如果a在b的前面返回-1,如果一样再比较下一个字，直到比较出结果
DOM
1.定义：Document Object Model 文档对象模型
2.DOM描绘了一个层次化的节点树 允许开发人员对节点进行添加、删除、修改
3.获取子节点
children
父节点.children()->获取父元素中所有子元素节点
childNodes
父节点.childNodes()->获取父元素中所有子节点
4.节点属性
1)nodeType:节点类型
标签节点 节点类型：1
属性节点 节点类型：2
文本节点 节点类型：3
注释节点 节点类型：8
2)nodeValue:只有文本节点的nodeValue才有意义
获取：文本节点.nodeValue
设置：文本节点.nodeValue = ‘xxx’
2)nodeName:只有标签节点才有节点名称，节点名称就是标签名，可以用来做判断，判断标签的名称
5.获取父元素
parentNode：获取父元素
offsetParent:获取带定位父元素，没有定位父元素，就找到body
6.获取其他节点
firstChild/firstElementChild :第一个子节点/子元素
lastChild/lastElementChild :最后一个子节点/子元素
nextSibling/nextElementSibling :下一个兄弟节点/元素
previousSibling/previousSibling :前一个兄弟节点/元素
firstChild标准浏览器会获取到折行(文本节点), firstElementChild是专门解决这个问题，但是在IE中firstchild表示第一个子元素，而firstElementChild不能用，因此需要做兼容
兼容:父元素.firstElementChild || 父元素.firstChild
7.操作节点的方法
1)创建节点
创建标签节点
document.createElement (‘标签名’)
创建文本节点
document.createTextNode (文本内容’)
添加标签内容
节点.appendChild (文本节点)
节点.innerHTML
2)添加节点
appendChild
用法：父元素.appendChild(要追加的子元素)
作用：在父元素末尾追加子元素
insertBefore
用法：父元素.insertBefore(要追加的子节点,已经存在的子元素)
作用：将要追加的子元素追加到 父元素中 原本存在的子元素的 前面
注意：如果以上两种方法追加的是已经存在页面中的子元素，实际上就会将子元素移动位置
3)删除节点:
删除自身 remove
用法：元素.remove()
作用：将元素自身删除
删除子节点 removeChild
用法：父元素.removeChild(要删除的子元素)
作用：将父元素中指定的子元素 删除掉
4)替换节点:
replaceChild
用法：元素.replaceChild(新子元素，旧子元素)
作用：使用新子元素替换旧子元素
5)克隆节点:
用法：元素.cloneNode(true/false)
如果传入true,则标识要将元素和元素内容都克隆下来，如果传入false,就表示只克隆元素，不可隆内容。
如果不传入任何参数，默认传入false
8.操作节点属性
1）获取 getAttribute
用法：元素.getAttribute(‘属性名’)
作用：获取指定元素中指定属性名的属性值
1）设置 setAttribute
用法：元素.setAttribute(‘属性名’,‘属性值’)
作用：设置指定元素中 指定属性名 的 指定属性值
9.操作表格
1)表格.tHead:获取表格thead
2)表格.tFoot:获取表格tfoot
3)表格.tBodies:获取表格tbody 获取到的是元素集合 需要同[]获取
4)表格.rows 获取整个表格tr
5)表格.tBodies[0].rows 获取整个body中的tr
6)表格.rows[0].cells 获取单元格
10.获取表单元素的方法
form元素.子元素.name属性名
作用：获取form元素中的子元素

Day15
1.表单事件
1)onsubmit
当表单被提交的时候触发该事件
事件处理函数中返回true表示正常提交，返回false表示阻止提交
这个事件时添加给form元素的
2)onreset
当表单被重置的时候触发该事件
事件处理函数中返回true表示正常重置，返回false表示阻止重置
这个事件时添加给form元素的
3)onfocus
当表单元素获取到焦点的时候触发该事件
这个事件时添加给form中的表单元素的
4)onblur
当表单元素失去焦点的时候触发该事件
这个事件时添加给form中的表单元素的
2.表单元素的方法
1）submit:提交方法
用法：form元素.submit()
作用：将指定的form元素提交
2）reset
用法：form元素.reset()
作用：将指定的form元素重置
3）focus
用法：form元素中的表单元素.focus()
作用：让指定的form中的元素获取到焦点
4）blur
用法：form元素中的表单元素.blur()
作用：让指定的form中的元素获取到焦点
5）select
用法：form元素中的表单元素.select()
作用：让指定的form中的元素被选中

3.BOM
1)定义：Browser Object Model 浏览器对象模型
2)作用：浏览器对象模型提供了独立于内容的，可以与浏览器窗口进行互动的对象模型
独立于内容的：BOM提供的操作浏览器的方法，不依赖HTML结构，即使整个页面是空页面，依然可以操作浏览器
可以与浏览器窗口进行互动的：BOM是可以与浏览器窗口互动的，而不是与页面内容进行互动的
4.window对象
1)系统对话框
alert ()
console.log()
confirm() 弹窗可供用户选择：如果点击确定返回true，如果点击取消返回false
prompt() 弹窗可供用户输入选择：如果输入内容点击确定返回输入内容，如果点击取消返回null
2)open 打开新的页面
window.open(url,打开窗口的方式，设置窗口大小，新窗口是否取代浏览器记录中的位置)
ul必传参数，其他为可选参数
设置窗口大小：如果在当前页面刷新打开，就无法设置大小
在script标签内部可以省略window，但是在行内引入的js中不能省略window，因为行内不是全局作用域
3)close 关闭当前页面
window.close()
5.location
1)最有用的BOM对象之一，他提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能
2)window.location =‘url地址’;跳转页面
3)window.location.reload();//刷新当前页面
4)hash "#contents"返回URL中的hash
5)host
6)hostname
6.histoty对象
1)history.back():跳转到history列表中的前一个url地址
2)history.forward:跳转回history列表中的后一个url地址
3)history.go(n):跳转到history列表中的特定一个url地址：如果用户传入正数，就向前跳转n个页面，如果用户传入负数，就向回跳转n个页面
4)
7.Navigator对象
这个对象主要用来获取浏览器的信息
8.JS中操作元素大小和位置的三大系列方法：
BOM中的三大系列：主要用来操作浏览器及页面内容的尺寸和位置
1)Client系列 client获取的宽高包括元素自身宽高+padding值
元素.clientWidth 元素的可视宽度
元素.clientHeight 元素的可视高度
clientLeft 左边框
clientTop 上边框
html标签节点 document.documentElement

2)Offset系列 offset获取元素包括元素自身宽高+padding值+border
    元素.offsetWidth 元素的占位宽度
    元素.offsetHeight 元素的占位高度
    如果没有定位父元素，就计算相对于body的距离
    offsetLeft 左边框 获取当前元素左侧到offsetParent的顶部的距离
    offsetTop 上边框 获取当前元素顶部到offsetParent的顶部的距离

3)Scroll系列 
    元素.scrollWidth 获取元素实际内容的宽度
    元素.scrollHeight 获取元素实际内容的高度
    元素.scrollTop 获取元素的被卷取的宽度
    元素.scrollLeft 获取元素的被卷取的宽度
    document.documentElement.scrollTop||document.body.scrollTop 获取页面被卷去的高

Day16
1.事件对象
定义：当事件发生的时候，事件对象用来记录跟事件有关的信息，都会存储在事件对象中
2.事件对象属性
1)type 事件名称/事件类型
2)target 事件目标 实际触发事件的元素
3)pageX pageY 鼠标相对于页面内容的距离
4)clientX clientY 鼠标相对于可视窗口的距离
5)shiftKey ctrlKey altKey 判断用户是否按着功能键 如果按着，值为true 如果没按 值为false
3.事件对象兼容：
在谷歌和ie中，事件对象表示为window.event / event
在火狐中 需要使用事件处理函数的第一个形参 来接收到事件对象
兼容写法： event = window.event||ev;
4.事件绑定
元素.事件这种方式添加的事件，同一个元素的同一个事件 后面的会覆盖前面的
通过事件绑定，同一个元素的同一个事件可以添加不同的处理函数
标准浏览器：元素.addEventListener(‘事件类型(不见on)’,事件处理函数，是否捕获)；
ie浏览器：元素.attachEvent(‘事件类型(加on)’,事件处理函数)
5.DOM事件流
事件捕获阶段：当事件发生的时候，事件从window开始依次往子元素传递
地球–中国–北京–朝阳–五方桥–中公基地–找到
在整个捕获的过程中，如果父元素有同类点击事件，也会被触发
确定目标阶段：找到目标
事件冒泡阶段：从目标事件开始处理事件，处理完之后依次往是父元素传递，一直传到window
注意：ie只有冒泡阶段
6.阻止冒泡
在标准浏览器中：事件对象.stopPropagation();
在ie8-浏览器中：事件对象.cancalBubble = true;
ev.stopPropagation?ev.stopPropagation():ev.cancalBubble = true;

Day17
1.事件取消
1)取消on方式添加事件 元素.on事件类型 = null;
2)取消addEventListener绑定的事件
元素.removeEventListener(‘事件类型’，事件处理函数，是否捕获)
注意：使用这个方法的时候，也必须使用有名字的函数作为事件处理函数
3)取消attachEvent绑定的事件
元素.detachEvent(事件类型，事件处理函数)
注意：使用这个方法的时候，也必须使用有名字的函数作为事件处理函数
2.事件的默认行为:
a标签点击跳转 鼠标右键弹出菜单 滑动滚轮控制滚动条 就需要阻止这些默认行为
取消事件默认行为
1)如果事件用on的方式添加 就使用return false 来阻止
2)如果事件用addEventListener的方式添加,就使用事件对象.preventDefault()阻止
3)如果事件用attachEvent的方式添加 就使用事件对象.returnValue = false 阻止
3.事件委托
事件代理：
4.键盘事件：
onkeydown:键盘按下事件 会在用户按下键盘后，触发 如果按住不松手，就会一直触发
onkeyup：键盘弹起事件 会在用户按下键盘后并松开手之后触发
onkeypress：类似于onkeydown,按下之后就会执行，如果一直按，就一直执行
键盘事件事件对象重要属性：
type:事件类型；
target：事件目标
key:键盘值 用户按下键的对应值 有兼容性问题
keyCode：键盘码 用户按下键的值对应的Unicode的编码的值
5.鼠标滚轮事件
在谷歌和IE中，滚轮事件为mousewheel
在火狐中，滚轮事件为DOMMouseScroll
DOMMouseScroll只能使用addEventListener绑定
兼容
document.body.onmousewheel = function(e){
var ev = window.event||e;

    }
    if(document.body.addEventListener!=undefined){
        document.body.addEventListener('DOMMouseScroll',function(e){
        var ev = window.event||e;
        })
    }
记录鼠标滚轮滚动方向wheelDelta
    在mouserwheel中，使用wheelDelta属性记录，正值为向上滚动，负值表示向下滚动
    在DOMMouseScroll中，使用detail属性记录，正值表示向下滚动，负值表示向上滚动

6.js拖拽效果
1）拖拽效果有漏洞，不能拖拽图片(默认理解为保存图片)，拖拽文字也不行(默认理解为选中文字)
2)解决办法：
标准浏览器：return false;
ie:setCapture全局捕获：releaseCapture释放全局捕获

Day18
Day19 面向对象
1.概念：使用对象时，只关注对象提供的功能，不关注其内部细节
2.面向对象三大基本特征：
1)封装:将一些功能作为对象的方法，封装进对象中，从而实现方法的私有性，并防止全局变量的污染。
2)继承:如果多个对象存在相同的属性，就可以提取出这个属性，把他存放在父对象中，当子对象需要使用的时候，在父对象中获取即可
3)多态:同一种操作 在操作数不同的时候 效果不同 就叫做多态
在js中字符串加法和数字加法都是加法操作（同一种操作），但是二者操作数不同（字符串加法加的是字符串，数字加法加的是数字），隐藏得到的效果也不同（字符串加法得到的是字符串的拼接，而数字加法得到的是数字的加和）
1+1==2;
‘a’+‘c’=‘ac’;
3.面向对象创建-
1)字面量创建
var obj = {
name:‘lx’,
sex:‘man’,
say:‘qqq’
}
2)实例创建：代码冗余
var obj = new Object();
obj.name = ‘lx’;
obj.sex = ‘man’;
obj.say =function(){
console.log(‘aaa’);
}
缺点：每次创建对象都需要重新实例化（new），之后再绑定属性
3)工厂模式：工厂模式创建对象其实就是把实例创建对象封装为了一个函数
var createPerson = function(name,sex,age){
var obj = new Object();
obj.name = name;
obj.sex = sex;
obj.age = age;
return obj;
}
缺点：结构不明确 工厂模式this指向window，因此某些时候需要使用this来操作对象，就无法实现
4)构造函数创建对象
1)构造函数创建对象浪费内存
2)函数名首字母大写,使用this添加属性和方法，调用的是否前面必须加new
3)构造函数的执行过程：
1）js隐式创建空对象 obj{}
2）js隐式将构造函数的this指向obj空对象
3）使用this给obj空对象添加属性和方法
4）js隐式返回绑定好属性的obj
4)构造函数中this指向创建出来的this
5)原型prototype创建对象：不能传参
6)混合式创建对象
将需要传参的属性 使用构造函数给对象绑定
将不需要传参的属性 使用原型给对象继承
优势：可以在最大程度上节省计算机内存，可以兼顾传参的效果
推荐使用

Day20 面向对象继承
1.命名空间
如果在一个作用域中，发生命名冲突的时候，可以通过对象的形式开辟新的命名空间
2.call和apply
1)call:函数方法 只有函数可以调用
用法：函数.call(this指向,原函数需要的实参1,原函数需要的实参2)
作用：当函数调用call的时候，this指向会被改变为call的第一个参数，并向函数中传入后续的所有实参
当函数调用call的时候，就会被立即执行
2)apply:函数方法 只有函数可以调用
用法：函数.apply(this指向,[原函数需要的实参1,原函数需要的实参2])
作用：当函数调用call的时候，this指向会被改变为apply的第一个参数，并向函数中传入后续数组中的所有数组项作为实参
当函数调用apply的时候，就会被立即执行
3.面向对象的继承方式
1)原型链继承:嫁入豪门的过程
找一个想要继承他们家产的富二代(有原型和构造函数的对象)
将女明星构造函数的prototype指向富二代对象(嫁入豪门)
结果女明星构造函数创造的对象 将会继承到整个 原型链中的所有属性
弊端：不是很方便的通过传参改变属性值
2)对象冒充继承:将他人财产转移到自己名下
坏女人构造函数 通过call/apply方法 将土豪构造函数的this改变为自己的this
这样土豪构造函数在执行的时候就会通过this将所有属性绑定给 坏女人构造函数的this(就是坏女人构造函数创建的对象)
结果 坏女人构造函数就会让 土豪构造函数将自己的所有属性都绑定给 坏女人构造函数创建的对象
优势：可以很方便的通过传参来改变属性值
弊端:原型链中的属性 无法继承
3)混合式继承——嫁入豪门，并进行财产转移
原型链继承和对象冒充继承同时使用 就是混合式继承
优势：既可以实现继承原型链中的属性 又可以通过传参的形式很方便的实现 属性值的改变

正则对象和闭包
1.正则对象:是js中的一个内置对象 RegExp rugual express
1)创建方式：
正则对象的构造函数创建：new RegExp(‘检索字符’,‘修饰符’);
正则对象的自变量创建：/检索字符/修饰符
2)正则修饰符
g:global 执行一个全局匹配
i:ignore case 执行一个不区分大小写的匹配
3)正则表达式的检测方法:
test:
用法：正则对象.test(要检测的字符串)
作用：如果要检测的字符串中包含正则的检索字符，就返回true,否则返回false
exec:
用法：正则对象.exec(要检测的字符串)
作用：如果要检测的字符串中包含正则的检索字符，就返回伪数组,否则返回null
字符串中可以使用正则进行检索的检索方法
1.replace:替换正则匹配的字符串
2.split:按正则匹配的内容拆分成数组
3.match:返回正则匹配到的内容,跟exec一样
4.seach:返回正则匹配到的第一个字符串的位置，没有返回-1
4)正则元字符
.匹配除了换行符之外的任意字符 换行符 \n
[0-9a-z] 匹配满足中括号中条件的字符内容
\d 匹配数字
\D 匹配非数字
\w 匹配 字母 下划线 数字
\W 匹配 非 字母 下划线 数字 的 任意字符
\s 空格 和空白字符
\S 非 空格 和空白字符
\b 匹配字符边界
\B 匹配没有字符边界
^ 表示开头
$ 表示结尾
5)量词
? 匹配0个或一个 n?
* 匹配任意多个
+ 匹配至少一个 n+
(xyz)+ 匹配至少一个xyz
a{m,n}匹配至少m个 至多n个
2.匿名函数
(1)匿名函数：就是定义时未直接指定名称的函数
(2)优点：节省内存空间
(3)非匿名函数在定义时，就已经创建函数对象和作用域对象。所以，即使未调用，也占用内存空间；匿名函数，仅在调用时，才临时创建函数对象和作用域链对象；调用完，立即释放，所以匿名函数比非匿名函数更节省内存空间
7.匿名函数的声明 function (){ }
(1)匿名函数自执行()()—(匿名函数的声明)(调用)
(2)两个(),第一个()中放函数的声明，第二个()是执行
(3)(function () {
console.log(“匿名函数”)
})();
3.匿名函数传参和返回值
(1)匿名函数的参数传递，跟普通函数一样，在声明函数的时候设置形参，调用函数的时候传递实参。
(2)(function(a){ console.log(a); })(10);
(3)匿名函数的返回值，跟普通函数一样，在调用函数的地方接收返回值
(4)var re = (function(a){ return a*a; })(10);
4.闭包函数
(1)闭包：闭包就是能够读取其他函数内部变量的函数（函数里面套函数，内部函数访问外部函数变量），在本质上，闭包是将函数内部和函数外部连接起来的桥梁。
(2)特点：在闭包中的变量，会一直存储在内存中，类似全局变量,避免了全局污染。

Day22 Ajax
1.用来向后台数据库请求获取数据的技术
2.ajax除了解决局部更新渲染页面的问题，解决了前后端分离的问题
3.为什么要前后端分离
用户的计算机中无法存储大量的数据，因此就需要将数据存储在后台数据库中，前端需要使用的时候，就向后台数据库发送请求 获取数据 进而渲染数据显示页面
4.Ajax数据交互的过程：
1.创建对象var ajax = new XMLHttpRequest();//装了一台电话
2.建立前端和后台之间的连接 ajax.open(‘请求方式’,url地址，‘是否异步’);
3.发送请求 ajax.send()
4.监听通信状态码改变 ajax.onreadystatechange = function(){}
通信状态码：用来记录数据交互状态 readyState
0:XMLHttpRequest还没有完成初始化，ajax还没有创建出来
1:ajax调用open建立了前后端之间的连接
2:ajax调用了send发生了请求
3:后台服务器解析请求，分析请求中需要的数据
4:后台服务器将数据响应给前端结束(货送到门口了)
如果通信状态码为4，证明响应完成 我们就可以在前端获取响应数据
5.检测响应状态码 status
响应状态码是用来记录数据交互过程中 是否出问题的标识
200：请求响应成功 数据来源于后台数据库
304：请求响应成功 数据来源于本地缓存
403：请求响应失败，没有权限访问
404：请求响应失败，访问地址找不到
500及以上：后端服务器问题
6.get
提交数据：将要提交的数据写在url地址后面
2)格式：url?键名1=键值&键名2=键值&键名3=键值
3)可以在浏览器的控制台中network选项中查看提交的数据
安全性不好：因为用户提交的数据都会显示在地址栏中，因此get不适用于登录注册页面
提交是数据的量很小 只有4k左右
优点：传输数据的速度比较快
7.post
post方式发送请求需要设置请求头
ajax.setRequestHeader(‘Content-type’,‘application/x-www-form-urlencoded’);
提交数据：
将要提交的数据作文send方法的参数传入
ajax对象.send(‘键名1=键值&键名2=键值&键名3=键值’);
post提交的数据不会显示在地址栏中 因此安全性更好 一般用来提交表单数据
提交的数据大小 大概有20M

5.封装一下ajax方法
6.ajax操作数组
使用eval即可
eval的用法：eval(字符串)
eval的作用：可以将字符串中的js代码执行 如果是js数据就直接返回出来
7.json数据
json书写规则
一个json文件中只能写一个数据
json中不许写注释
json中只能使用双引号
json不论数组还是对象 最后一个数组项后面属性都不能加逗号
如果是json对象 属性名也必须是双引号
json对象:JSON.parse(json数据) 这样可以将json数据转换为js对象和数组

DAY25移动端事件
1.在js中移动端事件常用的有三个
1)ontouchstart:在手指按下的时候触发
2)ontouchmove：手指移动事件 手指按下并移动的时候触发
3)ontouchend：手指松开事件 会在手指在屏幕上抬起的时候触发
2.PC端事件在移动端的问题
1)PC端事件在移动端中会延迟300ms触发 因此在移动端中尽量不要使用PC端事件
3.移动端事件的点透问题
移动端事件中存在点透问题及当我们点击上层元素且点击事件不超过0.3s，点击事件就会穿透当前元素，漂移到下层元素身上
4.移动端事件的事件对象
1)touches:当前位于屏幕上的所有手指的一个列表
screenX:当前位置到屏幕左侧的距离
screenY:当前位置到屏幕顶部的距离
force:手指按压的压力
rotationAngle：旋转角度
2)targetTouches:位于当前DOM元素上的手指的一个列表
3)changeTouches:涉及当前事件的手指的一个列表
5.Touch.js:
移动设备上的手势识别与事件库
在webkit内核的浏览器中使用
要使用touch.js需要先引入
1)绑定事件 touch.on(ele,types,callback) 给ele绑定types类型(types类型可以是’事件1 事件2’)的事件
2)添加事件代理 touch.on(ele,types,selector,callback)
ele:被委托的元素
types:事件类型
selector:实际触发事件的子元素(选择器)
callback:事件处理函数
解绑事件 touch.off(ele,types,callback)

Day26
1.touch.js中的事件
普通类：
tap手指单击触发
doubletap手机双击触发
hold手指长按触发
缩放类:
pinchstart 缩放手势起点
pinchend 缩放手势终点
pinch 缩放手势
pinchin 缩小
pinchout 放大
旋转类：
rotateleft向左旋转
rotateright向右旋转
rotate旋转
注意：
旋转类事件想要触发 必须在 touchstart事件中使用事件对象调用startRotate方法才可以实现收支拖拽效果
旋转类事件的事件对象.rotate 可以记录旋转过的角度
旋转类事件事件对象.fingerStatus == 'end’表示旋转结束
滑动类：
swipestart滑动手势起点
swiping滑动中
swipeend滑动手势终点
swipeleft向左滑动
swiperight向右滑动
swipeup向上滑动
swipedown向下滑动
swipe滑动
注意：
滑动事件的重要属性：
ev.distance手指位移总距离
ev.distanceX手指位移总距离在横向上的分解
ev.distanceY手指位移总距离在纵向上的分解
拖动类：
dragstart 拖动开始
drag 拖动
dragend 拖动结束
注意：
ev.x本次拖拽过程中手指位移的横向距离
ev.y本次拖拽过程中手指位移的纵向距离

jQuery类库
1.jQuery凭借简洁的语法和跨平台的兼容性，极大的简化了javascript开发人员遍历html文档、操作DOM、处理事件、执行动画和开发ajax的操作。
2.jQuery强调的理念是以最少的代码，实现最多的功能。 write less do more
3.Jquery的优势
(1)轻量级
(2)强大的选择器 jQuery支持所有css3的选择器
(3)出色的DOM操作的封装
(4)可靠的事件处理机制
(5)完善的ajax
(6)不污染顶级变量
(7)出色的浏览器兼容；
(8)链式操作方式
(9)隐式迭代
(10)行为层和结构层的分离
(11)丰富的插件支持
(12)完善的文档
(13)开源
4.jQuery的引入方式
(1)引入网上CDN jquery文件
①
②本地的jquery文件需要下载，进入jquery官网下载
(3)最新版本是3.5.0 2.0版本一下可以兼容ie
①jQuery创建之初，主要是针对PC端项目，PC端特点是 内存较大，并且大多需要兼容 因此jQuery的1.x版本 都是兼容ie的
②jQuery2.0版本以上主要针对移动端项目， 移动端特点是 内存较小，并且大多不需要兼容， 因此jQuery的2.x版本 就不兼容ie了

jQuey的页面加载函数
1)写法: $(document).ready(function(){任意的jQuery或js代码})
$().ready(function(){任意的jQuery或js代码})
$(function(){任意的jQuery或js代码})
2)jQuery的页面加载函数中的代码 会在整个页面的dom结构刚加载完成之后 执行
3)和window.onload的区别：
1)window.onload除了需要等待页面的html结构加载完，还需等待外部引入的资源加载完，才能执行内部代码
2)window.onload一个页面中只能写一个 如果多写后面的会覆盖前面的 而jQuery的页面加载函数一个页面中可以写多个

jQuery对象和DOM对象
1.DOM对象：通过js的一些方法 获取到的页面dom元素 就是dom对象
2.jQuery对象 通过jQuery选择器获取到页面上的标签 就是jQuery对象
3.jQuery对象可以使用jQuery中封装好的一切方法 但是不能使用dom元素的方法
Dom对象可以使用Dom中封装好的一切方法 但是不能使用jQuery元素的方法

jQuery对象和DOM对象之间的互转
1.jQuery–>DOM:
jQuery对象[下标]
jQuery对象.get()得到的是一个包含dom元素的数组，如果想获取到确切的dom元素，需要[下标]
2.DOM–>jQuery:
$(dom对象)

多库共存
1.使用jQuery.noConflict()方法，使得jQuery让出$
2.使用匿名函数自执行的方式 重新让jQuery可以使用$
(function($){
KaTeX parse error: Expected '}', got 'EOF' at end of input: … console.log();
})
})(jQuery)

jQuery的选择器
1.基本选择器
①$(‘元素名’)：获取对应元素名的标签 ${(}^{\prime }di{v}^{\prime })②$(’.类名’)：获取对应类名的标签 ${(}^{\prime }.bo{x}^{\prime })③$(’#id名’)：获取对应id名的标签 KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲box') 2.层级选择器 …(‘a b’)：获取a元素的后代元素b
②${(}^{\prime }a>b^{\prime })：获取a元素的直接后代元素b③$(‘a+b’)：获取紧跟在a元素后面的b元素，next()方法一样的效果
④${(}^{\prime }a{b}^{\prime })：获取a元素后面的所有b元素，nextAll()方法一样的效果⑤prev()：返回上一个兄弟节点，不是所有的兄弟节点⑥prevAll()：返回所有之前的兄弟节点⑦siblings()：返回兄弟姐妹节点，不分前后3.基本过滤选择器①$(‘li:first’)：获取第一个li元素
②${(}^{\prime }li:las{t}^{\prime })：获取最后一个li元素③$(‘li:not(.box)’)：获取所有的li，除了class名为box的
④${(}^{\prime }li:eve{n}^{\prime })：获取索引为偶数的li元素⑤$(‘li:odd’)：获取索引为奇数的li元素
⑥${(}^{\prime }li:eq(2{)}^{\prime })：获取索引值为2的li元素⑦$(‘li:gt(2)’)：获取索引大于2的li元素
⑧$(‘li:lt(2)’)：索引小于2的li元素
4.内容过滤选择器
1)li:contains(指定文本内容) 获取内容为指定为本内容的li
2)li:has(元素标签名) 获取内容包含指定元素的li
3)li:empty获取内容为空的li元素
4)li:parent 获取包含内容(文本内容，标签内容)的元素 只要有内容，无论是文本还是标签 和empty相反

Day27
1.jQuery的可见性过滤选择器
1)li:visible 获取可见的li
2)li:hidden 获取不可见的li 不占位
2.jquery的子元素选择器 有空格哦
1)ul :nth-child(n) 获取第n个子元素
2)ul :nth-child(even) 获取偶数子元素
3)ul :nth-child(odd) 获取奇数子元素
4)ul :nth-child(公式) 获取下标满足公式的子元素
5)ul :first-child 获取第一个子元素
6)ul :last-child 获取最后一个子元素
注意：使用方法需注意可以写作 父元素 :nth-child 也可写作 子元素:nth-child 父元素一定要加空格
3.属性过滤选择器
(1)${(}^{\prime }li[title{]}^{\prime }).css{(}^{\prime }backgroun{d}^{\prime }{,}^{\prime }re{d}^{\prime });//有title属性的(2)$(‘li[title=优就业]’).css(‘background’, ‘red’); // 属性是优就业的
(3)${(}^{\prime }li[title!=优就业{]}^{\prime }).css{(}^{\prime }backgroun{d}^{\prime }{,}^{\prime }re{d}^{\prime });//属性不是优就业的(4)$(‘li[title^=a]’).css(‘background’, ‘red’); // 属性以a开头
(5)${(}^{\prime }li[title$=业]’).css(‘background’, ‘red’); // 属性以’业’结尾
(6)${(}^{\prime }li[title\ast =b{]}^{\prime }).css{(}^{\prime }backgroun{d}^{\prime }{,}^{\prime }re{d}^{\prime });//属性包含b的；4.表单元素属性过滤选择器1)表单元素:disabled选中不可用的表单元素2)表单元素:enabled选中可用的表单元素3)表单元素:checked选中带有checked属性的表单元素4)select:selected选中select标签中的带有selected属性的option元素5.表单元素选择器(1)$(’:input’); // 选取所有input textarea select button元素
(2)${(}^{\prime }:tex{t}^{\prime });//所有单行文本框，即类型为：type="text"(3)$(’:password’); // 密码框
(4)${(}^{\prime }:radi{o}^{\prime });//单选框(5)$(’:checkbox’); // 多选框
(6)${(}^{\prime }:submi{t}^{\prime });//提交按钮(7)$(’:reset’); // 重置按钮
(8)${(}^{\prime }:butto{n}^{\prime });//普通按钮(9)$(’:file’); // 上传域
6.遍历节点
1)父子关系
①${(}^{\prime }.box{3}^{\prime }).parent();//当前元素的父级，返回一个元素②$(’.box3’).parents(); // 当前元素的所有的父级，一直到html，返回一个类数组，可以接收一个筛选条件
2)兄弟关系
(1)KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲box').children(…(’.title’).next().css(‘background’, ‘red’); // 当前元素的下一个兄弟节点
(3)${(}^{\prime }.titl{e}^{\prime }).nextAll().css{(}^{\prime }backgroun{d}^{\prime }{,}^{\prime }re{d}^{\prime });//当前元素的下面所有的兄弟节点(4)$(’.title’).prev().css(‘background’, ‘red’); // 当前元素的上一个兄弟节点
(5)${(}^{\prime }.titl{e}^{\prime }).prevAll().css{(}^{\prime }backgroun{d}^{\prime }{,}^{\prime }re{d}^{\prime });//当前元素的上面所有的兄弟节点(6)$(’.title’).siblings().css(‘background’, ‘red’); // 当前元素的兄弟节点
3)子父关系
①${(}^{\prime }u{l}^{\prime }).find{(}^{\prime }l{i}^{\prime }).css{(}^{\prime }backgroun{d}^{\prime }{,}^{\prime }re{d}^{\prime });//先找到ul，再查找ul下面的li，find查找子孙节点②$(‘li’).filter(’.box’).css(‘background’, ‘red’); // 先找到li，再过滤找到.box的元素
③${(}^{\prime }l{i}^{\prime }).not{(}^{\prime }.bo{x}^{\prime }).css{(}^{\prime }backgroun{d}^{\prime }{,}^{\prime }re{d}^{\prime });//同filter相反，排除.box7.jquery操作属性DOM中操作属性的方式1)元素.属性名元素.属性名=属性值2)getAttribute获取元素属性setAttribute设置元素属性jquery中操作属性的方式1)attr设置和获取用法：jQuery对象.attr(属性名)得到属性值设置：jQuery对象.attr(属性名,属性值)就可以设置属性值批量设置属性：jQuery对象.attr(属性名:属性值，属性名:属性值)就可以设置属性值2)removeAttr()移出属性jQuery对象.removeAttr{(}^{\prime }属性{名}^{\prime });3)prop设置和获取属性1)只添加属性名称该属性就会生效，应该使用prop2)只存在true/false应该使用prop用法：jQuery对象.prop(属性名)jQuery对象.prop(属性名,属性值)8.jquery中操作类名的方法(1)添加class：不会覆盖之前的class值①$(“div”).addClass(“box”);
(2)移除 class
①$("div").removeClass("box");(3)开关效果：没有就添加有则删除①$(“div”).toggleClass(“active”);
9.jQuery操作css样式
(1)获取css样式：
①$("div").css("width");(2)获取css样式①$(“div”).css(“background”,“red”);
(3)同时操作多个样式
① $("div").css("background":"red","width":100,"height":100)(4)同时获取多个样式（低版本的可以）①$(“div”).css([“width”,“height”]);
10.jQuery操作元素内容的方法
(1)html()：设置/获取标签内容，能识别标签
(2)text()：设置/获取标签内容，只会获取到文本，不能识别标签
(3)val()：设置/获取input标签val值
(4)val([‘value’])：设置选择框的选择项
11.jQuery的循环方法
(1)$.each(对象,function(下标,当前项));//可以针对原生，也可以针对jQuery对象①第二个参数是一个函数，这个函数有两个参数，一个是下标，一个是当前项，这个函数中的this也即当前项(2)jQuery对象.each(function(下标,当前项));只能针对jQuery对象①该方法用于循环jQuery对象，这个方法接收一个函数做为参数，这个函数的有两个参数第一个参数为下标，第二个参数为项，这个函数中的this即项12.$.extend
(1)$.extend()方法用于将一个或多个对象的内容合并到目标对象。我们在写插件的过程中也常用到这个方法。
①格式：extend(dest,src1,src2,src3…);将src1,src2,src3…合并到dest中,返回合并后的dest。
(2)如果想要得到合并的结果却又不想修改dest的结构，可以如下使用：
①var newSrc = $.extend(,src1,src2,src3...);//也就是将""作为dest参数。②这样就可以将src1,src2,src3...进行合并，然后将合并结果返回给newSrc了(3)该方法还常用于对象的深度克隆，第一个参数为true，则为深度拷贝①$.extend(true, {}, obj); // 深拷贝

jQuery进阶之DOM BOM 事件操作
1.jQuery操作元素宽高
(1)jQuery对象.width(); width
(2)jQuery对象.innerWidth(); width + padding
(3)jQuery对象.outerWidth(); width + padding + border
(4)jQuery对象.outerWidth(true); width + padding + border + margin
(5)$(window).width():获取可视区宽高(6)$(document).width() : 获取文档宽高
2.获取元素的相对距离
(1)jQuery对象.offset() ： 返回元素相对于body的距离
①var pos = $(’.box3’).offset(); // { top: 88, left: 108 }
(2)jQuery对象.position() ： 返回元素相对于最近的有定位属性的父级的距离，如果没有定位父级，则到body的距离
①var pos = ${(}^{\prime }.box{3}^{\prime }).position();//top:40,left:503.返回元素的滚动条的距离，既可以获取，也可以设置(1)获取①jQuery对象.scrollTop();②jQuery对象.scrollLeft();(2)设置①$(window).scrollTop(500);

Day28
jQuery的DOM操作
1.创建节点
${(}^{\prime }html标{签}^{\prime })2.jQuery追加元素节点的方法(1)在父元素的末尾添加①append：$(父元素).append(新子元素);
②appendTo: $(新子元素).appendTo(父元素)(2)在父元素的开头添加①prepend：$(父元素).prepend(新子元素);
②prependTo：$(新子元素).prependTo(父元素)(3)在某个元素之前插入①before：$(参考元素).before（新子元素）
②insertBefore：$(新子元素).insertBefore(参考节点)(4)在某个元素之后插入①after：$(参考元素).after（新子元素）
②insertAfter:$(新子元素).insertAfter(参考节点)3.删除节点remove:jQuery对象.remove()删除掉调用remove方法的jQuery对象detach:jQuery对象.datach()删除掉调用detach方法的jQuery对象dempty:jQuery对象.dempty()清空调用dempty方法的jQuery对象中所有方法4.替换节点1）replaceAll用来替换的jQuery对象.replaceAll{(}^{\prime }被替换的jQuery对{象}^{\prime })使用jQuery对象替换掉所有满足条件的被替换的jQuery对象2）replaceWith被替换的jQuery对象.replaceWith{(}^{\prime }用来替换jQuery对{象}^{\prime })使用jQuery对象替换掉所有满足条件的被替换的jQuery对象5.克隆节点jQuery对象.clone((不传/false)/true)如果clone方法在传参的时候不传或传入false表示只克隆当前元素及其内容不可隆当前元素绑定的事件如果传入true表示还要克隆事件6.包裹节点(1)jQuery对象.wrap()①$(‘span’).wrap(’

’); // 每个span外面包裹一个div
(2)jQuery对象.wrapAll()
① ${(}^{\prime }spa{n}^{\prime }).wrapAll{(}^{\prime }<div{>}^{\prime });//所有的span外面包裹一个div(3)jQuery对象.wrapInner()①$