Js07进阶
目录
1.1BOM (Browser Object Mode)浏览器对象模型，... 3
1.2 document、location、navigato对象... 3
4.2事件对象:（如果想图便捷，可以都使用e.changedTouches获取信息）... 10
4.5过渡与动画（pc与移动端都适用）（css3事件）... 14
1.BOM对象(浏览器对象模型)
1.1BOM (Browser Object Mode)浏览器对象模型，
是Javascript的重要组成部分。 它提供了一系列对象用于与浏览器窗口进行交互，这些对象通常统称为BOM。
window窗口对象。它表示整个浏览器窗口，主要用来操作浏览器窗口。
同时，window对象还是ECMAScript中的Global对象(全局对象)，因而所有全局变量和函数都是它（window）的属性，且所有原生的构造函数及其它函数也都存在于它的命名空间下。
1.2 document、location、navigato对象
document对象:是window对象的一个属性，可以用来处理页面文档
location对象:用于获得当前页面的地址(URL),并把浏览器重定向到新的页面。
location.herf = 'url地址'
location.hostname返回web主机的域名
location.pathname返回当前页面的路径和文件名
location.port返回web主机的端口(80 或443)
location.portocol返回页面使用的web协议。http:或https:
navigator对象:提供了与浏览器有关的信息。
userAgent是最常用的属性， 用来完成对浏览器的判断。
window.navigator对象在编写时可不使用window这个前缀。
1.3screen对象:用来获取用户的屏幕信息。
Screen对象：
height:获取整个屏幕的高。
width :获取整个屏幕的宽。
availHeight:整个屏幕的高减去系统部件的高(可用的屏幕宽度)
availWidth :整个屏幕的宽减去系统部件的宽(可用的屏幕高度)
history对象:包含浏览器的历史。
back()返回上一页。
forward()返回下一页。
go( "参数" ) -1表示上一页，1表示下一页。
2.Git
2.1历史
很多人都知道, Linus在1991年创建了开源的Linux,从此，Linux系统不断发展， 已经成为最大的服务器系统软件了。
Linus虽然创建了Linux,但Linux的壮大是靠全世界热心的志愿者参与的，这么多人在世界各地为Linux编写代码，那Linux的代码是如何管理的呢?
事实是,在2002年以前，世界各地的志愿者把源代码文件通过diff的方式发给Linus,然后由Linus本人通过手工方式合并代码!
因为很多开发者不断的贡献代码，这样代码越来越多了，就有了管理代码的问题了，所以Linus花了两周时间自己用C写了一个分布式版本控制系统，这就是Git! 一个月之内，Linux系统的源码已经由Git管理了!
Git迅速成为最流行的分布式版本控制系统，尤其是2008年，GitHub网站 上线了，它为开源项目免费提供Git存储，无数开源项目开始迁移至GitHub,后来项目越来越多了，其它系统也就开始支持Git了
windows，mac等系统都已经支持了Git
我们要使用git就要安装客户端.
安装完成，提供了控制台
Git Bash为linux家族(unix, mac等)使用的
Git CMD为window使用的
由于git是为linux提供的，所以建议我们使用linux指令
2.2Linux指令
cd 目录打开目录
ls 查看当前目录文件的
pwd 查看当前目录所在的系统文件路径
mkdir 文件名名称创建文件夹
touch 文件名创建文件的
echo内容>>文件 (向文件中写入内容)
cat 文件查看文件内容
小案例:在D:\class目录下创建一个demo文件夹， 并创建一个file.txt文件， 并写入你好明天
3.Git介绍
3.1Git的三类文件
在git中有三类文件的
第一类文件未纳入缓存的文件（不能被git管理）
这类文件，一旦删除就再也无法找到.
第二类文件是纳入缓存的文件
这类文件，可以通过git找到
第三类文件纳入版本库的文件
这类文件，可以在计算机的各个位置找到
3.2 Git使用
3.2.1 git仓库操作
git init来初始化一个git仓库
当执行该命令之后，会出现一个隐藏的.git文件
objects目录用于存储纳入缓存的文件
refs目录用于存储纳入版本库的文件
我们可以通过git执令实现三类文件的切换
git add文件名称
实现将未纳入缓存的文件变为第二类文件(纳入缓存)，可以通过*将所有文件纳入缓存
$ git rm directives.txt –-cache 移除缓存
git status查看文件的状态
一旦纳入缓存，就有机会纳入版本库
git rm文件名
从版本库中移除文件。
如果添加了--cache,说明是从缓存中移除。
git commit -m“说明”
注意:这个说明一定要有意义
将缓存中的文件，纳入版本库
（版本库会保留当前的状态，文件更新后，版本库不会更新，修改文件后，就得重新缓存，重新添加库版本库）
此时，一旦修改了文件，要通过git status查看一下被修改的是哪个文件
如果想要查看修改的内容，git diff文件
当查看完毕代码没有问题，继续git add,然后git commit -m '说明'
$ git commit -m "add file and index"
3.2.3邮箱与用户名的设置
查看自己的用户名和邮箱地址：
$ git config user.name
$ git config user.email
修改自己的用户名和邮箱地址：
$ git config --global user.name "xxx"
$ git config --global user.email "xxx"
3.2.4恢复历史版本
回退版本:
我们可以通过git reset --hard HEAD^回退到上一个版本，如果想要恢复到上上一个版本HEAD^^,如果想要回到前100个，如果书写100个^ ^比较容易数不清楚，HEAD~100
回到未来:
我们可以通过git reset --hard HEAD commit id实现
一旦将文件纳入版本库，我们可以通过计算机的各个位置去找到文件，但是一旦计算机换掉了，文件就再也找不到了，所以我们要将文件上传到云端(服务器)，这样的话，即使电脑换掉了也可以找到我们想要的文件
3.2.5建立信任关系:
一旦将文件提交到版本库将有机会上传到云端(服务器)
由于你的本地Git仓库和远程仓库之间的传输时通过SSH加密的，所以需要一点设置 :
1.执行指令ssh-keygen -t rsa -C邮箱然后一路回车使用默认值就好
$ ssh-keygen -t rsa -C xxxxxxxx@gmail.com
2.之后进入用户主目录可以找到.ssh目录
（C:/Users/Administrator.USER-20151015SY/.ssh/id_rsa）
Enter file in which to save the key (/c/Users/Administrator.USER-20151015SY/.ssh/id_rsa):
3.打开id_ rsa.pub文件, 复制里面的内容
4.将内容粘贴到gitHub（个人）或者gitlab（企业/付费）上
setting => SSH and GPG keys => add new =>输入标题并粘贴内容
3.2.6上传代码
建立连接:
git remote add origin xxxxxxx@gmail.com:xxxxxx/QAQtest.git
上传代码:
预览项目:
http://htmlpreview.github.io/
我们在输入框中输入项目的首页地址，即可预览项目
克隆项目:
git clone 项目地址即可下载别人的项目
3.2.7多人开发
多人开发的时候，要提交代码要做两件事:拉取代码,合并代码
拉取代码git fetch origin master
从远程主机的master分支拉取最新内容
将拉取下来的最新内容合并到当前所在的分支中
这两个操作可以通过pull来简化:
有重复操作同一行代码时，保留或删除哪行代码，需要自己选择
删除掉不需要的部分（如：下面的为前一个人的版本，我不想要，直接删除即可）
3.2.8小结
-------------------------------单人修改文档后-------------------------------
一.先将文件添加到自己本地的缓存（git add xxx.html）
二.把缓存的文件xxx.html添加到本地的版本库（git commit -m “update index”）注：双引号内写注释，尽量简明
三.再次提交到线上库（git push -u origin master）
-------------------------------多人开发后续具体操作-------------------------------
四.提交到版本库（重复一、二操作）
【五.同步到服务器(git push -u origin master)[如果直接进行这一步会报错]】
五.拉取线上代码（git fetch origin master）
六.合并（前一个人写的）代码（git merge ）
五 + 六 ：git pull origin master（二合一）
七.打开本地代码文件，选择要保留的部分，其余删除
八.重复一、二（ git commit -m "merge index"）、三
3.3主干与分支
分支:不会影响整个项目里面的主线文件:
git分支与主干合并操作
在主干上合并分支:
(master) ：git merge branch --squash
在分支上合并主干:
(branch) ：git merge master --squash
创建功能分支:
(master) git checkout -b feature
合并最新主干代码
1 (feature) git checkout master
2 (master) git pull
3 (master) git checkout feature
4 (feature) git merge master
5解冲突
6 (feature) git commit #
-------------------------------单人修改文档后-------------------------------
一.先将文件添加到自己本地的缓存（git add xxx.html）
二.把缓存的文件xxx.html添加到本地的版本库（git commit -m “update index”）注：双引号内写注释，尽量简明
三.再次提交到线上库（git push -u origin master）
-------------------------------多人开发后续具体操作-------------------------------
四.提交到版本库（重复一、二操作）
【五.同步到服务器(git push -u origin master)[如果直接进行这一步会报错]】
五.拉取线上代码（git fetch origin master）
六.合并（前一个人写的）代码（git merge ）
五 + 六 ：git pull origin master（二合一）
七.打开本地代码文件，选择要保留的部分，其余删除
八.重复一、二（ git commit -m "merge index"）、三
-------------------------------分支开发具体操作流程-------------------------------
AB同时拉取线上版本库，C在线上版本上拉去分支
A开发完毕，直接提交
B开发完毕的时候，A已经提交了，因此要拉去线上版本库，合并本地版本库再提交
A开发完毕的时候，B已经提交了，因此要拉去线上版本库，合并本地版本库再提交
c单独维护分支，因此直接提交自己的代码，不用拉去代码与合并代码。等到所有功能开发完，再次性的拉去 最新的主干，然后将代码合并，再同步主干。
3.4Git指令
查看分支: git branch
创建分支: git branch <name>
切换分支: git checkout <name>
创建+切换分支: git checkout -b <name>
合并某分支到当前分支: git merge <name>
删除分支: git branch -d <name>
Git pull将远程主机的最新内容拉下来后直接合并可能会出现冲突
4.移动端
4.1touch事件
touch事件
在移动端新增了touch事件,
注意:手指的行为叫做'触摸’, 鼠标的行为叫做‘点击’,
在移动端仍然支持点击事件，但会有200~ 300ms之间的延迟，是为了检测是否是双击
touchstart
该事件会在触摸的时候触发
绑定方式: dom.addEventListener( 'touchstart' , fn)
touchend
该事件会在触摸结束的时候被触发
绑定方式: dom.addEventListener( 'touchend’, fn)
Touchmove（高频事件，类似mousemove）
该事件会在触摸移动的时候触发
绑定方式: dom.addEventListener( 'touchmove' , fn)
touchcancel
当触摸点被中断时会触发touchcancel事件，中断方式有很多种。(模拟器: alt + tab )
绑定方式: dom.addEventListener( 'touchcancel' , fn)
一旦触发该事件（触摸被取消），touchend将不被执行
4.2事件对象:（如果想图便捷，可以都使用e.changedTouches获取信息）
e.touches
在touchstart和touchmove事件中，指示手指相关信息的属性:
在touchend事件中，指示手指相关信息的属性
/**
* 移动端
* 1.首先，当按下手指且未抬起手指时，触发ontouchstart事件
* 2.手指拿起时，触发ontouchend事件
* 3.几乎是同时，执行click事件（慢几毫秒或者同时，但依旧是ontouchend事件先执行）
* 如果手指按了较长时间，click事件则会被取消执行
* 一旦触发该事件（touchcancel），touchend将不被执行
*
* 在移动端，
* 我们常用touch事件。click点击有延迟，事件触发的较晚
*
* **/
//获取时间
var date = Date.now();
//帮绑定事件
box.onclick = function () {
console.log('click');
}
//绑定touch事件
//开始点击，开始触摸
box.ontouchstart = function (e) {
console.log('touch start', e.touches[0].clientX);
//注意：所有的触摸，都需要注明是第几个触摸点的位置，才能获取到信息
}
//触摸结束
box.ontouchend = function (e) {
console.log('touch end', e.changedTouches[0].clientX);
}
// touch start 683 // touch end 763 // click 764
//触摸移动//高频事件
box.ontouchmove = function (e) {
console.log('ontouchmove', e.touches[0].clientX);
}
//touch事件被取消
box.ontouchcancel = function (e) {
console.log('ontouchcancel', e.touches);
}4.3点击穿透
4.3.1多页面穿透
/**点击穿透：问题描述
*问题：
* 点击浮层关闭按钮时，也点击了页面上对应位置的元素（正常是不应该点击到页面上的对应的元素的）
*原因：
* 1.触屏设备为了区分用户双击缩放，对 click 做了 300ms 延迟触发，其在移动端的操作流程为
*
* 2.手指触碰到屏幕时，触发 touchstart , 弹窗隐藏
* 3.手指按上时，可能会有短暂的停留和轻微的移动，触发 touchmove
* 4.手指离开屏幕时，触发 touchend
* 5.等待 300ms 后，看用户在此时间内是否再次触摸屏幕，如果没有
* 6.300ms 后，此时弹窗已消失，浏览器在用户手指离开的位置触发 click 事件，所以点到了页面上的元素
*
**/
// child.ontouchstart = function () {
// console.log('ontouchstart child');
// //希望显示demo页面
// location.href = './02.3demo.html'
// }
// //解决：
// //法一：等手弹起来（ontouchend）之后，再切换页面
// // child.ontouchstart;
// child.ontouchend = function () {
// console.log('ontouchend child');
// //希望显示demo页面
// location.href = './02.3demo.html'
// }
//法二：延迟300ms，保证touch事件触发完成，再切换页面
child.ontouchstart = function () {
console.log('ontouchend child');
//希望显示demo页面
setTimeout(function () {
location.href = './02.3.2demo.html'
}, 300)
}4.3.2单页面多元素穿透
<style>
#child { width: 400px; height: 100px; background-color: pink;}
#box1,#box2{width: 200px;height: 200px; background-color: powderblue;}
#box2 {background-color: purple; }</style>
</head>
<body>
<div id="child"></div>
<hr>
<div id="box1"></div>
<div id="box2"></div>
<script>
//点击蓝色元素，使之消失
//为box2 绑定click事件
box2.addEventListener('click', function () {
console.log('click box2');
})
//为box1 绑定 touch事件//隐藏元素
// box1.addEventListener('touchstart', function () {
// box1.style.display = 'none';
// //触发了穿透现象：点击该事件且正常触发后，仍然触发了box2点击事件
// console.log('touch box1');
// })
//解决：和多页面的解决方法相似
//法一：改touchstart为touchend事件//该方法在当前测试环境不行//改为click可解决
// box1.addEventListener('click', function () {
// box1.style.display = 'none';
// //触发了穿透现象：点击该事件且正常触发后，仍然触发了box2点击事件
// console.log('touch box1');
// })
//法二：延迟300ms触发touchstart事件
box1.ontouchstart = function () {
setTimeout(() => {
box1.style.display = 'none';
}, 300)
console.log('ontouchend box1');
}
</script>4.5过渡与动画（pc与移动端都适用）（css3事件）
过渡事件
当一个元素过渡开始的时候会触发一个事件: transitionstart事件
在一个元素过渡完成之后会触发一个事件: transitionend事件
动画事件
在一个元素动画开始的时候会触发一个事件: animationstart事件
在一个元素动画结束之后会触发一个事件: animationend事件
正是由于js中可以订阅css3过渡与动画事件，因此就可以在js中捕获css3过渡与动画的状态
5.Zepto
5.1zepto概述
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，它与jquery有着
类似的api。如果你会用jquery, 那么你也会用zepto。参考网址:
Zepto.js: 轻量且兼容 jQuery API 的 JavaScript 工具库 | Zepto.js 中文网
zepto是分为模块化的，天生不具备animate函数，如果想要使用animate
函数要下载fx模块
<h1>hello QAQ</h1>
<script src="./zepto开发版本.js"></script>
<script src="./fx.js"></script>
<script>
//主要应运在移动端
$('h1').attr('title', '阿伟死了');
//绑定事件
$('h1').on('touchstart', function () {
console.log('click');
})
//设置样式
$('h1').css({
position: 'absolute',
top: 0
})
/**
* 添加动画
* 虽然是在js中调用，但仍使用的是CSS动画
* **/
$('h1').animate({
top: 300
}, 1000)5.2zepto的touch模块
如果想要使用移动端的事件要下载touch模块。在touch模块中自定义了一些移动端的事件
tap:触碰 swipe:滑动
singleTap:单击 swipeLeft:左滑动
longTap:长按 swipeRight:右滑动
doubleTap:双击 swipeUp:.上滑动
swipeDown:'下滑动
这些方法可以通过以下方式绑定:
$(dom).on(type, fn) $(dom).type(fn)
<div class="box">Hello QAQ</div>
<script src="./zepto开发版本.js"></script>
<script src="./fx.js"></script>
<script src="./touch.js"></script>
<script>
$('div.box').css({
width: 200,
height: 200,
background: 'pink'
})
//绑定轻拍事件
$('.box').tap(function () {
console.log('tap111');
})
//通过on订阅
$('.box').on('tap', function () {
console.log('tap222');
})
//长按（时间是750ms）
$('.box').longTap(function () {
console.log('longTap');
})
//双拍
$('.box').doubleTap(function () {
console.log('doubleTap');
})
//单拍
$('.box').singleTap(function () {
console.log('singleTap');
})
//滑动
$('.box').swipe(function () {
console.log('swipe');
})
//左滑
$('.box').swipeLeft(function () {
console.log('swipeLeft');
})5.3例子：百度地图
假如在工作中，突然有一天领导过来交代一个任务，在一个页面中显示出地图并且要在地图中显示自己公司的位置，现成的地图都有:高德地图、百度地图、谷歌地图、腾讯地图
假如要显示百度地图，我们要找到百度地图API:
1进入百度地图官网，注册账号
2申请ak密钥
3在页面中弓|入百度地图脚本文件
4使用百度地图API
<script type="text/javascript" src= " https://api.map.baidu.com/api?v=3.0&ak=此处输入密钥"> </script>
742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
