HTML
- input类型的checkbox和radio,还有select类型一样显示文字写在外面
- input属性的按钮类型则不同,包括button和submit,其value属性就是显示值。
- 但是file按钮不同,file类型也算是一个按钮。其只需要一个name属性即可,value属性无用
- input是file类型按钮的话,表单属性必须是如下
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 οnclick=func> </a>,则是标签本身,否则还是window对象-直接写在标签的响应事件中,标签本身的对象。 <input value='ddd' οnclick='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; width: 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 // 获取当前URLlocation.href = "url" // 设置URL 重定向location.reload() // 重新加载,刷新// 定时器setInterval // 多次定时器clearInterval // 清除多次定时器setTimeout // 单次定时器clearTimeout // 清除单次定时器 document.getElementById("f1").submit() //提交表单
绑定事件的两种方式
a. 直接标签绑定 οnclick=’xxx()’ onfocusb. 先获取Dom对象,然后进行绑定 document.getElementById(‘xx’).onclickdocument.getElementById(‘xx’).onfocus
javascript原型的作用是节省内存,具体做法是将函数都定义成一份,不用每个对象重复定义函数,
function Foo(n){
this.name = n;}// Foo的原型Foo.prototype = { 'sayName': function(){ console.log(this.name) }}