宋图图的工学课程12
<div nation='china'>
box.style.display = 'none';
自定义属性操作
getAttribute() 获取标签行内属性
setAttribute() 设置标签行内属性
removeAttribute() 移除标签行内属性
与element.属性的区别: 上述三个方法用于获取任意的行内(自定义)属性。
样式(css)操作
样式显示在标签行内
var div1 = document.getElementById('div1');
div1.style.width = '100px';
属性值是字符串,必须加上单位
类名操作
- 修改标签的className属性相当于直接修改标签的类名
var box = document.getElementById('box');
box.className = 'show';
class属性为什么用className来表示
class是关键字,定义变量,属性不能用关键字
案例
图片切换二维码案例
css精灵技术
创建元素的三种方式
document.write()
document.write('新设置的内容<p>标签也可以生成</p>');
innerHTML与innerText
var box = document.getElementById('box');
box.innerHTML = '<p>新标签</p>';
document.createElement()
var div = document.createElement('div');
document.body.appendChild(div);
案例
- 根据动态创建表格
选择多行: alt + ctrl + 方向下键 或 鼠标中键
节点操作
var body = document.body;
var div = document.createElement('div');
body.appendChild(div);var firstEle = body.children[0];
body.insertBefore(div, firstEle);body.removeChild(firstEle);var text = document.createElement('p');
body.replaceChild(text, div);
节点属性
模拟文档树结构
[外链图片转存失败(img-Vtgxskmb-1569400767122)(media/1497165666684.png)]
事件详解
注册/移除事件的三种方式
1.
btn.onclick = function() {alert(2);
}
参数1 事件名称
参数2 回调函数
2.btn.addEventListener('click', function() {alert(1);
});3.兼容低版本浏览器
btn.attachEvent('onclick',回调函数)
事件的三个阶段
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
参数为false是冒泡 为true是捕获
事件对象的属性和方法
- event.type 获取事件类型
- clientX/clientY 所有浏览器都支持,窗口位置
- pageX/pageY IE8以前不支持,页面位置
- event.target || event.srcElement 用于获取触发事件的元素
- event.preventDefault() 取消默认行为
案例
- 跟着鼠标飞的天使
阻止事件传播的方式
- 标准方式 event.stopPropagation();
- IE低版本 event.cancelBubble = true; 标准中已废弃
常用的鼠标和键盘事件
- onmouseup 鼠标按键放开时触发
- onmousedown 鼠标按键按下触发
- onmousemove 鼠标移动触发
- onkeyup 键盘按键按下触发
- onkeydown 键盘按键抬起触发
BOM
BOM的概念
BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。
我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理,
比如:刷新浏览器、后退、前进、在浏览器中输入URL等
BOM的顶级对象window
window是浏览器的顶级对象,当调用window下的属性和方法时,可以省略window
注意:window下一个特殊的属性 window.name
对话框
- alert()
- prompt()
- confirm()
页面加载事件
- onload
window.onload = function () {// 当页面加载完成执行// 当页面完全加载所有内容(包括图像、脚本文件、CSS 文件等)执行
}
- onunload
window.onunload = function () {// 当用户退出页面时执行
}
定时器
setTimeout()和clearTimeout()
在指定的毫秒数到达之后执行指定的函数,只执行一次
// 创建一个定时器,1000毫秒后执行,返回定时器的标示
var timerId = setTimeout(function () {console.log('Hello World');
}, 1000);// 取消定时器的执行
clearTimeout(timerId);
setInterval()和clearInterval()
定时调用的函数,可以按照给定的时间(单位毫秒)周期调用函数
// 创建一个定时器,每隔1秒调用一次
var timerId = setInterval(function () {var date = new Date();console.log(date.toLocaleTimeString());
}, 1000);// 取消定时器的执行
clearInterval(timerId);
location对象
location对象是window对象下的一个属性,时候的时候可以省略window对象
location可以获取或者设置浏览器地址栏的URL
URL
统一资源定位符 (Uniform Resource Locator, URL)
- URL的组成
scheme://host:port/path?query#fragment
scheme:通信协议常用的http,ftp,maito等
host:主机服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
port:端口号整数,可选,省略时使用方案的默认端口,如http的默认端口为80。
path:路径由零或多个'/'符号隔开的字符串,一般用来表示主机上的一个目录或文件地址。
query:查询可选,用于给动态网页传递参数,可有多个参数,用'&'符号隔开,每个参数的名和值用'='符号隔开。例如:name=zs
fragment:信息片断字符串,锚点.
location有哪些成员?
使用chrome的控制台查看
查MDN
案例
解析URL中的query,并返回对象的形式
history对象
- back()
- forward()
- go()
navigator对象
- userAgent
通过userAgent可以判断用户浏览器的类型
- platform
通过platform可以判断浏览器所在的系统平台类型.
宋图图的工学课程12相关推荐
- Mermaid classDiagram类图应用举例 汉,蜀汉,刘宋关系图
Mermaid classDiagram类图应用举例 汉,蜀汉,刘宋关系图 西汉.东汉.蜀汉.刘宋 源代码如下,效果图在后 classDiagramclass 刘邦{ <<-201--19 ...
- 切图案例实操课程二-姜威-专题视频课程
切图案例实操课程二-199人已学习 课程介绍 本课程以主要目的是引导初入前端的小白,了解前端是如何工作的,通过正确建立构建环境,解构任务, 课程收益 讲师介绍 姜威 ...
- 《深入浅出图神经网络》读书笔记 1-2
<深入浅出图神经网络>读书笔记 1-2 第1章 图的概述 第2章 神经网络基础 2.1 机器学习基本概念 2.2 神经网络 2.4 训练神经网络 第1章 图的概述 图神经网络(Graph ...
- 数控车床纵向进给系统设计CAD图与说明书 伺服 课程设计
目 录 第一章.数控机床进给系统概述 1 1.1.伺服系统对伺服电机的要求 1 1.2.伺服系统的分类 1 1.3.主要设计任务参数------------------------ 2 第二章 ...
- 最值得收藏的 数字图像处理 全部知识点思维导图整理(武汉大学慕课课程)(持续更新中)
本文的思维导图根据慕课上的武汉大学数字图像处理国家精品课程整理而来并标记出重点内容 思维导图就整理了这么多,之后应该也不会更新此内容了, 有需要的可以去 我的主页 了解更多学科的精品思维导图整理 本文 ...
- 敏捷如何嵌入公司现有的管理模式-宋世杰-专题视频课程
敏捷如何嵌入公司现有的管理模式-1970人已学习 课程介绍 敏捷只是每天大家面对面,围着黑板上的图进行讨论? 管理者如何从这么零星的片段来把控整个项目? 有30年项目管理经验,高等级评 ...
- #589. 图图的游戏
[题目描述]: 图图正在玩一个智力游戏:有一个n×n 的01 方格,图图要从中选出一个面积最大的矩形区域,要求这个矩形区域不能有超过k个1.这么难的问题图图当然不会做了,他想让你帮帮他,你能解决这个问 ...
- UOJ #589. 图图的游戏
[题目描述]: 图图正在玩一个智力游戏:有一个n×n 的01 方格,图图要从中选出一个面积最大的矩形区域,要求这个矩形区域不能有超过k个1. 这么难的问题图图当然不会做了,他想让你帮帮他,你能解决这个 ...
- Unity3D-游戏ARVR开发进阶课程 - 动画系统-宋晓波-专题视频课程
Unity3D-游戏ARVR开发进阶课程 - 动画系统-10610人已学习 课程介绍 本套视频培训课程中会深入学习Unity中的Mecanim动画系统.包括动画剪辑.动画控制器.动画状 ...
最新文章
- [luoguP1773] 符文之语_NOI导刊2010提高(02)(DP)
- 深入理解ElasticSearch(七):执行分布式检索
- 从集合中查找最值得方法——max(),min(),nlargest(),nsmallest()
- 解决 Cmder 的光标跟文字有个间距 及常用配置
- 使用eclipse调试ns3配置说明
- Zimbra开发接口文档API下载地址
- 《软件工程》individual project开发小记(一)
- springboot文件上传下载实战 ——文件上传、下载、在线打开、删除
- 电脑复制手机粘贴,这些Mac的隐藏玩法你知道吗?
- 【java】多线程_并发_同步_快乐影院
- 防火墙添加ip白名单_宝塔防火墙IP白名单添加/导入知道创宇云CDN节点IP段
- (转)最大流最小割定理
- u盘被隐藏的文件怎么恢复
- 基于ESXi虚拟服务器搭建
- HASH查找算法—JAVA实现
- 深度学习与自然语言处理实验——中文信息熵的计算
- Makefile学习之 all
- ORM框架Gorm-删除记录
- JQuery OrgChart
- 三星p1000升级android10,三星P1000可以升级到安卓4.0吗?
热门文章
- 成都哪个java培训机构好
- 分享下被偷走的那些年,我在做外包的心得体会
- 全国计算机等级考试python教材.pdf_全国计算机等级考试二级教程Python语言程序设计(2018年版).PDF...
- 计算机科学领域sci杂志,【分享】计算机类SCI杂志--其他(无重复) - 信息科学 - 小木虫 - 学术 科研 互动社区...
- 使用POI读取大量数据EXCEL文件,并解析成自定义javaBean
- Vscode所见即所得的Markdown编辑以及PDF输出
- 首个中文全词类知识库-百科知识树 开源啦!搭配开源标注工具,一招搞定知识关联!...
- 代理软件cntlm之下载、安装、配置及使用
- Jess学习基础(一)
- matlab烟雾监测,Matlab火焰烟雾检测(GUI)