day12 - 《二阶段代码笔记》

01-全局方法
02-打开窗口
- openurl打开窗口
03-navigator
04-location
05-SPA
- 单页面应用(只有一个页面的应用)
- window.onhashchange 锚点改变
06-search
07-一次性计时器
08-节点介绍
09-上下层节点
10-平行节点
11-节点属性
12-html内容和文本内容
13-属性操作
14-类名操作
15-动画
16-元素选取

01-全局方法

alert()
prompt()

confirm() 确认窗

带有一个确定和取消按钮返回一个布尔值

close(); 关闭标签页

print(); 打印

窗口失去焦点

var count = 0;<br />    window.onblur = function () {<br />      console.log('窗口失去焦点' + ++count + '次');<br />      if (count == 5) {<br />        close();<br />      }<br />    }

02-打开窗口

var config = "left=200,top=300,width=500,height=300";

openurl打开窗口

var openurl = "http:www.baidu.com";<br />    var newWin = window.open(openurl, 'popwin', config);

03-navigator

04-location

location 对象也是全局对象
用于保存或设置 url 相关的信息
URL 构成
协议 http: 超文本传输协议 https: SSL加密的超文本传输协议
主机名 www.360.cn 10.31.159.1
端口号 :80 :443
路径 /app/download/3.0.5/info.html
查询 ?app=360base&json=true 语法: ?key=value&key=value&key=value
锚点 #info
https:www.360.cn:443/app/download/3.0.5/info.html?app=360base&json=true#info

console.log(location);

console.log(location.href); 完整的url信息

console.log(location.host); 主机名和端口号

console.log(location.hostname); 主机名

console.log(location.protocol); 协议

console.log(location.port); 端口号

console.log(location.pathname); 路径

console.log(location.search); 查询

console.log(location.hash); 锚点

location.reload(); 从新加载

05-SPA

SPA(Single Page Application)

单页面应用(只有一个页面的应用)

window.onhashchange 锚点改变

06-search

表单的get提交方式会出现 search 内容
console.log(location.search);
当search 去掉问号以后剩余的内容叫做 query

07-一次性计时器

一次性计时器
setTimeout()
语法: setTimeout(callback,delay);
参数: callback(function)
delay(number) 延迟时间
返回值:id(number) 计时器唯一编号
描述: 一次性计时器开启后在到达设定时间后执行一次回调函数
关闭一次性计时器
clearTimeout(id)
setTimeout(function () {
console.log(‘时间到了’);
}, 5000);
————————————————————————————
JavaScript 运行环境是JS引擎
JS引擎是一个单线程环境
线程指的是可以同时执行的任务数(同时处理事物的能力)
单线程指的是每次只能执行一个任务语句会按序依次执行
在上一个任务完成之前不会进行下一个任务(每次只能执行一个任务)
线程阻塞指的是一个耗时非常长的操作会导致线程卡在上一个任务 -> 下一个任务无法正常执行
一定会出现线程阻塞的操作 I/O(Input/Output)
setTimeout/setInterval 是一个非阻塞操作
JS引擎采用了一套叫做 EventLoop(事件轮询) 的机制来处理会造成阻塞的操作
具体来说事件轮询将阻塞操作转变成了异步操作
当JS引擎执行到异步操作时会先跳过该操作将其添加到一个任务队列中等待执行
当主线程中其他任务(同步任务)都执行完毕后才开始执行任务队列中的任务
同步操作(sync) 依次执行会造成阻塞
异步操作(async) 跳过执行不造成阻塞
let 用于声明块级作用域变量父子块级作用域

08-节点介绍

在HTML文档中
节点包含了
document
doctype
元素
属性
文本
注释

所有的节点组成了文档树
根节点是 document
document 是全局对象它是window的子属性 (window.docuemnt)

09-上下层节点

   node.childNodes   获得一个节点的所有子节点<br />       childNodes的结果是一个 类数组对象(TypedArray / ArrayLike)<br />       类数组对象特点 所有的元素都是有序排列 拥有索引和length属性 并且索引从0开始计数<br />       console.log(list.childNodes);<br />       类数组对象转数组<br />       Array.from(ArrayLike);          来自ES2015标准 推荐的方法<br />       [].slice.call(ArrayLike);       兼容低版本ie<br />       [...ArrayLike]                  来自ES2015标准 展开运算符<br />       var arr1 = Array.from(list.childNodes);<br />       console.log(arr1);

