<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS2</title>
<style type="text/css">
#d1{
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 0;
left: 0;

transition-delay: 0s;
transition-duration: 6s;
transition-timing-function: linear;
transition-property:all;
}
</style>
</head>
<body>

<div style="border: solid 5px blue;">
<div style="height: 50px;"></div>
<div id="aa"></div>
</div>
<textarea id="t"></textarea>
<button id="btn">点一下</button>

<div id="dd"></div>
<div id="d1"></div>

<script type="text/javascript">
//距离问题
var a = document.getElementById('aa');
console.dir(a);

//clientHeight = 内边距 + height(实际尺寸) 不含滚动轴的宽度
//offsetHeight = 内边距 + height + 边框宽度
//scrollHeight = 如果滚动条出现，则是可滚动的极限高度。如果没有滚动条，高度和clientHeight一样
a.clientHeight;
a.clientWidth;
a.offsetWidth;
a.offsetHeight;
a.offsetTop;
a.clientTop

a.scrollTop;

a.scrollWidth;
a.scrollHeight;

//鼠标的距离
//鼠标点击事件发生的时候"点击点"距离浏览器左上角的距离
//如果有滚动距离，该距离不含滚动距离，知识相对看到的区域左上角的位置
var i = document.getElementById('dd');
i.onclick = function (xxx) {
event.clientX;
event.clientY;

event.pageX;
event.pageY;

event.target;
event.toElement;
}

//按键事件及按键判断
document.onkeydown = function(){
var d1 = document.getElementById('d1');

if (event.key == 'd') {
d1.style.left = d1.offsetLeft + 100 + 'px';
}

if (event.key == 'a') {
d1.style.left = d1.offsetLeft - 100 + 'px';
}

if (event.key == 's') {
d1.style.top = d1.offsetTop + 100 + 'px';
}

if (event.key == 'w') {
d1.style.top = d1.offsetTop - 100 + 'px';
}
}

//JS有两种流:捕获流和冒泡流
//捕获流:最外层最先接收的事件，然后逐级向下传播，知道传到具体的元素对象上
//冒泡流:最内层(最具体的元素)最先接收到事件，然后逐级向上传播，知道最外层

//HTML事件就是事件以及事件的处理程序和html混写在一起
//DOM 0级事件
d1.onclick = f1;
//清楚DOM 0级事件
d1.onclick = null;

//DOM 2级事件
//可以为一个对象添加多个相同的事件处理程序，执行顺序按照代码先后顺序执行
//参数1:事件类型(不带on)
//参数2:事件的处理程序
//参数3:表示添加事件的时机，为true时表示在捕获阶段添加事件，false表示在冒泡阶段添加事件
d1.addEventListener('click',f1,true);
d1.addEventListener('click',f2,true);
//移出DOM 2级事件处理程序(参数和绑定时的一致)
d1.removeEleventListener('click',f1,true);

//IE事件模型
//添加事件(只在冒泡阶段添加)，该方法也可以为一个对象添加多个相同事件
//参数1:事件类型(带on)
//参数2:事件的处理程序

d1.attachEvent('onclick',f1);
d1.attachEvent('onclick',f2);
//移除事件
d1.detachEvent('onclick',f1);

//兼容性处理
//思路:考虑多种浏览器的具体情况，然后统一封装，方便后期维护

//event事件
var d1 = document.getElementById('d1');
d1.onclick = function(e){
//event对象只有在事件发生的时候才会产生
//事件对象其实会默认传入到事件处理程序中
alert(e)

//获取事件的时候，使用这样的操作进行兼容的获取对象方法
}

//防止事件冒泡
e.stopPropagation();

//IE
window.event.cancelBubble = true;

//委托绑定
//利用事件的冒泡特性，将本来该绑定到具体的元素的事件委托给其上级对象进行绑定
var u = document.getElementById('u');
u.addEventListener('click',function(){
console.log(event.target.innerHTML);
console.log(this);
})

//Window对象
window.innerHeight;
window.innerWidth;
window.open();
window.print();
window.close();
window.confirm();
window.prompt();

window.scrollTo(100,500);

window.name;
window.self;
window.parent;
window.document.(...);
</script>
</body>
</html>

