HTML
- input类型的checkbox和radio，还有select类型一样显示文字写在外面
- input属性的按钮类型则不同，包括button和submit，其value属性就是显示值。
- 但是file按钮不同，file类型也算是一个按钮。其只需要一个name属性即可，value属性无用
<input type="file" name="file" >
- input是file类型按钮的话，表单属性必须是如下
<form action="/upload_handler" enctype="multipart/form-data" method="post">
JavaScript
详细参考手册，点击这里
位置选择：
为了用户更加快捷的打开网页，增加友好度。
把js放在body标签内的最下面
基本数据类型
数字
数字就包括了整型和浮点型，略字符串
obj.length 长度
obj.trim() 移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n) 返回字符串中的第n个字符
obj.concat(value, ...) 拼接
obj.indexOf(substring,start) 子序列位置
obj.lastIndexOf(substring,start) 子序列位置
obj.substring(from, to) 根据索引获取子序列
obj.slice(start, end) 切片
obj.toLowerCase() 大写
obj.toUpperCase() 小写
obj.split(delimiter, limit) 分割
obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项，
$数字：匹配的第n个组内容；
$&：当前匹配的内容；
$`：位于匹配子串左侧的文本；
$'：位于匹配子串右侧的文本
$$：直接量$符号
数组
obj.length 数组的大小
obj.push(ele) 尾部追加元素
obj.pop() 尾部获取一个元素
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素
obj.splice(起始位置, 删除个数, 值, ...) 插入、删除或替换数组的元素
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替换元素
obj.splice(n,1) 指定位置删除元素
obj.slice( ) 切片
obj.reverse( ) 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串
obj.concat(val,..) 连接数组
obj.sort( ) 对数组元素进行排序
"分隔符".join(['X','XX']) # python中
['X','XX'].join('分隔符') # JavaScript中
字典 #var arr = {fff:'dddd'}; ，注意不用键值不用''号也可以。
this 解析
总结：一句话，谁调用这个函数，函数内部的this就是谁。需要注意的是，若原生js函数里面有jquery函数，例如ajax，外层this会被内层this所覆盖。
原生JavaScript中的this对象分三种情况
-在类中，表示实例化本身
-在普通函数中：一般为window对象。但对于事件函数，如果是函数名绑定,例如<a onclick=func> </a>，则是标签本身，否则还是window对象
-直接写在标签的响应事件中，标签本身的对象。 <input value='ddd' onclick='console.log(this);'>
function Car(color, door) { alert(this) this.showColor = function () { alert(this) }; } // object object (function () { alert(this); })() //windows object
元素查找
document.getElementById('i1') 根据ID获取一个元素
document.getElementsByTagName('div') 根据标签名获取标签集合
document.getElementsByClassName('div') 获取class多个元素(列表)
document.getElementsByName 获取name多个元素(列表)
querySelector()
接收CSS选择符，返回匹配到的第一个元素，没有则null
querySelectorAll()
接收CSS选择符，返回一个数组，没有则返回[]
parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
文本操作
innerText 所有的纯文本内容，包括子标签中的文本
innerHTML 所有子节点(包括元素、注释和文本节点)
appendData() 追加
value 值 input value获取当前标签中的值; select 获取选中的value值 ; textarea value获取当前标签中的值
‘类’的操作
tag.className='c1' 直接整体做操作 tag.classList.add('c2') 添加指定样式 tag.classList.remove('c2') 删除指定样式
样式操作
通过元素节点的style属性访问 document.getElementById("p2").style.color="blue" style.cssText CSS模式的修改 style.length · 批量改变属性例子 tT.style.cssText = "background-color: yellow; 200px; height: 200px"; //修改属性
属性操作
可以看作JavaScript的反射
- 元素节点和以下操作之一，若有则访问，若无则增加
1、“.” 操作
2、“[ ]”操作
attributes //字典列表 var x=document.getElementById("myHeader"); x.attributes["onclick"].nodeValue="alert('dd')" alert(x.attributes["onclick"].nodeValue); setAttribute(key,value) // 设置标签属性 removeAttribute(key) // 移除标签属性 attributes // 获取所有标签属性 getAttribute(key) // 获取指定标签属性
重要方法
console.log // 输出框
alert // 弹出框
confirm // 确认框
// URL和刷新
location.href // 获取当前URL
location.href = "url" // 设置URL 重定向
location.reload() // 重新加载，刷新
// 定时器
setInterval // 多次定时器
clearInterval // 清除多次定时器
setTimeout // 单次定时器
clearTimeout // 清除单次定时器
document.getElementById("f1").submit() //提交表单
正则表达式
绑定事件的两种方式
a. 直接标签绑定 onclick=’xxx()’ onfocus
b. 先获取Dom对象，然后进行绑定
document.getElementById(‘xx’).onclick
document.getElementById(‘xx’).onfocus
javascript原型的作用是节省内存，具体做法是将函数都定义成一份，不用每个对象重复定义函数，
function Foo(n){
this.name = n;
}
// Foo的原型
Foo.prototype = {
'sayName': function(){
console.log(this.name)
}
}