ES6详解(三)
数值的扩展二进制和八进制表示法ES6 提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示。
120b111110111 === 503 // true0o767 === 503 // true
从 ES5 开始,在严格模式之中,八进制就不再允许使用前缀0表示,ES6 进一步明确,要使用前缀0o表示。
12345678910// 非严格模式(function(){ console.log(0o11 === 011);})() // true// 严格模式(function(){ 'use strict'; console.log(0o11 === 011);})() // Uncaught SyntaxError: Octal literals are not allowed in strict mode.
如果要将0b和0o前缀的字符串数值转为十进制,要使用Number方法。
12Number('0b111') // 7Number('0o10' ...
正则表达式
什么是正则表达式正则表达式是一组由字母和符号组成的特殊文本,它可以用来从文本中找出满足你想要的格式的句子。一个正则表达式是一种从左到右匹配主体字符串的模式
元字符正则表达式主要依赖于元字符。
点运算符 .是元字符中最简单的例子。 .匹配任意单个字符,但不匹配换行符。
字符集[ ]表达式[Tt]he 匹配 the 和 The。
* 号 *号匹配 在*之前的字符出现大于等于0次。 例如,表达式 a 匹配0或更多个以a开头的字符。表达式[a-z] 匹配一个行中所有以小写字母开头的字符串。
.+号
+号匹配+号之前的字符出现 >=1 次。 例如表达式c.+t 匹配以首字母c开头以t结尾,中间跟着至少一个字符的字符串。
?号在正则表达式中元字符 ? 标记在符号前面的字符为可选,即出现 0 或 1 次。
{}号在正则表达式中 {} 是一个量词,常用来限定一个或一组字符可以重复出现的次数。 例如, 表达式 [0-9]{2,3} 匹配最少 2 位最多 3 位 0~9 的数字。
我们可以省略第二个参数。 例如,[0-9]{2,} 匹配至少两位 0~9 的数字。
固定的次数 ...
ES6详解(二)
字符串的扩展字符串的遍历器接口ES6 为字符串添加了遍历器接口(详见《Iterator》一章),使得字符串可以被for...of循环遍历。
123456for (let codePoint of 'foo') { console.log(codePoint)}// "f"// "o"// "o"
直接输入 U+2028 和 U+2029JavaScript 字符串允许直接输入字符,以及输入字符的转义形式。举例来说,“中”的 Unicode 码点是 U+4e2d,你可以直接在字符串里面输入这个汉字,也可以输入它的转义形式\u4e2d,两者是等价的。
但是,JavaScript 规定有5个字符,不能在字符串里面直接使用,只能使用转义形式。
U+005C:反斜杠(reverse solidus)
U+000D:回车(carriage return)
U+2028:行分隔符(line separator)
U+2029:段分隔符(paragraph separator)
U+000A: ...
ES6详解(一)
JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给标准化组织 ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript
ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现,另外的 ECMAScript 方言还有 JScript 和 ActionScript
Babel转码器Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在老版本的浏览器执行。
1234567// 转码前input.map(item => item + 1);// 转码后input.map(function (item) { return item + 1;});
上面的原始代码用了箭头函数,Babel 将其转为普通函数,就能在不支持箭头函数的 JavaScript 环境执行了。
Babel 默认只转换新的 JavaScript 句法(syntax ...
HTML5+CSS3+LESS+JavaScript商城网页实战
网页预览
知识点:1.为什么auto能实现水平居中?这是因为水平方向的 auto,其计算值取决于可用空间,左右方向的auto值均分了可用空间,使得块元素得以在包含块内居中显示。
2.href=”javascript:;”禁止超链接的跳转
3.mixins
css封装常用的操作
比如:
由于父元素中的子元素的浮动效果,会产生父元素的高度塌陷问题,这种现象在后面的样式中也是比较常见的,所以我们需要在css目录中创建一个单独的mixins目录,在其中创建一个clear.less文件,然后在需要的位置调用即可。
4.font-size=0
用来解决行内元素留有一小撮空白的问题
给父元素添加属性font-size=0,再给子元素单独设置一个font-size值,以免子元素受到父元素影响
5.window.onload
6.Js文件顺序
如果这个文件需要另一个js文件的数据,则先让另一个引入,所有js文件一般都放在body的末尾引入
7.动态创建元素和追加元素的实现
8.className 和class的注意点
给一个元素添加类名时要使用className,而不能 ...
HTML5+CSS3_原神网页实战
网页预览
HTML结构:
头部区域HTML:1234567891011121314151617181920212223242526272829303132<!--头部区域--> <div class="header"> <div class="header-left"> <!--在header-music closed 切换音乐图标状态--> <div class="header-music"></div> <a href="" class="header-logo"> <h1>原神</h1> </a> <!--导航--> <div class="header-nav"> ...
DOM扩展
DOM 扩展Selectors APISelectors API Level 1 的核心是两个方法:
querySelector()和 querySelectorAll()。
在兼容浏览器中,Document 类型和 Element 类型的实例上都会暴露这两个方法。
querySelector()querySelector()方法接收 CSS 选择符参数,返回匹配该模式的第一个后代元素,如果没有匹配项则返回null。
12345678// 取得<body>元素let body = document.querySelector("body"); // 取得 ID 为"myDiv"的元素let myDiv = document.querySelector("#myDiv"); // 取得类名为"selected"的第一个元素let selected = document.querySelector(".selected"); // 取得类名为"button"的 ...
DOM
DOMDOM 表示 由多层节点构成的文档,通过它开发者可以添加、删除和修改页面的各个部分。
DOM 现在是真正跨平台、语言无关的表示和操作网页的方式。
节点层级任何 HTML 或 XML 文档都可以用 DOM 表示为一个由节点构成的层级结构
document 节点表示每个文档的根节点
根节点的唯一子节点是<html>元素,我们称之为文档元素
文档元素是文档最外层的元素,所有其他元素都存在于这个元素之内。每个文档只能有一个文档元素。
在 HTML 页面中,文档元素始终是<html>元素。
在 XML 文档中, 则没有这样预定义的元素,任何元素都可能成为文档元素。
每个节点都有 nodeType 属性,表示该节点的类型。节点类型由定义在 Node 类型上的 12 个数值常量表示, 浏览器并不支持所有节点类型
nodeName 与 nodeValuenodeName 与 nodeValue 保存着有关节点的信息。
节点关系文档中的所有节点都与其他节点有关系。这些关系可以形容为家族关系,相当于把文档树比作家谱。 在 HTML 中,<body>元素是<h ...
BOM
BOMBOM 是使用 JavaScript 开发 Web 应用程序的核心。BOM 提供了与网页无关的浏览器功能对象。
window 对象BOM的核心是 window 对象,表示浏览器的实例。
window 对象在浏览器中有两重身份,一个是 ECMAScript 中的 Global 对象,另一个就是浏览器窗口的 JavaScript 接口。这意味着网页中定义的所有对象、变量和函数都以 window 作为其 Global 对象,都可以访问其上定义的 parseInt()等全局方法。
因为 window 对象的属性在全局作用域中有效,所以很多浏览器 API 及相关构造函数都以 window 对象属性的形式暴露出来。
Global 作用域1.通过 var 声明的所有全局变量和函 数都会变成 window对象的属性和方法。
2.如果在这里使用 let 或 const 替代 var,则不会把变量添加给全局对象
3.访问未声明的变量会抛出错误,但是可以在 window 对象上查询是否存在可能未声明的变量。
12345// 这会导致抛出错误,因为 oldValue 没有声明var newValue = ...
异步函数
异步函数异步函数,也称为“async/await”(语法关键字),是 ES6 期约模式在 ECMAScript 函数中的应用。
这个特性从行为和语法上都增强了 JavaScript,让以同步方式写的代码能够异步执行。
下面来看一个最简单的例子:
1let p = new Promise((resolve, reject) => setTimeout(resolve, 1000, 3));
这个期约在1000 毫秒之后解决为数值 3。如果程序中的其他代码要在这个值可用时访问它,则需写一个解决处理程序,这其实是很不方便的,
12let p = new Promise((resolve, reject) => setTimeout(resolve, 1000, 3)); p.then((x) => console.log(x)); // 3
因为其他代码都必须塞到期约处理程序中。不过可以把处理程序定义为一个函数:
123function handler(x) { console.log(x); } let p = new Promise ...