Live Note

Remain optimistic

Posted on In

基本用法

Set 类似于数组，但是成员的值都是唯一的，没有重复。Set 本身是一个构造函数。

1
2
3
4
5
6
7
8
9
10
11
const set = new Set()
;[1, 2, 3, 4].forEach((x) => set.add(x))
for (let value of set) {
  console.log(value) //1, 2, 3, 4
}

const set = new Set([1, 2, 3, 4])
;[...set] //[1, 2, 3, 4]

//数组除重
;[...new Set(array)]

在 Set 内部，NaN 是相等的，两个对象总是不相等的。

1
2
3
4
5
6
7
8
let set = new Set()
let a = NaN
let b = NaN
set.add(a).add(b)
set.size //1

set.add({}).add({})
set.size //3
Read more »

Posted on In

ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。
Symbol 值通过 Symbol 函数生成，也就是说，对象的属性名现在可以有两种类型：一种是字符串，另一种就是 Symbol 类型。只要属性名属于 Symbol 类型，就是独一无二的，可以保证不会与其他属性名冲突。

1
2
let s = Symbol()
typeof s //symbol

Symbol 函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述，主要是为了在 console 显示。

1
2
let s = Symbol("str")
s.toString() //'Symbol(str)'

如果 Symbol 的参数是一个对象，就会调用该对象的 toString 方法，再生成 Symbol 值

1
2
3
4
5
6
7
const obj = {
  toString() {
    return "test"
  },
}
const s = Symbol(obj)
s.toString() //'Symbol(test)'
Read more »

Posted on In

拖拽元素事件：

  • dragstart：拖拽前触发
  • drag：拖拽前到拖拽结束之间，连续触发
  • dragend：拖拽结束触发
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</ul>

<script>
  let aLi = document.querySelectorAll("li")
  for (let li of aLi) {
    let count = 0
    li.ondragstart = function () {
      this.style.backgroundColor = "red"
    }
    li.ondrag = function () {
      console.log(count++) //连续触发
    }
    li.ondragend = function () {
      this.style.backgroundColor = ""
    }
  }
</script>
Read more »

Posted on In

data 自定义数据在 query、mobile 常用。

1
2
3
4
5
6
7
<div id="div1" data-test="hello" data-test-last="world"></div>

<script>
  let oDiv = document.getElementById("div1")
  oDiv.dataset.test //'hello'
  oDiv.dataset.testLast //'world'
</script>

Posted on In

eval()

eval 可以解析任何字符串变成 JS：

1
2
3
var str = "function testFunction() {console.log('test');}"
eval(str)
testFunction() //'test'

JSON.parse()

JSON.parse 只能解析 JSON 形式的字符串变成 JS，安全性比 eval 高一些。
字符串中的属性要严格加上引号

1
2
3
let str = '{ "name" : "hello" }'
let json = JSON.parse(str)
json.name //'hello'
Read more »

Posted on In

querySelector()

querySelector 只能选择一组中的第一个元素：

1
2
3
4
5
6
<div class="test">div1</div>
<div class="test">div2</div>

<script>
  document.querySelector(".test").style.color = "red" //只有第一个会变红
</script>

querySelectorAll()

querySelectorAll 获取一组元素：

1
2
3
4
5
6
7
8
9
<div class="test">div1</div>
<div class="test">div2</div>

<script>
  let aDiv = document.querySelectorAll(".test")
  for (let div of aDiv) {
    div.style.color = "red"
  }
</script>
Read more »

Posted on In

validity 对象

通过 validity 对象，通过下面的 valid 可以查看验证是否通过，如果八种验证都通过返回 true，有一种失败则返回 false

  • oText.addEventListener(‘invalid’, fn, false);
  • ev.preventDefault()
  • valueMissing: 输入值为空时
  • typeMismatch: 控件值与预期类型不匹配
  • patterMismatch: 输入值不满足 pattern 正则
  • tooLong: 超过 maxLength 最大限制
  • rangeUnderflow: 验证的 range 最小值
  • rangeOverflow: 验证的 range 最大值
  • setMismatch: 验证 range 的当前值是否符合 min、max、step 的规则
  • customError: 不符合自定义验证–setCustomValidity()设置自定义验证
Read more »

Posted on In 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<form action="">
  <!--placeholder: 输入框提示信息-->
  <!--autocomplete: 自动保存用户输入过的值，默认为on-->
  <!--pattern: 正则验证-->
  <input
    type="text"
    placeholder="请输入6-8个数字"
    pattern="\d{6,8}"
    name="user"
    autocomplete="off"
    id=""
  />
  <!--formaction: 定义提交地址-->
  <input type="submit" value="提交" formaction="http://www.baidu.com" />
</form>

<form action="">
  <!--autofocus: 自动焦点-->
  <!--required: 必填项-->
  <input type="text" name="username" id="" autofocus required />
  <input type="password" name="" id="" required />
</form>

<!--datalist选项列表，与input元素配合使用，定义input的可能值-->
<input type="text" list="varList" />
<datalist id="varList">
  <option value="javascript">javascript</option>
  <option value="html">html</option>
  <option value="css">css</option>
</datalist>
Read more »

Posted on In 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--新的输入控件-->

<!--email: 电子邮箱文本框，当输入的不是邮箱的时候，验证通不过。移动端的键盘会有变化-->
<form action="">
  <input type="email" name="" id="" />
  <input type="submit" value="提交" />
</form>

<!--tel: 电话号码-->
<input type="tel" name="" id="" />
<!--url: 网页的url-->
<!--search: 搜索引擎，chrom下会多个关闭按钮-->
<!--number: 只能输入数字-->
<!--color: 颜色选择器-->
<!--datetime: 显示日期-->
<!--datetime-local: 显示完整日期，不含时区-->
<!--time: 显示时间，不含时区-->
<!--date: 显示日期-->
<!--week: 显示周-->
<!--month: 显示月-->

<!--特定范围内的数值选择器 max、min、step、value-->
<input type="range" step="2" min="0" max="10" value="2" name="" id="" />

Posted on In 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!--语义化标签-->
<header>页面的头部</header>
<hgroup>
  <h1>Test</h1>
  <h2>test</h2>
</hgroup>
<footer>页面的底部</footer>
<nav>
  <a href="#">导航</a>
  <a href="#">link1</a>
  <a href="#">link2</a>
</nav>
<section>用来划分区域</section>
<article>用来在页面中表示一套结构完整且独立的内容部分（主题）</article>
<aside>和主题相关的附属信息</aside>

<figure>用于对元素进行组合，一般用于图片或视屏</figure>
<figure>
  <img src="" alt="" />
  <figcaption>Test</figcaption>
</figure>

<time>9:00</time>

<p>
  明天
  <time datatime="2018-02-14">情人节</time>
</p>

<!--用于描述文档或文档某个部分的细节-->
<details open>
  <!--open时默认打开-->
  <summary>test</summary>
  <!--details元素的标题-->
  <p>testjfkdsjkfsjd</p>
</details>

<!--定义一段对话-->
<dialog>
  <dt>老师</dt>
  <dd>2 + 3 ?</dd>
  <dt>学生</dt>
  <dd>5</dd>
</dialog>

<address>定义文章或页面作者的详细联系信息</address>

<mark>需要标记的词或句子</mark>

<!--keygen给表单添加一个公钥-->
<form action="http://www.baidu.com" method="get">
  用户：
  <input type="text" name="usr_name" /> 公钥：
  <keygen name="security" />
  <input type="submit" />
</form>

<!--定义进度条-->
<progress max="100" value="76">
  <span>76</span>%
  <!--为了兼容-->
</progress>