HTML 知识点

本文用于记录 HTML 中一些容易忘记、遗漏、混淆的知识点，不定时更新……

disabled readonly checked selected 属性

只要 HTML 包含此类属性，无论值是 true 或者 false ，都会生效。

jQuery 操作此类属性推荐使用 prop() 方法，无论是否含有此类属性，都会返回 true 或 false ：

返回属性的值：$(selector).prop(property)
设置属性和值：$(selector).prop(property,value)

而 attr() 会返回 disabled readonly checked selected 或 undefined

添加移除属性

js 中的方法

直接添加属性（动态添加属性，不会出现在 HTML 代码中）
- 设置：DOM元素.index = 1
- 获取：DOM元素.index
Attribute 方法
- setAttribute(name, value) 设置 input 元素文本框的值的方式是 input元素.value='天天向上'
- getAttribute(name) 获取 input 文本框的值的方式是 input元素.value
- removeAttribute(name)
data-* 属性
- 为 DOM 元素设置私有自定义数据：DOM元素.dataset.name='xxx' 或 DOM元素.dataset["name"] = 'xxx'
- 获取 HTML 属性 data-* 保存的私有自定义数据：DOM元素.dataset.name

注意： 假设 element 代表一个 DOM 元素，通过 element.setAttribute('xxx', 1) 和 element.xxx = 1 的形式设置值的时候

如果 xxx 是代表特性的属性，比如 id 和 class ，那么不管哪种方法设置，都会互相共用，也就是说，通过 element.xxx 与 element.getAttribute('xxx') 获取的结果都一样。
如果 xxx 代表的不是特性的属性，那么获取的值就不会共用。比如 element.xxx = 1 ，通过 getAttribute 方法获取值的时候会返回 null ，并且不会出现在 HTML 代码中；同样的，通过 setAttribute 方法设置的值用 element.xxx 获取也不会返回值，只会返回 undefined ，但是新加的键和值会出现在 HTML 代码中。
有些 HTML 的特性属性以 element.xxx 形式赋值或取值时需要做相应的变化，比如 class 要写成 className ， for 要写成 HTMLFor ， readonly 要写成 readOnly 。

jQuery 中的方法

jQuery 不可以直接点出属性，需要通过 attr('xxx') 方法获取
- $jq.attr('name', 'value')
- 也可以使用对象的方式添加多个属性
input 文本框与 textarea 文本域值的操作
- $jq.val()
- $jq.val('天天向上')
DOM 元素的文本内容
- $jq.text()
- $jq.text('内容')
移除属性
- $jq.removeAttr('name')
对于 HTML 元素本身就带有的固有属性，在操作时采用 prop() 和attr() 方法均可，但是碰到 checkbox、radio、select、button 这些元素，它们的 checked、selected、disabled 属性要使用 prop() 方法。
对于 HTML 中我们自定义的属性只能使用 attr 方法，使用 prop 设置和获取属性值时都会返回 undefined 。

根据已有 file 对象构建新的 file 对象


var file = app.$('videoInput').files[0]; //从 file input中获取File对象, dom对象$('#videoInput').get(0).files[0]
//如果没有后缀 vivo x5max
if(file.name.indexOf(".") <= 0){ // 如果该文件没有后缀就新年构造一个File对象， 并指定文件名和类型
    // 第一个参数可以为Blob对象的数组 （第一个参数必须是数组）， File对象继承自Blob，所以可以传递File对象
    // 第二个参数为 要设置的文件名
    // 第三个参数为可选参数， 没有后缀可能获取不到该文件类型， 所以最好设置下该值
    file = new File([file], new Date().getTime()+".mp4",{type:"video/mp4"})
}

模板引擎 (jade/art-template/nujunks等等)

模板引擎的本质是处理字符串，是按照自己规定的模板语法解析对应的模板字符串，跟 HTML、DOM 没有关系，只要字符串有对应的模板语法皆能解析处理。