node.parentNode 获得父节点
node.parentElement 获得父元素
parentNode 最高可以获取到 document
parentElement 最高可以获取到 html
console.log(list.parentNode.parentNode.parentNode);
console.log(list.parentElement.parentElement.parentElement);

node.firstChild 第一个子节点
node.lastChild 最后一个子节点
console.log(list.firstChild);
console.log(list.lastChild);
node.firstElementChild 第一个子元素
node.lastElementChild 最后一个子元素
console.log(list.firstElementChild);
console.log(list.lastElementChild);

node.children 获得子元素集合
console.log(list.children);

10-平行节点

console.log(item5.previousSibling); 获得上一个兄弟节点
console.log(item5.nextSibling); 获得下一个兄弟节点
console.log(item5.previousElementSibling); 获得上一个兄弟元素
console.log(item5.nextElementSibling); 获得下一个兄弟元素
item5.nextElementSibling.nextElementSibling.nextElementSibling.style = ‘color:red’;

11-节点属性

所有的节点都是对象
所有的节点都有三个基本属性节点名(nodeName) 节点类型(nodeType) 节点值(nodeValue)
元素节点(html标签) 元素名(全大写) 1 null
属性节点(标签属性) 属性名 2 属性值
文本节点(文本内容) #text 3 文本值
注释节点(注释内容) #comment 8 注释内容
文档节点(document) #document 9 null
文档声明(doctype) html 10 null
var list = document.getElementById(‘list’);
console.log(list.nodeName);
console.log(list.parentElement.nodeName);
console.log(list.nodeType);
console.log(list.parentElement.nodeType);
console.log(list.nodeValue);
console.log(list.parentElement.nodeValue);
console.dir(list);
console.dir(list.attributes[‘id’]);
console.dir() 以列表形式查看对象
console.dir(list.firstElementChild.firstChild);
console.dir(list.childNodes[1]);
console.dir(document);

12-html内容和文本内容

元素节点的 innerHTML 用于设置或获取元素的 html内容
元素节点的 textContent 用于设置或获取元素的文本内容

13-属性操作

element.attributes 获得元素的属性集合结果是类数组对象
console.log(box.attributes);
console.log(box.attributes[1].nodeValue); 通过索引获得属性节点通过nodeValue获得节点值
box.attributes[1].nodeValue = ‘哈哈哈’;
——————————————————
1. 获取属性值
element.getAttribute(name);
console.log(box.getAttribute(‘id’));
——————————————————
2. 修改或设置属性值
element.setAttribute(name,value);
box.setAttribute(‘title’, ‘你好’);
box.setAttribute(‘style’, ‘color:red’);
——————————————————
3. 删除属性
element.removeAttribute(name);
box.removeAttribute(‘title’);
——————————————————-
4. 判断属性是否存在
element.hasAttribute(name);
console.log(box.hasAttribute(‘style’));

14-类名操作

HTML5标准为类名操作提供了对应的API
classList
语法: elm.classList
btn.onclick = function () {
console.log(box.classList); 类数组对象
box.classList.add(‘c4’); 添加类名
box.classList.remove(‘c2’); 删除类名
box.classList.replace(‘c1’, ‘c5’); 替换类名
box.classList.toggle(‘c6’); 切换类名(添加和删除)
console.log(box.classList.value); 获得完整类名
}
}

15-动画

16-元素选取

通过标签名选择元素 (类数组)
var div = document.getElementsByTagName(‘div’);
console.log(div);
通过name属性选择元素 (类数组)
var ck = document.getElementsByName(‘ck’);
console.log(ck);
通过classname选择元素 (类数组)
var box = document.getElementsByClassName(‘box’);
console.log(box);
—————————————————————-
通过css选择器选择匹配的第一个元素
var box = document.querySelector(‘.box’);
console.log(box);
通过css选择器选择匹配的所有元素 (类数组)
var box = document.querySelectorAll(‘.box’);
console.log(box);
———————————————————————-
特殊选择
console.log(document.documentElement); 选择html元素
console.log(document.body); 选择body元素
console.log(document.head); 选择head元素