javascript总结
ECMAScript
1.语法
2.变量：只能使用var定义，如果在函数的内容使用var定义，那么它是一个局部变量，如果没有使用var它是一个全局的。弱类型！
3.数据类型：原始数据类型(undefined/null/string/number/boolean)
4.语句：
5.运算符：==与===的区别
6.函数：两种写法(有命名称，匿名的)
BOM对象
window:alert(),prompt(),confirm(),setInterval(),clearInterval(),setTimeout(),clearTimeout()
history:go(参数)，back(),forward()
location: href属性
DOM操作
DOM文档结构.PNG
- Document:整个html文件都成为一个document文档
- Element:所有的标签都是Element元素
- Attribute：标签里面的属性
- Text：标签中间夹着的内容为text文本
- Node:document、element、attribute、text统称为节点node.
Document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
document对象.png
后面两个方法获取之后需要遍历！
以下两个方法很重要，但是在手册中查不到！
创建文本节点：document.createTextNode()
创建元素节点：document.createElement()
Element对象
我们所认知的html页面中所有的标签都是element元素
- element.appendChild():向元素添加新的子节点，作为最后一个子节点。
- element.firstChild:返回元素的首个子节点。
- element.getAttribute():返回元素节点的指定属性值。
- element.innerHTML:设置或返回元素的内容。
- element.insertBefore():在指定的已有的子节点之前插入新节点。
- element.lastChild:返回元素的最后一个子元素。
- element.setAttribute():把指定属性设置或更改为指定值。
- element.removeChild():从元素中移除子节点。
- element.replaceChild():替换元素中的子节点。
Attribute对象
我们所认知的html页面中所有标签里面的属性都是attribute
attribute对象.png
练习
在页面中使用列表显示一些城市
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
我们希望点击一个按钮实现动态添加城市。
分析：
- 事件(onclick)
- 获取ul元素节点
- 创建一个城市的文本节点
- 创建一个li元素节点
- 将文本节点添加到li元素节点中去。
- 使用element里面的方法appendChild()来添加子节点
JS代码：
<script>
window.onload = function(){
document.getElementById("btn").onclick = function(){
//1.获取ul元素节点
var ulEle = document.getElementById("ul1");
//2.创建城市文本节点
var textNode = document.createTextNode("深圳");//深圳
//3.创建li元素节点
var liEle = document.createElement("li");//<li></li>
//4.将城市文本节点添加到li元素节点中去
liEle.appendChild(textNode);//<li>深圳</li>
//5.将li添加到ul中去
ulEle.appendChild(liEle);
}
}
</script>
HTML代码
<body>
<input type="button" value="添加新城市" id="btn"/>
<ul id="ul1">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</body>
事件：
onsubmit()此事件写在form标签中，必须有返回值。
onload()此事件只能写一次并且放到body标签中
其它事件放到需要操作的元素位置。(onclick、onfocus、onblur)
回顾之前已经使用过的事件
(onsubmit/onclick/onload/onfocus/onblur/onmouseover/onmouseout)
事件.png
- onfocus/onblur:聚焦离焦事件，用于表单校验的时候比较合适。
- onclick/ondblclick:鼠标单击和双击事件
- onkeydown/onkeypress：搜索引擎使用较多
- onload：页面加载事件，所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称，那么在html页面中只能写一个。
- onmouseover/onmouseout/onmousemove：购物网站商品详情页。
- onsubmit：表单提交事件 ，有返回值，控制表单是否提交。
- onchange:当用户改变内容的时候使用这个事件(二级联动)
获取元素：
document.getElementById("id")
获取元素里面的值:
document.getElementById("id").value
向页面输出
弹窗：alert();……
向浏览器中写入内容：document.write(内容)；
向页面指定位置写入内容,innerHTML
JavaScript内置对象
- JS Array
- JS Boolean
- JS Date
- JS Math
- JS Number
- JS String
- JS RegExp
Array对象
数组的创建：
Array对象用于在单个的变量中存储多个值
创建Array对象的语法：
new Array();
new Array(size);
new Array(element0,element1,...,elementn);
数组的特点：长度可变！数组的长度=最大角标+1
Boolean对象
创建Boolean对象的语法：
new Boolean(value);//构造函数
Boolean(value);//转换函数
如果value 不写，那么默认创建的结果为false
Date对象
getTime()返回 1970 年 1 月 1 日至今的毫秒数。
解决浏览器缓存问题
Math和number对象
与java里面的基本一致。
String对象
match()找到一个或多个正则表达式的匹配。
substr()从起始索引号提取字符串中指定数目的字符。
substring()提取字符串中两个指定的索引号之间的字符。
例子：
<script>
var str = "-a-b-c-d-e-f-";
var str1 = str.substr(2,4);//-b-c
//alert(str1);
var str2 = str.substring(2,4);//-b
alert(str2);
</script>
RegExp对象
正则表达式对象。
test
检索字符串中指定的值。返回 true 或 false。
全局函数
全局属性和函数可用于所有内建的 JavaScript 对象
全局函数.png
关于编码和解码的一组方法：
<script>
var str = "张三";
//alert(encodeURI(str));//%E5%BC%A0%E4%B8%89
//alert(encodeURIComponent(str));//%E5%BC%A0%E4%B8%89
//alert(decodeURI(encodeURI(str)));//张三
//alert(decodeURIComponent(encodeURIComponent(str)));//张三
var str1 = "http://www.ithcx.cn";
//alert(encodeURI(str1));//http://www.ithcx.cn
//alert(encodeURIComponent(str1));//http%3A%2F%2Fwww.ithcx.cn
//alert(decodeURI(encodeURI(str1)));//http://www.ithcx.cn
//alert(decodeURIComponent(encodeURIComponent(str1)));//http://www.ithcx.cn
var str2 = "alert('abc')";
//alert(str2);
eval(str2);
</script>