JavaScript 系列博客(六)
JavaScript 系列博客(六)
前言
本篇博客介绍 js 操作高级,通过 js 获取标签的全局属性、设置标签的全局属性,以及事件的绑定与取消、js 盒模型与 js 动画。
对象使用的高级
- 对象的key为字符串类型, value为任意类型
var obj = {
name: "name",
"person-age": 18
}
// 访问
obj.name | obj["name"]
obj["person-age"]
- 对象的属性可以任意添加与删除
var obj = {
name: "obj"
}
// 删除
delete obj.name
// 添加
obj.age = 18 // 如果age的key已存在就是修改值, 不存在就是添加键值对, 添加的key任意
// 注: 获取的页面元素(标签对象)也可以任意添加/删除属性
页面标签全局属性操作
ele.getAttribute("alert");
// 获取页面标签ele的alert全局属性的值, 如果没有该全局属性值为null
ele.setAttribute("attr_key", "attr_value");
// 页面标签ele已有该全局属性,就是修改值, 没有就是添加该全局属性并赋相应值
// 注: 一般应用场景, 结合css的属性选择器完成样式修改
事件
- 事件的绑定
// 第一种
box.onclick = function(){}
// 只能绑定一个实现体, 如果有多次绑定, 保留最后一次
// box.onclick = null来取消事件的绑定
// 第二种
var fn = function() {}
box.addEventListener('click', fn)
// 能绑定多个实现体, 如果有多次绑定, 按顺序依次执行
// box.removerEventListener('click', fn)来取消事件的绑定
// 了解: 第三个参数决定冒泡顺序(子父级谁先相应事件)
- 事件对象
// 系统回调事件函数时, 传递了一个 事件(event) 实参
// 如果要使用传递来的实参 事件(event), 定义接收的 形参 即可
box.onclick = function(ev){
// 使用事件对象
// 特殊按键 eg: ev.altKey: true | false
// 鼠标触发点: ev.clientX | ev.clientY
// 取消冒泡
ev.cancelBubber = true;
// 取消默认事件
return false;
}
事件总结
- 鼠标事件
var box = document.querySelector('.box');
// 1. 点击事件
box.onclick = function () {
console.log("单击");
};
// 2. 双击事件(应用场景不广)
box.ondblclick = function () {
console.log("双击");
};
// 3. 鼠标右键
box.oncontextmenu = function () {
console.log("右键了");
return false;
};
// 4. 鼠标悬浮 | 移动 | 按下 | 抬起 | 离开
box.onmouseover = function () {
console.log("悬浮");
};
box.onmousemove = function () {
console.log("移动");
};
box.onmousedown = function () {
console.log("按下");
};
box.onmouseup = function () {
console.log("抬起");
};
box.onmouseout = function () {
console.log("离开");
}
// over | out VS enter | leave
// 总结:
// 1. 将子级与父级分开考虑, 大家都有各自的悬浮离开事件, 采用 over | out 组合
// 2. 将子级纳入父级考虑范围, 也就是只有父级去相应悬浮离开事件, 采用 enter | leave 组合
// 3. 单独考虑一个盒子的悬浮离开事件, 两套均可以
// 特性
// 从父级移至子级, 会触发out事件, 紧接着触发子级的over事件, 并可以冒泡给父级
// 从父级移至子级, leave事件并不会触发, 它认为子级是属于父级的一部分, enter事件, 也不会再次触发
// 悬浮子级:
// sub over => sup over 支持冒泡
// sup enter => sub enter 不支持冒泡
- 键盘事件
// onkeydown: 键盘按下会触发, 长按会持续触发
// onkeyup: 键盘抬起会触发
// ev.keyCode: 按下的键盘键的标号
- 其他事件
// window.onload: 页面加载完毕触发
// window.onscroll | document.onscroll => window.scrollY(页面下滚距离): 页面滚动触发
js盒模型
// content: 通过计算后样式获取
// padding + content: box.clientWidth | box.clientHeight
// border + padding + content: box.offsetWidth | box.offsetHeight
// 绝对定位top|left: box.offsetTop | box.offsetLeft
动画
- 定时器
// 一次性定时器
var timeout = setTimeout(function(a, b){}, 1000, 10, 20);
// 持续性定时器
var timer = setInterval(function(a, b){}, 1000, 10, 20);
// 清除定时器
// clearTimeout | clearInterval
//结论:
// 1. 定时器不会立即执行
// 2. 一次性定时器只执行一次, 持续性定时器不做清除的话会一直执行
// 3. 声明定时器第一个参数为逻辑函数地址, 第二个参数为事件间隔, 第三个为逻辑函数所需参数(可以为多个,一般省略)
// 4. 清除定时器可以混用, 本质就是清除创建定时器时的数字标号, 该编号就是创建定时器时的返回值
// 小技巧: 如果页面中有n个定时器
var n = setTimeout(function () {}, 1);
for (var i = 1; i < n; i++) {
clearInterval(i)
}
JavaScript 系列博客(六)的更多相关文章
- JavaScript 系列博客(一)
JavaScript 系列博客(一) 前言 本系列博客为记录学习 JavaScript 的学习笔记,会从基础开始慢慢探索 js.今天的学习笔记主要为 js 引入.定义变量以及 JavaScript 中 ...
- JavaScript 系列博客(七)
JavaScript 系列博客(七) 前言 本篇博客介绍页面节点概念.文档结构以及如何使用 js 操作文档节点还有事件 target 以及 BOM 操作. 节点 dom与dom属性 // DOM: 文 ...
- JavaScript 系列博客(五)
JavaScript 系列博客(五) 前言 本篇博客学习 js 选择器来控制 css 和 html.使用事件(钩子函数)来处理事件完成后完成指定功能以及js 事件控制页面内容. js 选择器 在学习 ...
- JavaScript 系列博客(四)
JavaScript 系列博客之(四) 前言 本篇介绍 JavaScript 中的对象.在第一篇博客中已经说到 JavaScript 是一种''对象模型''语言.所以可以这样说,对象是 JavaScr ...
- JavaScript 系列博客(三)
JavaScript 系列博客(三) 前言 本篇介绍 JavaScript 中的函数知识. 函数的三种声明方法 function 命令 可以类比为 python 中的 def 关键词. functio ...
- JavaScript 系列博客(二)
JavaScript 系列博客(二) 前言 本篇博客介绍 js 中的运算符.条件语句.循环语句以及数组. 运算符 算术运算符 // + | - | * | / | % | ++ | -- consol ...
- Django 系列博客(十六)
Django 系列博客(十六) 前言 本篇博客介绍 Django 的 forms 组件. 基本属性介绍 创建 forms 类时,主要涉及到字段和插件,字段用于对用户请求数据的验证,插件用于自动生成 h ...
- Django 系列博客(六)
Django 系列博客(六) 前言 本篇博客介绍 Django 中的路由控制部分,一个网络请求首先到达的就是路由这部分,经过路由与视图层的映射关系再执行相应的代码逻辑并将结果返回给客户端. Djang ...
- JavaScript学习系列博客_1_JavaScript简介
这个系列博客主要用来记录本人学习JavaScript的笔记,从0开始,即使有些知识我也是知道的.但是会经常忘记,干脆就写成博客,没事的时候翻来看一看,留下一点学习的痕迹也好.可能写博客的水平暂时不太好 ...
随机推荐
- jquery综合
1.选择器性能比较: http://www.jcodecraeer.com/a/javascript/2012/0418/112.html http://developer.51cto.com/art ...
- 【repost】js window对象属性和方法相关资料整理
window对象有以下方法: open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval mov ...
- Mysql相关存储函数,函数,游标
https://www.cnblogs.com/zhanglei93/p/6437867.html >>>>请进入
- maven配置parent pom查找策略
当我们在pom.xml中添加parent pom的时候,通常maven会按照如下顺序查找parent依赖: relativePath标签指向的路径. 默认的relativePath路径".. ...
- vuex简单使用
1.创建src/store/index.js----仓库所在地----暴露store 2.main.js入口文件处引入store,挂载到Vue根实例中 3.创建store/movie.js-----电 ...
- angular-指令
ng-app 作用域 ng-init 声明 module 模块 ng-model 双向绑定 ng-bind 绑定 angular是一个MVC框架:即 M------------------module ...
- day19_雷神_django第二天
django_day02 Django的路由系统 URL配置(URLconf)就像Django所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表. 1.URLconf配置 基本 ...
- day_4流程控制之分支结构循环结构及for循环
复习一下昨天的内容 1:变量的命名规范 只能由数字 字母 及下划线组成 不能以数字开头 不能与系统关键字重名 _开头有特殊含义 __开头__结尾的变量是魔法变量 支持大小驼峰 ,但建议使用下划线连接语 ...
- MyBatis 源码分析系列文章合集
1.简介 我从七月份开始阅读MyBatis源码,并在随后的40天内陆续更新了7篇文章.起初,我只是打算通过博客的形式进行分享.但在写作的过程中,发现要分析的代码太多,以至于文章篇幅特别大.在这7篇文章 ...
- SpringMVC框架三:参数绑定
这篇文章整合了SpringMVC和MyBatis: https://www.cnblogs.com/xuyiqing/p/9419144.html 接下来看看参数绑定: 默认Conrtroller可以 ...