|
var a = 1;
|
|
zhangxinyin 0:05:59
function fn(){
var a = 100: function a(){ } } 问 |
|
zhangxinyin 0:06:04
console.log(a=???)
|
|
zhangxinyin 0:06:18
fn();
|
|
木頭 0:07:39
function a(){ }这个a跟变量的a没关系的吧
|
|
zhangxinyin 0:10:40
var goo=1
function bar() { goo = 10; function goo(){} } bar(); console.log(goo);关键问题是最后输出结果是1而不是10 |
|
zhangxinyin 0:10:44
别人问的
|
|
zhangxinyin 0:10:48
你看看这种题目很简单
|
|
zhangxinyin 0:10:56
必须不是10
|
|
zhangxinyin 0:11:04
你看 它做了什么事情
|
|
zhangxinyin 0:11:09
function goo(){}
|
|
zhangxinyin 0:11:21
既然已经这样了
|
|
zhangxinyin 0:11:30
说名goo 已经在局部定义了
|
|
zhangxinyin 0:11:33
那么goo = 10
|
|
zhangxinyin 0:11:37
不是全局了
|
|
zhangxinyin 0:11:38
肯定等于1
|
|
zhangxinyin 0:11:40
ok？
|
|
zhangxinyin 0:11:53
这种小问题
|
|
木頭 0:12:30
嗯
|
|
zhangxinyin 0:12:51
这个 function goo(){} 会被提升到函数顶部
|
|
zhangxinyin 0:12:53
我也说过
|
|
zhangxinyin 0:13:04
var goo=1
function bar() { goo = 10; console.log(goo); function goo(){} console.log(goo); } bar(); console.log(goo); |
|
zhangxinyin 0:13:16
如果没有 function goo()
|
|
zhangxinyin 0:13:28
那么
|
|
zhangxinyin 0:13:35
就是10
|
|
zhangxinyin 0:13:45
不过你想想
|
|
zhangxinyin 0:13:52
面试怎么可能给你做那么简单的题目呢
|
|
首先是window对象
|
|
zhangxinyin 19:40:43
是最顶层的
|
|
zhangxinyin 19:40:59
document 也属于window
|
|
zhangxinyin 19:41:01
ok？
|
|
zhangxinyin 19:41:05
document也是对象
|
|
木頭 19:41:08
ok
|
|
zhangxinyin 19:41:27
直接打出来看就行了
|
|
zhangxinyin 19:42:04
|
|
zhangxinyin 19:42:06
history
|
|
zhangxinyin 19:42:13
|
|
zhangxinyin 19:42:14
document
|
|
zhangxinyin 19:42:17
都是它的对象
|
|
zhangxinyin 19:42:36
screen
|
|
zhangxinyin 19:42:37
根本不用
|
|
zhangxinyin 19:42:46
|
|
zhangxinyin 19:42:52
这个是screen下面的属性
|
|
zhangxinyin 19:42:53
懂？
|
|
zhangxinyin 19:43:00
你想拿到 颜色深度
|
|
zhangxinyin 19:43:05
就这样啊
|
|
木頭 19:43:09
screen是屏幕分辨率的吗
|
|
zhangxinyin 19:43:17
屏幕啊
|
|
zhangxinyin 19:43:27
你直接console
|
|
zhangxinyin 19:43:31
window
|
|
zhangxinyin 19:43:34
然后找到 screen对象
|
|
zhangxinyin 19:43:43
|
|
zhangxinyin 19:43:44
ok？
|
|
木頭 19:43:45
ok
|
|
zhangxinyin 19:43:51
它下面很多属性不就有了吗
|
|
zhangxinyin 19:43:53
一看就知道了
|
|
zhangxinyin 19:44:02
颜色深度 24
|
|
zhangxinyin 19:44:09
如何获取？
|
|
zhangxinyin 19:44:11
简单
|
|
zhangxinyin 19:44:53
就这样啊
|
|
zhangxinyin 19:44:58
你以为呢？
|
|
zhangxinyin 19:45:03
所以自己要学会看
|
|
zhangxinyin 19:45:49
找到这个对象 点开
|
|
zhangxinyin 19:45:51
属性方法都有
|
|
zhangxinyin 19:45:56
比如location对象
|
|
木頭 19:46:02
ok
|
|
zhangxinyin 19:46:12
|
|
zhangxinyin 19:46:14
不都有吗
|
|
zhangxinyin 19:46:25
比如当前 主机 port 端口
|
|
zhangxinyin 19:46:28
都有啊
|
|
zhangxinyin 19:46:32
你直接获取啊
|
|
zhangxinyin 19:47:05
我这里是localhost
|
|
zhangxinyin 19:47:13
|
|
木頭 19:47:59
明白了，就是对象所有的属性，方法都在里面
|
|
zhangxinyin 19:48:07
你可以自己看啊
|
|
zhangxinyin 19:48:09
event也一样
|
|
zhangxinyin 19:48:33
比如location.href
|
|
zhangxinyin 19:48:35
跳转
|
|
zhangxinyin 19:48:36
不要说了吧
|
|
zhangxinyin 19:48:46
一打开
|
|
zhangxinyin 19:48:50
跳到美丽说了
|
|
zhangxinyin 19:49:10
我只说常用的
|
|
zhangxinyin 19:49:12
hash
|
|
是什么
|
|
zhangxinyin 19:49:19
hash是 ＃ 后面的
|
|
zhangxinyin 19:50:02
明白？
|
|
木頭 19:50:29
明白，每个链接都有hash是吗
|
|
zhangxinyin 19:50:36
不是的
|
|
zhangxinyin 19:50:48
hash可以做配合ajax做单页切换
|
|
zhangxinyin 19:50:55
因为这样就不需要整页刷新了啊
|
|
木頭 19:51:00
哦
|
|
zhangxinyin 19:51:01
我重要你某个部分
|
|
zhangxinyin 19:51:19
比如
|
|
zhangxinyin 19:51:21
我点第一个
|
|
zhangxinyin 19:51:25
那么就是#part1
|
|
zhangxinyin 19:51:26
你看小米
|
|
木頭 19:54:31
不要4咯，直接小米咯
|
|
zhangxinyin 19:54:34
我忘记了
|
|
zhangxinyin 19:54:54
在这看我点击
|
|
zhangxinyin 19:55:03
|
|
zhangxinyin 19:55:10
|
|
zhangxinyin 19:55:12
ok？
|
|
zhangxinyin 19:55:28
你可以通过js 来处理
|
|
木頭 19:55:33
它们不是都在同一个页面的吗
|
|
zhangxinyin 19:55:36
是的呀
|
|
zhangxinyin 19:55:37
但是你想啊
|
|
zhangxinyin 19:55:44
不然有些地方要ajax
|
|
zhangxinyin 19:55:52
你要全局刷新？
|
|
zhangxinyin 19:55:58
没必要吧
|
|
zhangxinyin 19:56:01
我只要这一部分的
|
|
木頭 19:56:04
明白了
|
|
zhangxinyin 19:56:11
我通过 #fea-five
|
|
zhangxinyin 19:56:16
我就知道我在第几个页面了
|
|
zhangxinyin 19:56:35
|
|
zhangxinyin 19:56:39
效果很简单
|
|
zhangxinyin 19:56:41
－500%
|
|
zhangxinyin 19:56:45
我估计下面就－1000%了
|
|
zhangxinyin 19:56:52
－600％
|
|
zhangxinyin 19:56:58
那么下面就是 －700%了
|
|
zhangxinyin 19:57:00
可以猜的
|
|
zhangxinyin 19:57:06
看到没
|
|
zhangxinyin 19:57:11
第一个就是0%
|
|
木頭 19:57:23
看到
|
|
zhangxinyin 19:57:24
自己去猜
|
|
zhangxinyin 19:57:35
所以这个elements非常重要
|
|
zhangxinyin 19:57:43
你猜猜就知道它怎么做的了
|
|
zhangxinyin 19:57:59
下一个
|
|
zhangxinyin 19:58:06
location就说到这里
|
|
zhangxinyin 19:58:08
其他不常用
|
|
zhangxinyin 19:58:10
就一个跳转
|
|
zhangxinyin 19:58:11
hash
|
|
zhangxinyin 19:58:25
history
|
|
zhangxinyin 19:58:28
就不用说了吧
|
|
zhangxinyin 19:58:35
什么前一页 后一页
|
|
木頭 19:58:52
就是浏览器的历史记录吗
|
|
zhangxinyin 19:59:08
你看好
|
|
zhangxinyin 19:59:13
我go(-1_
|
|
zhangxinyin 19:59:13
)
|
|
zhangxinyin 19:59:32
http://localhost/bom/location3.html#part1
|
|
zhangxinyin 19:59:39
是不是到#part1了？
|
|
zhangxinyin 19:59:41
我继续
|
|
zhangxinyin 19:59:43
go(1)
|
|
zhangxinyin 20:00:22
明白？
|
|
你看啊现在是sdfdfsf
|
|
zhangxinyin 20:00:33
我go(-1_
|
|
木頭 20:00:48
明白了
|
|
zhangxinyin 20:00:53
其实很少用
|
|
zhangxinyin 20:00:58
h5有个 pushstate
|
|
zhangxinyin 20:01:04
专门操作历史纪录的
|
|
zhangxinyin 20:01:15
pushstate + ajax + hash 做单页
|
|
zhangxinyin 20:01:47
navigator对象
|
|
zhangxinyin 20:01:52
常见的
|
|
zhangxinyin 20:01:56
比如 geolocation
|
|
zhangxinyin 20:02:03
h5的地理位置
|
|
zhangxinyin 20:02:08
稍后会说
|
|
zhangxinyin 20:02:15
onLine 判断用户是不是离线
|
|
zhangxinyin 20:02:18
还是在线
|
|
zhangxinyin 20:02:26
常见的
|
|
zhangxinyin 20:02:30
就是 userAgent
|
|
zhangxinyin 20:02:34
你都看的到的
|
|
zhangxinyin 20:02:35
懂？
|
|
zhangxinyin 20:02:45
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36"
|
|
zhangxinyin 20:02:46
下面都有
|
|
zhangxinyin 20:03:00
比如要判断是 android 还是 ios
|
|
zhangxinyin 20:03:08
var isAndroid = /android/i.test(navigator.userAgent);
|
|
zhangxinyin 20:03:17
写个正则去判断下
|
|
zhangxinyin 20:03:32
这种东西网上多的是
|
|
zhangxinyin 20:03:47
你只要知道navigator
|
|
zhangxinyin 20:03:48
对象
|
|
zhangxinyin 20:03:52
有个userAgent属性
|
|
zhangxinyin 20:03:54
是判断客户端的
|
|
zhangxinyin 20:04:00
用户代理的
|
|
zhangxinyin 20:04:05
比如你用的是 ipad
|
|
zhangxinyin 20:04:08
android
|
|
zhangxinyin 20:04:13
还是chrome
|
|
zhangxinyin 20:04:14
firefox
|
|
zhangxinyin 20:04:15
等等
|
|
zhangxinyin 20:04:24
比如你是用的 ipad
|
|
木頭 20:04:35
那判断浏览器就是用它吗
|
|
zhangxinyin 20:04:37
那么我就根据给我的客户端
|
|
zhangxinyin 20:04:49
我就给你用 location.href= "m.taobao.com"
|
|
zhangxinyin 20:04:51
懂吧
|
|
zhangxinyin 20:04:59
确实是这样的啊
|
|
zhangxinyin 20:05:03
你看我同样访问淘宝网
|
|
zhangxinyin 20:05:16
pc
|
|
zhangxinyin 20:05:18
是这样的
|
|
zhangxinyin 20:05:34
你在看看
|
|
zhangxinyin 20:05:40
|
|
zhangxinyin 20:06:00
明白？
|
|
木頭 20:06:06
明白了
|
|
zhangxinyin 20:06:11
几个对象介绍完了
|
|
zhangxinyin 20:06:15
document 不说了吧
|
|
zhangxinyin 20:06:22
比如document.getElementById
|
|
zhangxinyin 20:06:23
...
|
|
zhangxinyin 20:06:32
它下面有恨多方法
|
|
zhangxinyin 20:06:35
你可以自己看
|
|
zhangxinyin 20:07:18
document就是整个文档
|
|
zhangxinyin 20:07:51
这样bom就说完了
|
|
zhangxinyin 20:07:53
没问题吧
|
|
zhangxinyin 20:07:56
其他的东西别看来
|
|
zhangxinyin 20:07:57
了
|
|
zhangxinyin 20:07:59
用不上
|
|
zhangxinyin 20:08:02
什么屏幕分辨率
|
|
clientHeight和clientWidth用于描述元素内尺寸，是指元素内容+内边距大小，不包括边框（低版本IE下实际包括）、外边距、滚动条部分
|
|
zhangxinyin 20:12:18
有边框吗？
|
|
zhangxinyin 20:12:24
没有 那更简单了
|
|
zhangxinyin 20:12:28
各自－10
|
|
zhangxinyin 20:12:52
兼容性 我不说了
|
|
zhangxinyin 20:13:00
我现在所有的都考虑新版本
|
|
zhangxinyin 20:13:18
ok？
|
|
zhangxinyin 20:13:26
这样4个就学会了
|
|
zhangxinyin 20:13:29
你用jquery更简单
|
|
zhangxinyin 20:13:36
width()
|
|
zhangxinyin 20:13:46
人家都帮你做好兼容了
|
|
zhangxinyin 20:14:00
现在你知道什么 意思 jquery我一节课要说掉恨多
|
|
zhangxinyin 20:14:05
因为js有兼容性问题
|
|
zhangxinyin 20:14:09
jquery兼容性都做好了
|
|
zhangxinyin 20:14:11
放心用
|
|
zhangxinyin 20:14:23
offsetParent对象是指元素最近的定位（relative,absolute,fixed）祖先元素，递归上溯，如果没有祖先元素是定位的话，会返回null
|
|
zhangxinyin 20:14:50
是body
|
|
zhangxinyin 20:15:12
你觉得太简单了
|
|
zhangxinyin 20:15:14
来个复杂点的
|
|
zhangxinyin 20:15:57
也是body为神马呢
|
|
zhangxinyin 20:16:03
因为最近的元素没有定位啊
|
|
zhangxinyin 20:16:14
比如我给div加一个定位
|
|
zhangxinyin 20:16:47
ok?
|
|
木頭 20:16:54
只返回有定位的父元素是吧，ok
|
|
zhangxinyin 20:17:01
但是又兼容性的问题
|
|
zhangxinyin 20:17:14
没有就网上找啊
|
|
zhangxinyin 20:17:23
那我问你
|
|
zhangxinyin 20:17:26
body的呢？
|
|
zhangxinyin 20:17:30
html吧
|
|
是不是到头了？
|
|
zhangxinyin 20:18:44
offsetParent对象是指元素最近的定位（relative,absolute,fixed）祖先元素，递归上溯，如果没有祖先元素是定位的话，会返回null
|
|
木頭 20:18:53
是吧
|
|
zhangxinyin 20:19:03
offsetParent一般用语
|
|
zhangxinyin 20:19:12
这个元素到某个元素的距离‘
|
|
zhangxinyin 20:19:13
懂吧
|
|
zhangxinyin 20:19:30
某个元素到body距离
|
|
zhangxinyin 20:19:39
你想啊
|
|
zhangxinyin 20:19:42
你要做个 楼层的
|
|
zhangxinyin 20:19:47
1楼 服装
2楼 xxx |
|
zhangxinyin 20:20:04
你是不是要得到它到最顶端的距离？
|
|
木頭 20:20:11
嗯
|
|
zhangxinyin 20:20:14
那你要加起来的
|
|
zhangxinyin 20:20:24
可能
|
|
zhangxinyin 20:20:27
每天就做这个案例
|
|
zhangxinyin 20:20:37
今天这些东西都要掌握
|
|
zhangxinyin 20:20:42
offsetLeft
|
|
zhangxinyin 20:21:11
offsetTop
|
|
zhangxinyin 20:21:17
我想问下
|
|
zhangxinyin 20:21:26
div -> body (offsetLeft）多少
|
|
zhangxinyin 20:21:28
简单
|
|
zhangxinyin 20:21:29
50
|
|
zhangxinyin 20:21:52
offsetTop和offsetLeft表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离
|
|
zhangxinyin 20:22:04
div的offsetParent是 body吧
|
|
zhangxinyin 20:22:14
那么离它左上角距离多少呢
|
|
zhangxinyin 20:22:16
明显吧
|
|
zhangxinyin 20:22:17
50
|
|
zhangxinyin 20:22:20
margin50
|
|
zhangxinyin 20:22:28
top呢
|
|
zhangxinyin 20:22:29
也是
|
|
木頭 20:22:35
就是外边距吗
|
|
zhangxinyin 20:22:58
看下去
|
|
zhangxinyin 20:22:59
span呢？
|
|
zhangxinyin 20:23:17
不是margin
|
|
zhangxinyin 20:23:26
只要有边距
|
|
zhangxinyin 20:23:29
为什么span不是70呢
|
|
zhangxinyin 20:23:37
因为 span的offsetParent是div
|
|
zhangxinyin 20:23:42
懂？
|
|
zhangxinyin 20:23:49
有20个px padding
|
|
zhangxinyin 20:23:54
所以我加了个颜色
|
|
zhangxinyin 20:23:57
如果 我去掉定位
|
|
木頭 20:24:01
懂了，就是它跟父元素的距离
|
|
zhangxinyin 20:24:05
不是父元素
|
|
zhangxinyin 20:24:10
父元素是 parentNode
|
|
zhangxinyin 20:24:20
有定位的父元素是 offsetParent
|
|
zhangxinyin 20:24:22
概念不一样
|
|
zhangxinyin 20:24:24
我去掉呢
|
|
zhangxinyin 20:24:34
我去掉的话就是70
|
|
zhangxinyin 20:24:43
你说为什么是75
|
|
zhangxinyin 20:24:46
还有边框
|
|
木頭 20:24:55
去掉定位?
|
|
zhangxinyin 20:25:05
我去掉了div的 relative
|
|
zhangxinyin 20:25:12
那么span的offsetParent是body
|
|
zhangxinyin 20:25:17
|
|
zhangxinyin 20:25:46
那么肯定是 75
|
|
zhangxinyin 20:25:52
50margin + 5 border + 20padding
|
|
zhangxinyin 20:26:01
ok
|
|
木頭 20:26:05
ok
|
|
zhangxinyin 20:26:06
如果
|
|
zhangxinyin 20:26:10
有定位父级是div
|
|
是不是到头了？
|
|
zhangxinyin 20:18:44
offsetParent对象是指元素最近的定位（relative,absolute,fixed）祖先元素，递归上溯，如果没有祖先元素是定位的话，会返回null
|
|
木頭 20:18:53
是吧
|
|
zhangxinyin 20:19:03
offsetParent一般用语
|
|
zhangxinyin 20:19:12
这个元素到某个元素的距离‘
|
|
zhangxinyin 20:19:13
懂吧
|
|
zhangxinyin 20:19:30
某个元素到body距离
|
|
zhangxinyin 20:19:39
你想啊
|
|
zhangxinyin 20:19:42
你要做个 楼层的
|
|
zhangxinyin 20:19:47
1楼 服装
2楼 xxx |
|
zhangxinyin 20:20:04
你是不是要得到它到最顶端的距离？
|
|
木頭 20:20:11
嗯
|
|
zhangxinyin 20:20:14
那你要加起来的
|
|
zhangxinyin 20:20:24
可能
|
|
zhangxinyin 20:20:27
每天就做这个案例
|
|
zhangxinyin 20:20:37
今天这些东西都要掌握
|
|
zhangxinyin 20:20:42
offsetLeft
|
|
zhangxinyin 20:21:11
offsetTop
|
|
zhangxinyin 20:21:17
我想问下
|
|
zhangxinyin 20:21:26
div -> body (offsetLeft）多少
|
|
zhangxinyin 20:21:28
简单
|
|
zhangxinyin 20:21:29
50
|
|
zhangxinyin 20:21:52
offsetTop和offsetLeft表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离
|
|
zhangxinyin 20:22:04
div的offsetParent是 body吧
|
|
zhangxinyin 20:22:14
那么离它左上角距离多少呢
|
|
zhangxinyin 20:22:16
明显吧
|
|
zhangxinyin 20:22:17
50
|
|
zhangxinyin 20:22:20
margin50
|
|
zhangxinyin 20:22:28
top呢
|
|
zhangxinyin 20:22:29
也是
|
|
木頭 20:22:35
就是外边距吗
|
|
zhangxinyin 20:22:58
看下去
|
|
zhangxinyin 20:22:59
span呢？
|
|
zhangxinyin 20:23:17
不是margin
|
|
zhangxinyin 20:23:26
只要有边距
|
|
zhangxinyin 20:23:29
为什么span不是70呢
|
|
zhangxinyin 20:23:37
因为 span的offsetParent是div
|
|
zhangxinyin 20:23:42
懂？
|
|
zhangxinyin 20:23:49
有20个px padding
|
|
zhangxinyin 20:23:54
所以我加了个颜色
|
|
zhangxinyin 20:23:57
如果 我去掉定位
|
|
木頭 20:24:01
懂了，就是它跟父元素的距离
|
|
zhangxinyin 20:24:05
不是父元素
|
|
zhangxinyin 20:24:10
父元素是 parentNode
|
|
zhangxinyin 20:24:20
有定位的父元素是 offsetParent
|
|
zhangxinyin 20:24:22
概念不一样
|
|
zhangxinyin 20:24:24
我去掉呢
|
|
zhangxinyin 20:24:34
我去掉的话就是70
|
|
zhangxinyin 20:24:43
你说为什么是75
|
|
zhangxinyin 20:24:46
还有边框
|
|
木頭 20:24:55
去掉定位?
|
|
zhangxinyin 20:25:05
我去掉了div的 relative
|
|
zhangxinyin 20:25:12
那么span的offsetParent是body
|
|
zhangxinyin 20:25:17
|
|
zhangxinyin 20:25:46
那么肯定是 75
|
|
zhangxinyin 20:25:52
50margin + 5 border + 20padding
|
|
zhangxinyin 20:26:01
ok
|
|
木頭 20:26:05
ok
|
|
zhangxinyin 20:26:06
如果
|
|
zhangxinyin 20:26:10
有定位父级是div
|
|
就是20
|
|
zhangxinyin 20:26:28
padding啊
|
|
zhangxinyin 20:26:29
必须的
|
|
木頭 20:27:00
这些一般是做什么用的呀
|
|
zhangxinyin 20:27:06
比如有个相册
|
|
zhangxinyin 20:27:13
左 右
|
|
zhangxinyin 20:27:24
你怎么知道你点击图片
|
|
zhangxinyin 20:27:26
是在左边
|
|
zhangxinyin 20:27:29
还是右边
|
|
zhangxinyin 20:27:32
ok？
|
|
zhangxinyin 20:27:44
那你是不是要加上 offsetLeft?
|
|
木頭 20:27:49
ok
|
|
zhangxinyin 20:28:05
如果你鼠标的位置 > photo.offsetLeft + photo.本身宽度的 / 2
|
|
zhangxinyin 20:28:11
那么就在右边了啊
|
|
zhangxinyin 20:28:14
ok？
|
|
木頭 20:28:22
ok
|
|
zhangxinyin 20:28:41
鼠标位置好拿吧
|
|
zhangxinyin 20:28:45
evt.clientX
|
|
zhangxinyin 20:29:05
这个到案例了会说的
|
|
zhangxinyin 20:29:10
其实和选项卡差不多
|
|
zhangxinyin 20:29:15
就是多了这么个东西
|
|
木頭 20:29:20
好
|
|
zhangxinyin 20:29:34
scrollLeft和scrollTop是指元素滚动条位置，它们是可写的
|
|
zhangxinyin 20:29:43
比如你想知道
|
|
zhangxinyin 20:29:48
你滚动了多少距离
|
|
zhangxinyin 20:29:55
一般 竖着滚动多
|
|
zhangxinyin 20:30:00
也就是 scrollTop
|
|
zhangxinyin 20:30:11
那你怎么知道你滚动了多少？
|
|
zhangxinyin 20:30:13
或者 有时候
|
|
zhangxinyin 20:30:20
你要加上这段距离怎么办？
|
|
zhangxinyin 20:30:27
那就通过这个来获取
|
|
zhangxinyin 20:30:32
我就举一个例子
|
|
zhangxinyin 20:31:38
加个高度
|
|
zhangxinyin 20:31:42
我开始滚动了哦
|
|
zhangxinyin 20:31:53
差不多了
|
|
zhangxinyin 20:31:54
我点击
|
|
zhangxinyin 20:32:02
0
|
|
zhangxinyin 20:32:04
为什么是0
|
|
zhangxinyin 20:32:08
因为有兼容性问题
|
|
zhangxinyin 20:32:13
这个要用body
|
|
zhangxinyin 20:32:33
996
|
|
zhangxinyin 20:32:35
明白？
|
|
zhangxinyin 20:32:38
这个有什么用
|
|
zhangxinyin 20:32:44
还记得回到顶部吗
|
|
zhangxinyin 20:32:46
直接设置0
|
|
zhangxinyin 20:32:48
不就完事了吗
|
|
zhangxinyin 20:32:54
比如我改下代码
|
|
zhangxinyin 20:33:04
这个可以设置的
|
|
zhangxinyin 20:33:33
很下面了吧
|
|
zhangxinyin 20:33:36
我点了哦
|
|
zhangxinyin 20:33:43
到上面来了
|
|
zhangxinyin 20:33:57
我做的详细点吧
|
|
zhangxinyin 20:35:12
当我一点击
|
|
zhangxinyin 20:35:15
就回到顶部
|
|
木頭 20:35:20
明白了
|
|
zhangxinyin 20:35:53
现在只是介绍这些知识点
|
|
zhangxinyin 20:36:00
到时候要用的
|
|
zhangxinyin 20:36:10
然后
|
|
zhangxinyin 20:36:17
怎么获取浏览器 可视区宽度
|
|
zhangxinyin 20:37:10
现在是1120 x 280
|
|
那我缩小
|
|
zhangxinyin 20:37:25
看到了吗
|
|
木頭 20:37:30
看到
|
|
zhangxinyin 20:37:35
585 "x" 151
|
|
zhangxinyin 20:37:41
那你 在 resized俄时候
|
|
zhangxinyin 20:37:44
要重新设置元素的位置
|
|
zhangxinyin 20:37:45
懂？
|
|
zhangxinyin 20:37:52
因为这个宽度会变
|
|
zhangxinyin 20:38:11
function getViewPortSize(w) {
var w = w || window; if (w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight }; var d = w.document; if (document.compatMode == "CSS1Compat") return { w: d.documentElement.clientWidth, h: d.documentElement.clientHeight }; return { w: d.body.clientWidth, h: d.body.clientHeight }; } |
|
zhangxinyin 20:38:25
IE浏览器 innerWidth
|
|
zhangxinyin 20:38:33
那么有些支持 clientWidth
|
|
zhangxinyin 20:38:38
那么就写一个兼容性函数
|
|
zhangxinyin 20:38:40
懂吧
|
|
zhangxinyin 20:38:43
用的时候恨简单
|
|
zhangxinyin 20:39:39
是不是一样的
|
|
zhangxinyin 20:39:42
只是做了兼容处理
|
|
zhangxinyin 20:39:44
做成了函数
|
|
zhangxinyin 20:39:51
这样不用我说了吧
|
|
zhangxinyin 20:39:55
和 addEvent 一样
|
|
zhangxinyin 20:39:57
自己封装一个
|
|
zhangxinyin 20:40:06
这个网上多的是
|
|
zhangxinyin 20:40:09
封装好调用就行了
|
|
zhangxinyin 20:40:11
没必要
|
|
zhangxinyin 20:40:13
每次写那么长
|
|
zhangxinyin 20:40:24
我函数名 一调用多方便
|
|
zhangxinyin 20:40:41
function getScrollOffsets(w) {
var w = w || window; if (w.pageXoffset != null) { return { x: w.pageXoffset, y: pageYoffset }; } var doc = w.document; if (document.compatMode == "CSS1Compat"){ return { x: doc.documentElement.scrollLeft, y: doc.documentElement.scrollTop }; } return { x: doc.body.scrollLeft, y: doc.body.scrollTop }; } |
|
zhangxinyin 20:40:45
这个也一样
|
|
zhangxinyin 20:40:48
对 scrollTop
|
|
zhangxinyin 20:40:50
做了封装
|
|
zhangxinyin 20:44:09
好了
|
|
zhangxinyin 20:44:41
这个是获取
|
|
zhangxinyin 20:44:43
get都是获取
|
|
zhangxinyin 20:44:46
明白？
|
|
zhangxinyin 20:45:03
只是封装好了
|
|
zhangxinyin 20:45:15
其实返回一个对象
|
|
zhangxinyin 20:45:18
你就调用就行了
|
|
zhangxinyin 20:45:24
比如 函数名().x
|
|
zhangxinyin 20:45:32
分2步写就这样
|
|
zhangxinyin 20:45:47
var 对象 (函数返回值) = 执行函数();
对象.属性 |
|
zhangxinyin 20:45:55
你也可以一步写完
|
|
zhangxinyin 20:46:02
执行函数().属性
|
|
zhangxinyin 20:46:08
因为 执行函数已经返回的是对象
|
|
zhangxinyin 20:46:09
ok？
|
|
木頭 20:46:22
ok
|
|
zhangxinyin 20:46:25
function getPosition(ele) { var x = 0, y = 0; while (ele != null) { x += ele.offsetLeft; y += ele.offsetTop; e = ele.offsetParent; } return { x: x, y: y }; } |
|
zhangxinyin 20:46:30
这个更简单了
|
|
zhangxinyin 20:46:34
还记得我说过 span吗
|
|
zhangxinyin 20:46:49
span offsetparent
|
|
zhangxinyin 20:46:51
是div吧
|
|
zhangxinyin 20:46:57
那么到 div距离是 20
|
|
zhangxinyin 20:47:07
我现在想获取它到 body的呢
|
|
zhangxinyin 20:47:09
更简单了
|
|
zhangxinyin 20:47:13
传个span进去
|
|
zhangxinyin 20:47:16
给你返回一个 x y
|
|
zhangxinyin 20:47:18
就行了
|
|
zhangxinyin 20:47:24
其实它做了累加
|
|
zhangxinyin 20:47:30
你知道实现原理就行
|
|
zhangxinyin 20:49:20
明白了吧
|
|
木頭 20:49:33
这个函数是干什么的？
|
|
zhangxinyin 20:49:42
比如 先累加 span到div的距离
|
|
那我缩小
|
|
zhangxinyin 20:37:25
看到了吗
|
|
木頭 20:37:30
看到
|
|
zhangxinyin 20:37:35
585 "x" 151
|
|
zhangxinyin 20:37:41
那你 在 resized俄时候
|
|
zhangxinyin 20:37:44
要重新设置元素的位置
|
|
zhangxinyin 20:37:45
懂？
|
|
zhangxinyin 20:37:52
因为这个宽度会变
|
|
zhangxinyin 20:38:11
function getViewPortSize(w) {
var w = w || window; if (w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight }; var d = w.document; if (document.compatMode == "CSS1Compat") return { w: d.documentElement.clientWidth, h: d.documentElement.clientHeight }; return { w: d.body.clientWidth, h: d.body.clientHeight }; } |
|
zhangxinyin 20:38:25
IE浏览器 innerWidth
|
|
zhangxinyin 20:38:33
那么有些支持 clientWidth
|
|
zhangxinyin 20:38:38
那么就写一个兼容性函数
|
|
zhangxinyin 20:38:40
懂吧
|
|
zhangxinyin 20:38:43
用的时候恨简单
|
|
zhangxinyin 20:39:39
是不是一样的
|
|
zhangxinyin 20:39:42
只是做了兼容处理
|
|
zhangxinyin 20:39:44
做成了函数
|
|
zhangxinyin 20:39:51
这样不用我说了吧
|
|
zhangxinyin 20:39:55
和 addEvent 一样
|
|
zhangxinyin 20:39:57
自己封装一个
|
|
zhangxinyin 20:40:06
这个网上多的是
|
|
zhangxinyin 20:40:09
封装好调用就行了
|
|
zhangxinyin 20:40:11
没必要
|
|
zhangxinyin 20:40:13
每次写那么长
|
|
zhangxinyin 20:40:24
我函数名 一调用多方便
|
|
zhangxinyin 20:40:41
function getScrollOffsets(w) {
var w = w || window; if (w.pageXoffset != null) { return { x: w.pageXoffset, y: pageYoffset }; } var doc = w.document; if (document.compatMode == "CSS1Compat"){ return { x: doc.documentElement.scrollLeft, y: doc.documentElement.scrollTop }; } return { x: doc.body.scrollLeft, y: doc.body.scrollTop }; } |
|
zhangxinyin 20:40:45
这个也一样
|
|
zhangxinyin 20:40:48
对 scrollTop
|
|
zhangxinyin 20:40:50
做了封装
|
|
zhangxinyin 20:44:09
好了
|
|
zhangxinyin 20:44:41
这个是获取
|
|
zhangxinyin 20:44:43
get都是获取
|
|
zhangxinyin 20:44:46
明白？
|
|
zhangxinyin 20:45:03
只是封装好了
|
|
zhangxinyin 20:45:15
其实返回一个对象
|
|
zhangxinyin 20:45:18
你就调用就行了
|
|
zhangxinyin 20:45:24
比如 函数名().x
|
|
zhangxinyin 20:45:32
分2步写就这样
|
|
zhangxinyin 20:45:47
var 对象 (函数返回值) = 执行函数();
对象.属性 |
|
zhangxinyin 20:45:55
你也可以一步写完
|
|
zhangxinyin 20:46:02
执行函数().属性
|
|
zhangxinyin 20:46:08
因为 执行函数已经返回的是对象
|
|
zhangxinyin 20:46:09
ok？
|
|
木頭 20:46:22
ok
|
|
zhangxinyin 20:46:25
function getPosition(ele) { var x = 0, y = 0; while (ele != null) { x += ele.offsetLeft; y += ele.offsetTop; e = ele.offsetParent; } return { x: x, y: y }; } |
|
zhangxinyin 20:46:30
这个更简单了
|
|
zhangxinyin 20:46:34
还记得我说过 span吗
|
|
zhangxinyin 20:46:49
span offsetparent
|
|
zhangxinyin 20:46:51
是div吧
|
|
zhangxinyin 20:46:57
那么到 div距离是 20
|
|
zhangxinyin 20:47:07
我现在想获取它到 body的呢
|
|
zhangxinyin 20:47:09
更简单了
|
|
zhangxinyin 20:47:13
传个span进去
|
|
zhangxinyin 20:47:16
给你返回一个 x y
|
|
zhangxinyin 20:47:18
就行了
|
|
zhangxinyin 20:47:24
其实它做了累加
|
|
zhangxinyin 20:47:30
你知道实现原理就行
|
|
zhangxinyin 20:49:20
明白了吧
|
|
木頭 20:49:33
这个函数是干什么的？
|
|
zhangxinyin 20:49:42
比如 先累加 span到div的距离
|
|
20
|
|
zhangxinyin 20:49:50
然后把 span 变成div
|
|
zhangxinyin 20:49:57
然后累加 div 到 body的距离 50
|
|
zhangxinyin 20:50:01
吧这些距离加起来
|
|
zhangxinyin 20:50:06
就是 span -> body的距离
|
|
zhangxinyin 20:50:08
原因是
|
|
zhangxinyin 20:50:15
你现在 用offsetleft
|
|
zhangxinyin 20:50:17
offsetTop
|
|
zhangxinyin 20:50:25
只能累加 span->div的 left top
|
|
zhangxinyin 20:50:27
明白？
|
|
zhangxinyin 20:50:33
你必须要写一个函数
|
|
zhangxinyin 20:50:43
来做到span到 body的距离
|
|
zhangxinyin 20:50:50
其实就是累加
|
|
zhangxinyin 20:51:15
是不是？
|
|
木頭 20:51:18
是
|
|
木頭 20:51:42
ok
|
|
木頭 20:52:34
ok
|
|
zhangxinyin 20:52:44
ele.offsetParent直到 offsetParent为空位置
|
|
zhangxinyin 20:52:48
之前我给你演示过了
|
|
zhangxinyin 20:52:54
到了body就是空了
|
|
zhangxinyin 20:53:02
然后最后吧 x y
|
|
zhangxinyin 20:53:06
返回出去
|
|
zhangxinyin 20:53:07
就行了
|
|
zhangxinyin 20:53:32
明白了吧
|
|
zhangxinyin 20:53:36
看看是不是70
|
|
zhangxinyin 20:53:55
ok?
|
|
木頭 20:53:59
ok
|
|
zhangxinyin 20:54:07
如果你想取 x
|
|
zhangxinyin 20:54:08
y
|
|
zhangxinyin 20:54:11
不用说了吧
|
|
zhangxinyin 20:54:32
ok?
|
|
木頭 20:54:38
ok
|
|
zhangxinyin 20:54:46
这样无论多少层
|
|
zhangxinyin 20:54:51
你都能获取到 到body的距离吧
|
|
zhangxinyin 20:54:59
只要传个对象进去
|
|
zhangxinyin 20:55:04
就给你返出来了
|
|
zhangxinyin 20:55:10
有了这些东西
|
|
zhangxinyin 20:55:19
你就可以做一些例子了
|
|
zhangxinyin 20:55:36
是不是50
|
|
zhangxinyin 20:55:41
再来一层
|
|
zhangxinyin 20:56:30
明白了？
|
|
zhangxinyin 20:56:33
你自己可以试试
|
|
zhangxinyin 20:56:38
你先算死
|
|
zhangxinyin 20:56:41
然后用这个函数一套
|
|
zhangxinyin 20:56:45
就出来了
|
|
zhangxinyin 20:56:48
看看是不是一样
|
|
zhangxinyin 20:56:59
这些概念要全部掌握
|
|
zhangxinyin 20:57:17
函数我就不带你封装了
|
|
zhangxinyin 20:57:21
你自己可以封装
|
|
zhangxinyin 20:57:24
其实都是都一样的
|
|
zhangxinyin 20:57:35
可以搜下
|
|
zhangxinyin 20:58:29
网上有的
|
|
zhangxinyin 20:58:31
没必要自己写
|
|
zhangxinyin 20:58:40
|
|
zhangxinyin 20:59:38
ok？
|
|
木頭 21:00:10
原理有点懂，只是函数怎么写要好好看看才行
|
|
zhangxinyin 21:00:13
不是的
|
|
zhangxinyin 21:00:21
这些东西是你之前掌握的
|
|
zhangxinyin 21:00:24
不是现在掌握的
|
|
zhangxinyin 21:00:28
所以我一直说
|
|
自己多封装函数
|
|
zhangxinyin 21:00:36
这个没办法
|
|
zhangxinyin 21:00:49
哪怕就是最简单的 "0" + str ? str
|
|
zhangxinyin 21:00:55
也要封一个
|
|
zhangxinyin 21:01:01
因为你后面反复会用啊
|
|
zhangxinyin 21:01:08
上班也这样
|
|
zhangxinyin 21:01:14
这样的东西让你写
|
|
zhangxinyin 21:01:18
你还要上班吗？
|
|
木頭 21:01:28
嗯
|
|
zhangxinyin 21:01:31
自己看看吧 bom
|
|
zhangxinyin 21:01:36
bom就介绍道这里了
|