Lzone

always be doing

0%

Javascript总结

发表于 更新于 分类于
本文字数： 4.2k 阅读时长 ≈ 4 分钟

JS基础s

引入js文件<script src="地址"></script>

输出document.write("<h1>内容</h1>")

改变html中内容document.getElementById("ID").innerHTML="新内容"

注释

单行注释//注释

多行注释/*注释*/

变量

通过var声明各种类型

数组声明var arr=[1,2,3,4];

动态数组var arr=new Array();

不加前缀直接声明全局变量m = 1

严格作用域用let

可以通过赋值为空的方法清除变量a=null

运算符

字符串拼接可直接用+

任何类型与字符串作运算会被强制转换成字符串类型

比较运算符：

1
2
3
4
==						双等（其他类型与字符串比较会自动转换）
===						三等（完全判等）
!=						不等（同双等）
!==						不等（同三等）

另外还有< > <= >=比较运算符

条件语句

if else,switch,for,while,do while同C语言

for(j in i)结构将j遍历i[]中的所有元素

跳转语句同C语言

函数

1
2
3
常用函数
alert()					弹出对话框
console.log()			在html命令行显示

定义函数function 函数名(){函数体}

函数可以在<script>标签中使用或在HTML文件中使用

函数加this指向本元素,如

<div onmouseout="function(this)"></div>this指向本div

函数可用arguments.calle(n-1)递归调用自身函数

异常捕获
1
2
3
4
5
6
try{
	异常代码块
}catch(err){
	//错误信息处理
	alert(err)
}

事件

1
2
3
4
5
6
7
8
9
onClick				    单击事件
onMouseOver				鼠标经过事件
onMouseOut				鼠标移出事件
onChange				文本内容改变事件
onSelect				文本框选中事件
onFocus					光标聚集事件
onBlur					移开光标事件
onLoad					网页加载事件
onUnload				关闭网页事件

onload onunload在body中调用

DOM

DOM操作HTML

  1. 改变HTML输出流

    不要再文档加载完成后再使用document.write()会覆盖文档

  2. 寻找元素

    通过id(ById)或标签名(ByTagName)找到HTML元素

    ByTagName和ByName寻找到的多个元素会通过数组存储

  3. 改变HTML内容

    属性innerHTML

  4. 得到HTML属性

    getAttribute("")

  5. 改变HTML属性

    setAttribute("属性","值")

  6. 其他方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    childNodes()				访问子节点
    parentNode()				访问父节点
    createElement()				创建元素节点
    createTextNode				创建文本节点
    insertBefore(,)				插入节点（选择位置）
    appendChild()				添加节点（末尾）
    removeChild()				删除节点
    offsetHeight				网页尺寸（不包含滚动条）
    scrollHeight				网页尺寸（包含滚动条）
DOM EventListener(句柄)

addEventListener("事件"，函数): 添加句柄

removeEventListener("事件"，函数):移除句柄

事件流

描述页面中接受事件的顺序

事件冒泡：由最具体的元素（最内层）接受，然后逐级向上传播至最不具体的结点（最外层）

事件捕获：最不具体的结点（最外层）先接收事件，最具体的结点（最内层）最后接收事件

事件处理

  1. HTML事件处理：直接添加到HTML结构中

  2. DOM0级事件处理：把一个函数赋值给一个事件处理程序

  3. DOM2级事件处理

    addEventListener(“事件名”,事件处理函数，布尔值（可略）)；

    removeEventListener();

    true:事件捕获 false:事件冒泡

  4. IE事件处理

    attachment(“事件名”,事件处理函数，布尔值（可略）)；

    detachment();

事件对象

在触发DOM事件时会产生一个对象

DOM事件发生属于事件冒泡

事件对象event:

1
2
3
4
type					获取事件类型
target					获取事件目标
stopPropagation()		 阻止事件冒泡
preventDefault()		 组织事件默认行为

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
    document.getElementById("btn1").addEventListener("click" , showType)；											                     document.getElementById("div").addEventListener("click",showDiv);
	document.getElementById("aid" ).addEventListener("click",showA);
	function showType(event){
		alert(event.type);
		alert(event.target);
		event.stopPropagation();//阻止事件冒泡
	}
	function showDiv(){
		alert( "div" );
	}
	function showA(event){
		event.stopropaaation()://阻止事件冒泡
		event.preventDefault();//阻止本事件发生
    }
</script>

JS内置对象

自定义对象

定义并创建对象：

1
2
3
people = new Object();
people.name = ""; people.age = "";
或people = {name:"",age:""};

使用函数来定义对象，然后创建新的对象实例：

1
2
3
4
5
function people(name, age){
	this.name = ;
	this.age = ;
}
son = new people("",);
字符串对象

字符串位置：indexOf("")存在返回所在位置，不存在返回-1

匹配字符串：match("")存在打印字符串，不存在返回null

替换字符串：replace("","新字符串")

大小写转换：toUpperCase()/toLowerCase()全部转大/小写

字符串转数组：split(",")通过,分割数组

Date日期对象

当日日期var date = new Date();

1
2
3
4
5
6
7
获取具体信息
getFullYear()				获取年份
getTime()					获取毫秒
setFullYear(y,m,d)			 设置事件
getDay()					获取星期
toLocaleDateString()		获取标准日期格式
toLocaleTimeString()		获取标准时间格式

时钟实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function startTime(){
	var today = new Date();
	var h = today.getHours();
	var m = today.getMinutes();
	var s = today.getSeconds();
	m= checkTime(m);//对齐格式
	s = checkTime(s);
	document.getElementById("timetxt").innerHTML = h+":"+m+":"+s;
	t= setTimeout( function{
		startTime();
	},1000);//setTimeout函数将startTime函数1000毫秒调用一次
}
function checkTime(i){
	if(i<10){
		i = “0""+i;
	}
	return i;
}
1
<div id="timetxt"></div>
数组对象

两数组a,b

1
2
3
4
a.concat(b)					合并数组
a.sort()					排序
a.push("")					末尾追加元素
a.reverse()					数组元素反转
Math对象
1
2
3
4
5
round()						四舍五入
random()					返回0~1之间随机数
max()						返回最高值
min()						返回最低值
abs()						返回绝对值

parseInt()可以将数据转为int类型

JS浏览器对象

window对象
1
2
3
4
window.innerHeight					窗口内部高度
window.innerWidth					窗口内部宽度
window.open("地址","名称",其他属性)		打开新窗口
window.close()						关闭当前窗口
计时器
1
2
3
4
setInterval()				间隔指定毫秒数不停执行指定代码
clearInterval()				清除上述代码
setTimeout()				暂停指定毫秒数后执行指定代码
clearTimeout()				停止上述代码
History对象

history.go()括号里填1或-1等表示前进或后退页面

Screen对象
1
2
3
4
screen.availWidth			可用宽度（除边框）
screen.availHeight			可用高度（除边框）
screen.height			    屏幕高度
screen.width			    屏幕宽度

暂时完结