JS高度融合入门笔记(二)的更多相关文章

  1. JS高度融合入门笔记(一)

    复制下面的代码到编辑器里,让编辑器自动排版一下格式,效果会好一点,自我感觉我笔记的条理还是比较容易记忆的 <!DOCTYPE html><html><head> & ...

  2. 纯JS实现KeyboardNav(学习笔记)二

    纯JS实现KeyboardNav(学习笔记)二 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 这篇主要是添加css,优化js编写逻辑和代码排版 GitHub项目源码 ...

  3. onethink入门笔记(二)

    5.onethink页面端获得后台服务器传值的方法 1:一般后台通过assign的值前台通过{$value}显示出来; 2:如果需要在js中使用 则可以通过 在js中写 var m = "{ ...

  4. nodeJs入门笔记(二)

    js中window通常是全局变量 global 是node.js里的全局变量 node中能访问的对象一般都是 global的 属性 global 对象属性 process 用于描述当前Node 进程状 ...

  5. Shader 入门笔记(二) CPU和GPU之间的通信,渲染流水线

    渲染流水线 1)应用阶段(CPU处理) 首先,准备好场景数据(摄像机位置,视锥体,模型和光源等) 接着,做粗粒度剔除工作. 最后,设置好每个模型的渲染状态(使用的材质,纹理,shader等) 这一阶段 ...

  6. OpenGLES入门笔记二

    #import <UIKit/UIKit.h> #import <QuartzCore/QuartzCore.h> #import <OpenGLES/ES2/gl.h& ...

  7. Redis入门笔记(二)-配置及运行

    转自: http://gly199.iteye.com/blog/1056424 1.redis基本参数 redis的配置文件中的常见参数如下: daemonize   是否以后台进程运行,默认为no ...

  8. Scala入门笔记二

    [TOC] 标识符 可用的字符 处理括号类字符,分隔符之外,其他所有的可打印的ASCII字符,如字母,数字,下划线和美元符号($)均可出现在Scala标识符中 插入符包括了(,) [,] {,and} ...

  9. Shader 入门笔记(二) CPU和GPU之间的通信

    渲染流水线的起点是CPU,即应用阶段. 1)把数据加载到显存中 2)设置渲染状态,通俗说这些状态定义了场景中的网格是怎样被渲染的. 3)调用DrawCall,一个命令,CPU通知GPU.(这个命令仅仅 ...

随机推荐

  1. 51nod 1597 有限背包计数问题 (背包 分块)

    题意 题目链接 Sol 不会做啊AAA.. 暴力上肯定是不行的,考虑根号分组 设\(m = \sqrt{n}\) 对于前\(m\)个直接暴力,利用单调队列优化多重背包的思想,按\(\% i\)分组一下 ...

  2. 【Android】1.0 安卓生猛上手

    1.Android操作系统,由安迪鲁宾发明,原发明用于照相机操作系统,市场反应惨淡,需求不足,后2005年被谷歌收购,用于智能手机操作系统. 2.logo来源:设计师上厕所看到男女厕所区别标志联想创作 ...

  3. 任务六：通过HTML及CSS模拟报纸排版

    任务目的 深入掌握CSS中的字体.背景.颜色等属性的设置 进一步练习CSS布局 任务描述 参考 PDS设计稿(点击下载),实现页面开发,要求实现效果与 样例(点击查看) 基本一致 页面中的各字体大小, ...

  4. SQL转Linq工具的使用——Linqer

    官方下载网站:http://www.sqltolinq.com/ 本文介绍版本为Linqer 4.5.7 第一步:下载下来,解压,双击安装.exe文件,运行界面如下. 第二步:建立与数据库的连接 点击 ...

  5. Python——追加学习笔记(一)

    映射.字典 ## 映射类型内建函数 * dict Error: Python核心编程(第二版)p170 >>> dict([['x', 1], ['y', 2]]) {'y': 2, ...

  6. html css：背景图片链接css写法

    图片作为背景,并且是链接的写法.例如网站的logo图片.例如:土豆的logo图片 <a title="土豆网 tudou.com 每个人都是生活的导演" href=" ...

  7. POJ-3267 The Cow Lexicon---删除字符匹配单词

    题目链接: https://cn.vjudge.net/problem/POJ-3267 题目大意: 题意就是给出一个主串,和一本字典,问最少在主串删除多少字母,可以使其匹配到字典的单词序列. PS: ...

  8. Python：IPC-Pipe与IPC-Manger

    1,IPC-PIPE: 管道 pipe from multiprocessing import Process from multiprocessing import Pipe p1,p2 = Pip ...

  9. 原生ajax接收json字符串(简单介绍)

    什么是json? JSON的全称是 Javascript Object Notation(javascript对象表示法),是基于javascript对象字面量,如果单从眼睛看,JSON里的数据是被保 ...

  10. 【洛谷P2577】[ZJOI2005]午餐

    午餐 题目链接 DP题都辣么毒瘤的么.. 首先,看一下题解 我们就有了思路: 贪心:显然,让吃饭慢的先打饭,sort一遍(证明?不存在的.. DP:f[i][j][k]表示前i个人,窗口1的打饭时间为 ...